Jetpack Compose绘制向量无显示：代码问题排查求助

我想了解如何在Jetpack Compose中绘制向量，编写了如下预览代码：

@Preview
@Composable
fun PreviewScreen(){
    val vector = ImageVector.Builder(
        defaultWidth = 100.dp,
        defaultHeight = 100.dp,
        viewportWidth = 10f,
        viewportHeight = 10f,
        tintBlendMode = BlendMode.SrcOver
    ).path(fill = Brush.horizontalGradient(listOf(Color.Green, Color.Blue))) {
        moveTo(1f,1f)
        lineTo(8f, 8f)
    }.build()

    val painter = rememberVectorPainter(image = vector)
    Canvas(modifier = Modifier.fillMaxSize()){
        with(painter){
            draw(painter.intrinsicSize)
        }
    }
}

我期望能看到一条渐变线条，但运行后却没有任何内容显示，请问这是为什么？我哪里出错了？

错误原因 #

你的代码存在两个核心问题：

• fill参数针对封闭图形生效，而你画的是开放线段：path里只调用了moveTo和lineTo，形成的是一条未封闭的直线，填充操作对开放路径无效，所以看不到内容。
• 绘制线条需用stroke参数而非fill：ImageVector.Builder的path方法中，fill负责填充封闭区域，stroke才是设置线条样式的参数。

修正后的代码 #

@Preview
@Composable
fun PreviewScreen(){
    val vector = ImageVector.Builder(
        defaultWidth = 100.dp,
        defaultHeight = 100.dp,
        viewportWidth = 10f,
        viewportHeight = 10f,
        tintBlendMode = BlendMode.SrcOver
    ).path(
        // 设置线条宽度与渐变描边
        stroke = Stroke(
            width = 1f,
            brush = Brush.horizontalGradient(listOf(Color.Green, Color.Blue))
        )
    ) {
        moveTo(1f,1f)
        lineTo(8f, 8f)
    }.build()

    val painter = rememberVectorPainter(image = vector)
    Canvas(modifier = Modifier.fillMaxSize()){
        with(painter){
            draw(painter.intrinsicSize)
        }
    }
}

额外说明 #

• 若要使用填充效果，需要将路径封闭，比如添加close()方法，或者绘制线条回到起点形成封闭图形，此时fill参数才会生效。
• Stroke的width单位基于你设置的viewport，这里viewportWidth为10f，所以1f的宽度会占视图的1/10比例。

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