如何在 Jetpack Compose 的画布上绘制一些旋转的元素？

Question

我在 Jetpack Compose 中绘制图表，使用 drawIntoCanvas 方法编写了 x 个标签。基本上非常简单的代码块：

data.forEachIndexed { index, point ->
    drawIntoCanvas {
        it.nativeCanvas.drawText(
            "${point.x}",
            chartCanvasStartX + index * intervalX,
            size.height + 4.dp.toPx(),
            textPaint
        )
    }
}

输出符合预期：

不过，我希望这些标签能够以所需的角度倾斜，以适合较长的文本。我已尝试对 canvas 应用旋转，但会产生输出，其中整个 canvas 被旋转，而不是此 forEach 循环的各个迭代。即使在角度变换之间使用 canvas.save() 和 canvas.restore() 等方法也不会产生所需的输出。也许在 Compose 声明世界中有一些更简单的解决方案来绘制这样的文本？

这是我想要实现的可视化模型：

注意：整个图表是用单一的Compose Canvas方法写的，因为我想引用图表的每个x值来精确地在这一点放置标签，所以我不想放置任何Column 使用常规 Compose Text 并应用了旋转修饰符。

Answer 1

一般使用android.graphics.Canvas你可以在绘制项目之前旋转canvas，然后反转旋转。

但是 compose 也有针对这种情况的内置解决方案：rotate 将仅对块内绘制的元素生效：

Canvas(modifier = Modifier.fillMaxSize()) {
    val rect = Rect(Offset.Zero, size)
    drawLine(Color.Yellow, start = rect.topLeft, end = rect.bottomRight, strokeWidth = 20f)
    rotate(degrees = -45f, rect.center) {
        drawIntoCanvas { canvas ->
            canvas.nativeCanvas.drawText(
                "1",
                rect.center.x, rect.center.y,
                android.graphics.Paint().apply {
                    color = Color.Red.toArgb()
                    textSize = 100f
                }
            )
        }
    }
    drawLine(Color.Green.copy(alpha = 0.5f), start = rect.topRight, end = rect.bottomLeft, strokeWidth = 20f)
}

我的示例代码的结果（画线前后都没有旋转）：

如何在 Jetpack Compose 的画布上绘制一些旋转的元素？

How to draw some of the elements rotated on the Сanvas in Jetpack Compose?

android

canvas

android-jetpack-compose