在 DrawScope 中绘制文本 - Jetpack Compose Desktop

Draw Text within DrawScope - Jetpack Compose Desktop

我想在 canvas 中绘制文本以显示图表标签。

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

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

原始代码,我尝试将其更改为与桌面一起使用 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"

Desktop Compose 本机 canvas 应该有几个与绘制文本相关的方法。您可以尝试调用 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 - 我有将其指定为 Font 创建的一部分。
  • 它似乎假定左对齐。我发现让它工作的一种方法是将 TextLinecanvas.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)