Jetpack Compose中使用Canvas时预览窗口不显示内容问题

问题根源 #

你的代码存在两个核心问题导致图片无法显示：

• translate(left = size.width) 将图片整体平移至Canvas的右侧边界外，完全超出了可见区域
• draw(imagePainter.intrinsicSize) 的调用方式未明确绘制对齐逻辑，进一步加剧显示异常

修正后的代码 #

@Preview(showBackground = true)
@Composable
fun DrawImagePreview() {
    // 直接使用painterResource获取VectorPainter，自动处理缓存与资源加载
    val imagePainter = painterResource(id = R.drawable.xyz)
    Column(Modifier.background(Color.DarkGray).height(100.dp)) {
        Canvas(modifier = Modifier.fillMaxHeight()) {
            val imageSize = imagePainter.intrinsicSize
            // 计算居中偏移量，确保图片在Canvas内居中显示
            val offsetX = (size.width - imageSize.width) / 2
            val offsetY = (size.height - imageSize.height) / 2
            
            translate(left = offsetX, top = offsetY) {
                with(imagePainter) {
                    // 直接调用draw()，自动使用图片固有尺寸
                    draw()
                }
            }
        }
    }
}

额外适配建议 #

如果图片尺寸超出Canvas范围，可添加缩放逻辑适配：

@Preview(showBackground = true)
@Composable
fun DrawImagePreview() {
    val imagePainter = painterResource(id = R.drawable.xyz)
    Column(Modifier.background(Color.DarkGray).height(100.dp)) {
        Canvas(modifier = Modifier.fillMaxHeight()) {
            val imageSize = imagePainter.intrinsicSize
            // 计算适配Canvas的最大缩放比例
            val scale = min(size.width / imageSize.width, size.height / imageSize.height)
            // 缩放后重新计算居中偏移
            val scaledImageWidth = imageSize.width * scale
            val scaledImageHeight = imageSize.height * scale
            val offsetX = (size.width - scaledImageWidth) / 2
            val offsetY = (size.height - scaledImageHeight) / 2
            
            translate(left = offsetX, top = offsetY) {
                scale(scale) {
                    with(imagePainter) { draw() }
                }
            }
        }
    }
}

排查补充 #

• 确认R.drawable.xyz是res/drawable目录下的有效VectorDrawable资源
• 检查Canvas的Modifier是否分配了足够的绘制空间

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