4

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

在 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::drawTextCompose Desktop 上不存在。我试图用 TextPainter 替换所有逻辑，但没有绘制任何内容。

我该怎么做才能让它发挥作用？或者
是否有依赖项我可以从 Android 导入以使其正常工作？

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

4

1 回答 1

8

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）不支持- 我必须将其指定为创建的一部分。textSizePaintFont
  • 它似乎假设左对齐。我发现让它工作的一种方法是使用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)
于 2021-04-10T20:30:49.773 回答