Android矢量图Path内边距设置及路径高度调整、间距增大求助

Hey there! Let's tackle your two questions one by one:

在Android中，给Path设置内边距的方案分两种场景，我帮你整理好了实用的实现方式：

场景1：自定义View中绘制Path #

如果是在自定义View里用Canvas绘制Path，推荐这两种方法：

• 用Path裁剪实现等比例内边距：先创建原始路径，再生成一个缩小的区域路径，通过取交集得到带内边距的路径：

// 扩展函数：把dp转成px
fun Int.dpToPx(context: Context): Float = this * context.resources.displayMetrics.density

// 示例：创建一个全屏矩形的原始路径
val originalPath = Path()
originalPath.addRect(0f, 0f, width.toFloat(), height.toFloat(), Path.Direction.CW)

// 设置10dp的内边距
val padding = 10.dpToPx(context)
val paddedRect = RectF(padding, padding, width - padding, height - padding)
val paddedPath = Path()
paddedPath.addRect(paddedRect, Path.Direction.CW)

// 取交集，得到带内边距的最终路径
originalPath.op(paddedPath, Path.Op.INTERSECT)

// 绘制带内边距的路径
canvas.drawPath(originalPath, paint)

• 用Path.offset()实现平移内边距：如果只需要让路径整体向内平移，直接用offset()方法更简单（适合非等比例偏移的场景）：

val padding = 10.dpToPx(context)
originalPath.offset(padding, padding)

场景2：矢量图（VectorDrawable）中的Path #

如果是VectorDrawable里的<path>标签，你需要手动修改android:pathData中的坐标值：先根据矢量图的viewportWidth/viewportHeight，把需要的内边距dp值转换成viewport坐标系的数值，再逐个调整pathData里的x、y坐标，让所有点向内偏移对应距离。

我已经帮你调整好了矢量图代码，主要完成了两个修改：

1. 将第二个白色Path的高度减半：压缩了路径的垂直坐标范围
2. 增大两个Path的间距：把第二个Path整体向下平移（因为group的scaleY为-0.1，原始坐标系中降低Y值，实际显示时会更靠下，远离上方蓝色Path）

以下是修改后的完整代码：

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="625dp"
    android:height="936.25dp"
    android:layout_gravity="center"
    android:gravity="center"
    android:viewportWidth="500"
    android:viewportHeight="749">

    <group
        android:scaleX="0.1"
        android:scaleY="-0.1"
        android:translateY="749">

        <path
            android:fillColor="@color/back_blue"
            android:pathData="M439 7416C282 7361 169 7248 113 7090l-23 -65 0 -1751c0 -1693 1 -1753 19 -1806 35 -101 99 -185 184 -241 57 -38 90 -50 442 -162 132 -42 701 -224 1265 -405 564 -180 1084 -346 1155 -368 72 -22 362 -114 645 -206 558 -179 630 -196 749 -177 165 27 267 129 316 316 13 53 15 321 15 2410 0 2572 4 2397 -58 2523 -56 115 -184 223 -310 262 -63 20 -97 20 -2036 20l-1971 0 -66 -24z" />

        <path
            android:fillColor="@color/White"
            android:pathData="M498 1900C322 1870 207 1782 128 1614L95 1545 92 800C90 200 90 190 110 128 155 -16 255 -127 389 -193l76 -37 1998 -3 1997 -2 63 21c160 53 293 193 338 357 17 59 19 106 19 407 0 369 -4 404 -56 507 -55 109 -179 205 -304 237 -25 7 -54 16 -65 21 -11 5 -206 68 -433 140 -227 72 -677 214 -1000 316 -323 102 -623 197 -667 211 -44 14 -343 108 -665 210 -322 102 -691 218 -820 259 -240 76 -271 81 -372 64z" />

    </group>
</vector>

修改细节说明： #

• 高度减半：把第二个Path的顶部Y坐标从2820降到1900，中间节点2465改为1545、1476改为800，底部节点424改为128，整体压缩了垂直高度
• 增大间距：通过降低所有Y坐标值，让第二个Path在显示时向下移动，拉开和上方蓝色Path的距离

你可以根据实际视觉效果，微调坐标值达到最理想的状态~

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