Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Jetpack Compose Path will draw outside canvas bounds

I have a signature box, at the moment when you sign, it is possible to draw outside the canvas. I need the path to stay within the bounds of the canvas. I could manually do this when capturing the path but I figure there is probably an automatic way.

 Canvas(modifier = Modifier
        .fillMaxWidth()
        .height(100.dp)
        .border(1.dp, MaterialTheme.colors.primaryVariant, shape = RoundedCornerShape(4.dp))
        .pointerInput(Unit) {
            detectDragGestures(onDragStart = {
                touchMove(path, it.x, it.y, -1f, -1f, true)
            }) { change, _ ->
                change.consumeAllChanges()
                touchMove(
                    path,
                    change.position.x,
                    change.position.y,
                    change.previousPosition.x,
                    change.previousPosition.y,
                    false
                )
            }
        }) {
        canvasWidth = size.width
        canvasHeight = size.height
        drawPath(path, color = Color.Blue, style = Stroke(width = 4f))
    }
like image 513
badvok Avatar asked Dec 31 '22 13:12

badvok


1 Answers

Dearie me. Figured it out minuets after writing.

Modifier.clipToBounds()

Strange this isn't mentioned in any of the examples. Its the opposite behaviour of normal android clipping I think.

like image 150
badvok Avatar answered Jan 02 '23 04:01

badvok