Is it possible to apply a transform matrix on `Com...

# compose

[freddiewang]

Is it possible to apply a transform matrix on ComposePath directly? I would like to draw multiple paths with different transform matrices (including scale and rotation). but I am not sure how to draw it correctly in Compose

[romainguy]

How are you drawing your paths?

[freddiewang]

The sample code is like this

fun sakura(): Path =
    Path().apply {
        moveTo(0f, 25f)
        quadraticBezierTo(12.5f, 0f, 30f, 15f)
        lineTo(20f, 20f)
        lineTo(30f, 25f)
        quadraticBezierTo(12.5f, 40f, 0f, 25f)
        close()
    }

@Composable
@Preview
fun SakuraPreview() {
    Canvas(modifier = Modifier.fillMaxSize()) {
        val path = sakura()
        val rect = path.getBounds()
        withTransform(transformBlock = {
            val pivot = rect.center
            rotate(45f, pivot = pivot)
            scale(2f, 2f, pivot = pivot)
            translate(100f, 100f)
        }) {
            drawPath(path, Color(0xFFFA9599))
            // Draw the border for debug
            drawRect(Color.Red, rect.topLeft, rect.size, style = Stroke(width = 1f))
        }
    }
}

The preview result look incorrect, I am not sure whether the pivot is incorrect or misuse the withTransform

[freddiewang]

So I wanna try to calculate the transform matrix but couldn’t find how to apply the transform matrix to the Path

[romainguy]

If you access the native path you can apply a matrix to it but it’s going to be more costly. The approach you are taking is correct but the order of your transforms might be wrong depending on what you are trying to achieve

[freddiewang]

@romainguy Thanks for your response! After changing the order of the transforms, it solved my problem