Android vector path strokeLineJoin XML设置线条连接处形状

5次阅读

strokelinejoin 只对 描边生效,且需同时满足:有 android:strokewidth、路径含多段线段(如多个 l/c)、android ≥ 5.0(api 21);否则静默失效。

Android vector path strokeLineJoin XML设置线条连接处形状

strokeLineJoin 在 vector drawable 中不起作用?

直接说结论:strokeLineJoin 只对 <path></path> 的描边生效,且必须同时满足三个条件:有 android:strokeWidth、路径由多段线段组成(比如含多个 LC 指令)、目标 Android 版本 ≥ 21(Lollipop)。低于 API 21 时该属性被完全忽略,连 warning 都不会报。

常见错误现象是改了 android:strokeLineJoin="round",但拐角还是尖的——大概率因为没设 android:strokeWidth,或者路径其实是单条直线(比如只有 ML 各一次),压根没有“连接处”可处理。

支持的值只有 round、miter、bevel,别写 capitalize 或 inherit

strokeLineJoin 是严格枚举,只认三个字符串值,大小写敏感,不支持 CSS 那套继承或缩写。写错会静默失效(xml 解析器跳过该属性)。

  • android:strokeLineJoin="round":圆角连接,最常用,适合图标类矢量图
  • android:strokeLineJoin="miter":尖角延伸(默认值),但当两条线夹角太小(bevel 防止渲染溢出
  • android:strokeLineJoin="bevel":平切,用直线截断尖角,视觉更硬朗,适合工程类线条图

注意:miter 的实际表现还受 android:strokeMiterLimit 影响(默认值为 4),这个值越小,越早触发 fallback 到 bevel。如果想强制保持尖角,得同步调高 strokeMiterLimit(比如设为 10)。

API 21+ 才生效,低版本兼容要靠 pathData 拆分

Android 5.0 之前 vector drawable 本身就不支持 strokeLineJoin。如果你的 minSdkVersion ≤ 20,又必须保证拐角形状一致,唯一办法是把原路径手动拆成多段独立 <path></path>,每段只含一条线段,并用 android:fillColor 模拟连接效果(比如在拐点处加个小圆)。但这会显著增加 XML 复杂度和绘制开销。

实操建议:

  • 确认 build.gradle 中已启用 vector 兼容:vectorDrawables.useSupportLibrary = true
  • AppCompatActivity 中用 app:srcCompat 加载,而非 android:src
  • 真机测试务必覆盖 API 21 和 API 23+,有些厂商 ROM 对 miter limit 的计算逻辑略有差异

pathData 里带曲线时,strokeLineJoin 只影响线段与线段交点,不影响曲线自身

比如 pathData="M10,10 L50,10 C60,10 60,20 50,20 L10,20",这里有两个“连接处”:第一个是 LC 的交点(50,10),第二个是 CL 的交点(50,20)。而贝塞尔曲线内部的曲率变化,strokeLineJoin 完全不管。

容易踩的坑:

  • 误以为 round 能让整条路径边缘变圆——它只管“角”,不管“边”
  • 在含 Q(二次贝塞尔)的路径中混用 miter,结果因控制点位置导致连接处意外截断
  • strokeLineCap="round"strokeLineJoin="round" 一起时,端点和连接点的圆角半径都等于 strokeWidth / 2,但二者不叠加,只是各自独立渲染

复杂点在于:同一个 <path></path> 里,不同连接处可能因角度或长度差异,最终渲染出的视觉圆角并不一致——这是底层 Skia 渲染引擎决定的,没法用 XML 微调。

text=ZqhQzanResources