Compose Desktop中Canvas绘制文本超出屏幕的实现问询

问题原因 #

当你设置topLeft的y值过大（比如等于Canvas高度1080F）时，drawText内部计算文本布局约束时会出现maxHeight为负数的情况——默认Canvas的可绘制区域被限制在自身边界内，当文本完全超出这个区域时，布局系统无法处理负数的可用空间，从而抛出IllegalArgumentException。

解决方法 #

1. 关闭Canvas的边界剪裁 #

默认Canvas会剪裁掉超出自身边界的内容，同时内部布局计算也受边界限制。添加clipToBounds(false)允许绘制超出组件范围的内容，避免边界约束导致的错误：

Modifier.clipToBounds(false)

2. 使用平移变换管理滚动偏移 #

不要直接给单个文本设置超大的y值，而是通过withTransform对所有文本做整体平移，这样每个文本的绘制坐标都保持在合理范围内，避免触发布局约束错误：

withTransform({
    translate(left = 0f, top = scrollOffset) // scrollOffset是你的滚动偏移量
}) {
    // 在这里绘制所有文本
}

3. 强制文本使用无限布局空间 #

在drawText中指定size = Size.Infinite，让文本布局不受Canvas边界限制，确保布局计算不会出现负数约束：

drawText(
    textMeasurer = textMeasurer,
    text = fl.toString(),
    topLeft = Offset(x = 0f, y = currentY),
    style = style,
    size = Size.Infinite
)

修改后的完整代码示例 #

val containerSize by service.containerSize.collectAsState()
// 滚动偏移量，可通过拖拽、滚动条等方式控制
val scrollOffset by remember { mutableStateOf(0f) }

Canvas(
    modifier = Modifier
        .width(priceBarItemWidth)
        .fillMaxHeight()
        .clipToBounds(false) // 关闭边界剪裁
        .pointerHoverIcon(PointerIcon(Cursor(N_RESIZE_CURSOR)))
) {
    if (containerSize.height == 0) return@Canvas
    
    withTransform({
        translate(left = 0f, top = scrollOffset)
    }) {
        var currentY = 0f
        prices.forEachIndexed { index, fl ->
            drawText(
                textMeasurer = textMeasurer,
                text = fl.toString(),
                topLeft = Offset(x = 0f, y = currentY),
                style = style,
                size = Size.Infinite
            )
            currentY += (priceBarItemHeightInPx + priceBarSpaceBetweenItemInPx)
        }
    }
}

额外优化：预先测量文本布局 #

如果需要更精确的控制，可以预先测量所有文本的布局结果，避免drawText重复计算，同时彻底规避布局约束问题：

// 预先缓存文本布局结果
val textLayoutResults = remember(prices, style) {
    prices.map { fl ->
        textMeasurer.measure(
            text = fl.toString(),
            style = style
        )
    }
}

// 在Canvas中使用预测量的结果绘制
withTransform({
    translate(left = 0f, top = scrollOffset)
}) {
    var currentY = 0f
    prices.forEachIndexed { index, _ ->
        drawText(
            textLayoutResult = textLayoutResults[index],
            topLeft = Offset(x = 0f, y = currentY)
        )
        currentY += (priceBarItemHeightInPx + priceBarSpaceBetweenItemInPx)
    }
}

内容的提问来源于stack exchange，提问作者MohammadBaqer