Jetpack Compose中如何不使用Stroke为填充图形应用PathEffect？

由于PathEffect仅支持应用在Stroke绘制样式上，无法直接作用于填充路径，要实现你需要的填充Gooey效果，可通过宽描边模拟填充的方式达成，具体方案如下：

• 将Stroke的宽度设置为目标填充圆形的直径（或填充区域的整体尺寸）
• 调整原始路径的位置，让描边的中心与原本填充圆形的中心对齐
• 把组合好的PathEffect应用到这个宽描边上，即可得到类似填充的变形效果

修改你的代码示例如下：

// 定义目标填充圆形的直径
val targetCircleSize = 100.dp.toPx()
// 描边宽度设为圆形直径，用描边覆盖填充区域
val strokeWidth = targetCircleSize

val discretePathEffect = DiscretePathEffect(pathMeasure.length / segmentCount, 0f)
val cornerPathEffect = PathEffect.cornerPathEffect(50f)

val chainPathEffect = PathEffect.chainPathEffect(
    outer = cornerPathEffect,
    inner = discretePathEffect.toComposePathEffect()
)

pathLeft.op(pathLeft, pathRight, PathOperation.Union)
pathMeasure.setPath(pathLeft, true)

drawPath(
    path = pathLeft,
    brush = brush,
    style = Stroke(
        width = strokeWidth,
        pathEffect = chainPathEffect,
        cap = StrokeCap.Round // 保证描边边缘圆润，贴合填充视觉效果
    )
)

核心原理 #

当描边宽度等于填充区域的直径时，宽描边会完全覆盖原本的填充范围，配合StrokeCap.Round设置，描边的视觉效果就和填充一致。此时PathEffect作用在宽描边上，变形动画就会呈现出你想要的填充式Gooey效果。

如果是基于多个圆形的联合路径做效果，需确保原始路径是对应填充圆中心的小路径（比如直径极小的圆），这样宽描边展开后才能精准对应目标填充位置。

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