在Compose中如何绘制矢量图？

Question

我有以下代码：

@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)
        }
    }
}

我期望看到一条渐变线，但由于某些原因，屏幕上并未绘制出任何内容：

为什么会出现这种情况？我做错了什么？

mrry · Answer

尝试添加更多的线条。您使用的 fill 参数是用来用渐变填充图形的。由于终点设置为了无限远，所以渐变并没有生效。请设置 endX 参数，这样就可以看到蓝色了。

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), endX = 8f)) {
    moveTo(0f, 0f)
    lineTo(0f, 8f)
    lineTo(8f, 8f)
    lineTo(8f, 0f)
    lineTo(0f, 0f)
}.build()

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

如果想要绘制带有纯色边框的线段，你应该像下面这样使用 SolidColor：

path(stroke = SolidColor(Color.Black)) {
    moveTo(0f, 0f)
    lineTo(0f, 6f)
    lineTo(6f, 6f)
    lineTo(6f, 0f)
    lineTo(0f, 0f)
}

Pat Notz · Answer

尝试执行以下代码：

// 引入Compose库中的Canvas组件和布局填充功能
import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.fillMaxSize
// 引入Material Theme模块
import androidx.compose.material3.MaterialTheme
// 引入可组合函数与运行时相关模块
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
// 引入用于处理坐标点的类
import androidx.compose.ui.geometry.Offset
// 引入图形画刷与颜色类
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
// 引入预览功能模块
import androidx.compose.ui.tooling.preview.Preview
// 引入与密度无关像素(dp)相关的单位模块
import androidx.compose.ui.unit.dp

// 使用@Preview注解标记一个预览专用的可组合函数
@Preview
@Composable
fun PreviewScreen() {
    // 创建一个充满整个容器大小的Canvas
    Canvas(modifier = Modifier.fillMaxSize()) {
        // 定义一个从绿色到蓝色的水平渐变画刷
        val gradient = Brush.horizontalGradient(colors = listOf(Color.Green, Color.Blue))
        // 使用定义好的渐变画刷在Canvas上绘制一条线段，起点为(0f, 0f)，终点为当前Canvas尺寸的右下角
        drawLine(
            brush = gradient,
            start = Offset(x = 0f, y = 0f),
            end = Offset(x = size.width, y = size.height),
            strokeWidth = 5.dp.toPx(), // 线段宽度为5个设备独立像素
        )
    }
}