代码之家 › 专栏 › 技术社区 › Patroy

如何在Jetpack Compose中在画布上绘制倾斜文本序列?

android-jetpack-compose canvas android

Patroy · 技术社区 · 4 年前

我正在Jetpack Compose中绘制图表,其中x个标签使用 drawIntoCanvas 方法基本上非常简单的代码块:

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

输出如预期:

然而,我希望这些标签以所需的角度倾斜,以适应更长的文本。我尝试过将旋转应用于画布,但这会产生输出,即整个画布被旋转,而不是forEach循环的单个迭代。甚至使用诸如 canvas.save() 和 canvas.restore() 角度之间的转换没有产生期望的输出。也许在Compose陈述性世界中,有一些更简单的解决方案可以绘制这样的文本?

以下是我想要实现的可视化模型:

注意:整个图表都是用单个Compose编写的 Canvas 方法,因为我想引用图表的每个x值来精确地将标签放置在这一点上,所以我不想放置任何 Column 使用常规Compose Text 应用了旋转修改器。

0 回复 | 直到 4 年前

Phil Dukhov 4 年前

一般使用 android.graphics.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)
}

我的示例代码的结果(绘制的线前后都不旋转):