在 DrawScope 中绘制文本 - Jetpack Compose Desktop

Question

我想在画布内绘制文本以显示图表的标签。

在 Android 上，我可以使用该库： https: //github.com/tehras/charts（对于 Compose：1-alpha03），但在桌面上我不能。

因此我尝试重写损坏的部分。但我无法显示标签。

原始代码，我尝试更改以与桌面源一起使用：

    private val textPaint = android.graphics.Paint().apply {
        isAntiAlias = true
        color = labelTextColor.toLegacyInt()
    }
    private val textBounds = android.graphics.Rect()

    override fun drawAxisLabels(
        drawScope: DrawScope,
        canvas: Canvas,
        drawableArea: Rect,
        minValue: Float,
        maxValue: Float
    ) = with(drawScope) {
        val labelPaint = textPaint.apply {
            textSize = labelTextSize.toPx()
            textAlign = android.graphics.Paint.Align.RIGHT
        }
        val minLabelHeight = (labelTextSize.toPx() * labelRatio.toFloat())
        val totalHeight = drawableArea.height
        val labelCount = max((drawableArea.height / minLabelHeight).roundToInt(), 2)

        for (i in 0..labelCount) {
            val value = minValue + (i * ((maxValue - minValue) / labelCount))

            val label = labelValueFormatter(value)
            val x = drawableArea.right - axisLineThickness.toPx() - (labelTextSize.toPx() / 2f)

            labelPaint.getTextBounds(label, 0, label.length, textBounds)

            val y = drawableArea.bottom - (i * (totalHeight / labelCount)) + (textBounds.height() / 2f)

            canvas.nativeCanvas.drawText(label, x, y, labelPaint)
        }
    }

对我来说，最后的功能NativeCanvas::drawText在 Compose Desktop 上不存在。我尝试用 TextPainter 替换所有逻辑，但没有绘制任何内容。

我可以尝试什么让它发挥作用？或者
是否可以从 Android 导入依赖项以使其正常工作？

COMPOSE_DESKTOP_VERSION：“0.3.0-build138”
KOTLIN_VERSION：“1.4.21”

Answer 1

Desktop Compose 本机画布应该有一些与绘制文本相关的方法。相反canvas.nativeCanvas.drawText，您可以尝试致电canvas.nativeCanvas.drawString(label, x, y, org.jetbrains.skija.Font(), labelPaint)。

我使用0.4.0-build177Desktop Compose 版本得到了这个，所以不同版本上的 YMMV 。

这也有一些注意事项：

• 如果您想设置文本样式（颜色除外），则必须构造自己的Font实例。空构造函数似乎使用了一些系统默认值。我自己仍在学习 API，所以我建议阅读文档（我认为目前只是代码）。
• 您可能还需要更改创建方式，Paint因为（至少在我使用的版本上）不支持textSize-Paint我必须将其指定为Font创建的一部分。
• 它似乎假设左对齐。我发现让它工作的一种方法是TextLine与该canvas.nativeCanvas.drawTextLine()函数一起使用：

val textLine = TextLine.make(yourTextString, yourFont)
val xOffset = when (yourTextAlign) {
    // There are probably better ways to handle Start, End, and Justify...
    TextAlign.Left, TextAlign.Start -> 0f
    TextAlign.Right, TextAlign.End -> textLine.width
    TextAlign.Center, TextAlign.Justify -> textLine.width / 2f
}
val actualX = x - xOffset

canvas.nativeCanvas.drawTextLine(textLine, actualX, y, yourPaint)