如何创建带圆角的六边形Android Vector Drawable矢量图形

核心实现逻辑 #

• 原有直角六边形的6个顶点都是两条边的尖角交汇点，实现圆角的本质是把每个尖角替换为平滑的过渡曲线：在每个顶点相邻的两条边上各取一个距离顶点等距的点，用贝塞尔曲线/圆弧衔接这两个点，替代原来的尖角结构即可。
• 圆角的大小由你截取的点到原顶点的距离决定，距离越大圆角越大，反之越小。
• Android Vector Drawable的pathData中可以用C（三次贝塞尔曲线）、Q（二次贝塞尔曲线）或者A（圆弧指令）实现过渡效果，新手推荐直接用设计工具生成路径，避免手动计算坐标出错。

已适配圆角的实现代码 #

下面是适配了中等大小圆角的六边形实现，效果和参考图一致：

<path android:name="hexagon"
    android:fillColor="#aa0000"
    android:strokeColor="#000000"
    android:strokeWidth="4"
    android:pathData="
    M 701,314 
    C 686,339.9 671,365.8 656,391.7 
    L 641,417.6 
    C 633.5,430.6 620,438 606.5,438 
    L 255.5,438 
    C 242,438 228.5,430.6 221,417.6 
    L 206,391.7 
    C 191,365.8 176,339.9 161,314 
    C 176,288.1 191,262.2 206,236.3 
    L 221,210.4 
    C 228.5,197.4 242,190 255.5,190 
    L 606.5,190 
    C 620,190 633.5,197.4 641,210.4 
    L 656,236.3 
    C 671,262.2 686,288.1 701,314 
    Z" />

圆角大小调整方法 #

如果需要调整圆角的大小，可以修改每个顶点处贝塞尔曲线的控制点坐标：

• 要放大圆角：增大路径中C指令的控制点偏离原顶点的距离
• 要缩小圆角：减小路径中C指令的控制点偏离原顶点的距离
• 如果你需要自定义尺寸的圆角六边形，也可以直接在Figma、Inkscape等矢量设计工具中绘制好带圆角的六边形，直接导出pathData复制到代码中即可，无需手动计算坐标。

内容的提问来源于stack exchange，提问作者Roman Bártl