Jetpack Compose混合模式失效：折线图圆点无法显示纯色

你的核心问题是图层绘制顺序错误：线条绘制在圆形数据点的上方，导致线条的交叉部分覆盖在点上，调整混合模式无法解决——混合模式是处理图层叠加的颜色运算，不能改变图层层级关系。

解决步骤 #

1. 调整绘制顺序：先绘制折线，再绘制圆形数据点。这样圆形点会处于折线的上层，自然盖住线条的交叉区域，不需要依赖混合模式就能实现纯色圆点效果。
2. 移除不必要的混合模式：如果之前为尝试解决问题添加了Blend Mode设置，直接去掉即可，避免额外的渲染干扰。

代码示例修正（以SVG实现为例） #

错误顺序（线条在点之后，覆盖点）：

<circle cx="50" cy="50" r="6" fill="#ffffff" />
<polyline points="0 100, 50 50, 100 80" stroke="#333333" stroke-width="2" fill="none" />

修正后顺序（先画线条，再画点）：

<polyline points="0 100, 50 50, 100 80" stroke="#333333" stroke-width="2" fill="none" />
<circle cx="50" cy="50" r="6" fill="#ffffff" />

其他排查点 #

• 若使用Canvas实现，确保先执行stroke()绘制折线，再执行fill()绘制圆形；
• 检查圆形点的fill属性是否设置为纯实色，无半透明或渐变；
• 确认圆形点的半径足够大，能完全覆盖线条的宽度。

内容的提问来源于stack exchange，提问作者Sevban Bayır