Jetpack Compose中如何在Canvas上绘制ImageVector

方案1：使用官方原生drawVector扩展（推荐） #

适用于Jetpack Compose UI 版本 >= 1.4.0的场景，官方已经在DrawScope中内置了drawVector扩展方法，直接传入ImageVector即可，支持自定义尺寸、透明度、颜色滤镜等参数。
需要先导入扩展：

import androidx.compose.ui.draw.drawVector

调用示例：

val logoVector: ImageVector = ImageVector.vectorResource(id = R.drawable.diasyst_logo)

Canvas(modifier = Modifier.fillMaxSize()) {
    drawVector(
        imageVector = logoVector,
        // 可选配置：自定义绘制尺寸，不填默认使用矢量资源本身的尺寸
        size = logoVector.defaultSize.times(1.5f),
        // 可选配置：调整透明度
        alpha = 0.9f
    )
}

方案2：低版本兼容实现 #

如果你的项目Compose版本低于1.4.0，可以自行封装绘制方法，核心是直接渲染ImageVector的根节点到当前画布：

// 自定义扩展方法
fun DrawScope.drawImageVector(
    imageVector: ImageVector,
    targetSize: Size = imageVector.defaultSize,
    alpha: Float = 1f
) {
    with(imageVector.root) {
        // 适配目标绘制尺寸的缩放比例
        scale(
            scaleX = targetSize.width / imageVector.defaultWidth,
            scaleY = targetSize.height / imageVector.defaultHeight
        )
        draw(alpha = alpha)
    }
}

// 调用示例
Canvas(modifier = Modifier.fillMaxSize()) {
    drawImageVector(
        imageVector = logoVector,
        targetSize = Size(240.dp.toPx(), 80.dp.toPx())
    )
}

注意事项 #

• 两种方案都支持传入colorFilter参数实现矢量资源的颜色染色效果
• 直接绘制ImageVector是实时矢量渲染，相比预转Bitmap的方案内存占用更低，多分辨率适配不会出现模糊问题

内容的提问来源于stack exchange，提问作者V.Rashkov