在 DrawScope 中绘制文本 - Jetpack Compose Desktop

问题描述

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

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

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

这也有一些警告：

如果要设置文本样式（颜色除外），则必须构建自己的 Font 实例。空构造函数似乎使用了一些系统默认值。我自己仍在学习 API，因此我建议通读文档（我认为目前只是 code）。
您可能还需要更改创建 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,yourPaint)

android-jetpack-compose canvas desktop desktop skia