使用Vector Drawable创建自定义图形遇问题求助

嘿，我看了你的代码和效果描述，问题很清晰，主要是视口范围和路径坐标逻辑出了问题，咱们来一步步调整：

核心问题拆解 #

1. 坐标超出视口范围：你设置的viewportWidth="12"，但路径里写了15,1这个超出视口的坐标，这直接导致图形右侧被截断变形，因为Vector Drawable只会渲染视口内的内容。
2. 路径闭合逻辑错误：原路径的最后一段从弧形终点跳到15,1再连到12,0，这个衔接逻辑完全不符合预期的形状，导致轮廓扭曲。

修正后的完整代码 #

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="248dp"
    android:height="148dp"
    android:viewportWidth="12"
    android:viewportHeight="12">

    <path
        android:fillColor="#FFFFFF"
        android:pathData="M 0,0 
                          L 0,8 
                          C 1,12 5,12 8,12 
                          L 12,12 
                          L 12,0 
                          Z"
        android:strokeWidth="0.1"/>
</vector>

关键修改说明 #

• 移除超范围坐标：删掉了原路径里的C 10,12 12,11 15,1这段错误的曲线，换成从弧形终点8,12水平延伸到视口右下角12,12。
• 优化闭合逻辑：用Z指令代替重复的L 0,0，更简洁地闭合路径，确保图形是完整的闭合区域。
• 匹配预期形状：调整后的路径从左上角0,0垂直向下到0,8，然后用贝塞尔曲线绘制底部弧形到8,12，再水平到12,12，垂直向上到12,0，最后闭合回起点，完美匹配你描述的预期效果。

如果之后需要调整弧形的弧度，只需要修改贝塞尔曲线的控制点（1,12和5,12这两个值）就可以了～

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