如何在Jetpack Compose Canvas中封装可复用的drawRing绘制函数

你想要的调用形式完全可以实现，核心是借助Kotlin的扩展函数特性，将drawRing定义为DrawScope的扩展函数即可。

Jetpack Compose的Canvas组件传入的lambda本身就属于DrawScope的接收者作用域，你将自定义绘制函数声明为DrawScope的扩展函数后，在Canvas代码块内调用时，天然就可以访问DrawScope下的size属性、drawArc方法等所有上下文能力，不需要额外手动传递上下文。

修改后的代码示例如下：

调用侧代码（和你预想的写法完全一致） #

Canvas(modifier = Modifier.fillMaxSize()) {
    drawRing(Color.Red, 360f, 200f)
    drawRing(Color.Blue, 180f, 400f) 
}

ComposeUtils.kt 封装代码 #

import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.drawscope.DrawScope
import androidx.compose.ui.graphics.drawscope.Stroke
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size

fun DrawScope.drawRing(
    color: Color,
    sweepAngle: Float,
    arcRadius: Float,
    // 以下为可选扩展参数，按需配置即可
    strokeWidth: Float = 10f,
    startAngle: Float = 0f
) {
    val canvasWidth = size.width
    val canvasHeight = size.height

    drawArc(
        color = color,
        startAngle = startAngle,
        sweepAngle = sweepAngle,
        useCenter = false,
        topLeft = Offset(
            (canvasWidth / 2) - (arcRadius / 2),
            canvasHeight / 2 - (arcRadius / 2)
        ),
        size = Size(arcRadius, arcRadius),
        style = Stroke(strokeWidth)
    )
}

如果后续需要支持渐变着色、圆角描边等效果，直接在扩展函数里增加对应参数即可，不需要修改调用侧的已有逻辑。

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