在 DrawScope 中绘制文本 - Jetpack Compose Desktop

Question

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

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

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

原始代码，我尝试将其更改为与 Desktop Source 一起使用：

    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.drawString(label, x, y, org.jetbrains.skija.Font(), labelPaint)，而不是canvas.nativeCanvas.drawText。

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

这也有一些注意事项：

• 如果要设置文本样式（颜色除外），则必须构建自己的Font 实例。空的构造函数似乎使用了一些系统默认值。我自己还在学习 API，所以我建议通读文档（我认为目前只是 code）。
• 您可能还需要更改创建Paint 的方式，因为（至少在我使用的版本上）不支持Paint 上的textSize - 我必须将其指定为@ 的一部分987654329@创作。
• 似乎假定为左对齐。我发现让它工作的一种方法是将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)