在 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
创建的一部分。
- 它似乎假定左对齐。我发现让它工作的一种方法是将
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)
我想在 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
创建的一部分。 - 它似乎假定左对齐。我发现让它工作的一种方法是将
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)