Android矢量图路径数据详解与绘图实践
矢量图形基础与<vector>标签结构
在Android中,<vector>标签用于定义可缩放的矢量图像资源,其本质是基于SVG(Scalable Vector Graphics)标准的XML描述。该格式支持高分辨率适配且文件体积小,特别适合图标和UI元素。
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="#FF000000"
android:pathData="M22,16V4c0,-1.1 -0.9,-2 -2,-2H8c-1.1,0 -2,0.9 -2,2v12c0,1.1 0.9,2 2,2h12c1.1,0 2,-0.9 2,-2z" />
</vector>
路径命令语法解析
路径数据由一系列指令组成,每个指令以字母开头,后接坐标参数。大小写决定坐标类型:
- 大写字母:绝对坐标(相对于画布原点)
- 小写字母:相对坐标(相对于上一个位置)
基本路径指令
M x y:移动画笔至坐标点 (x, y),作为后续绘制的起点。L x y:从当前位置直线绘制到 (x, y)。H x:水平移动至指定横坐标。V y:垂直移动至指定纵坐标。Z:闭合路径,连接起始点与终点。
贝塞尔曲线
C x1 y1 x2 y2 x y:三次贝塞尔曲线,通过两个控制点定义弯曲形状。Q x1 y1 x y:二次贝塞尔曲线,仅需一个控制点。
对比说明:三次贝塞尔提供更精细的控制能力,而二次则更简洁。实际应用中可根据复杂度选择。
椭圆弧线命令 A
A rx ry x-axis-rotation large-arc-flag sweep-flag x y
- rx, ry:椭圆在X轴和Y轴上的半径。
- x-axis-rotation:椭圆主轴相对于水平方向的旋转角度。
- large-arc-flag:
- 0:取较短弧段
- 1:取较长弧段
- sweep-flag:
- 0:逆时针绘制
- 1:顺时针绘制
属性详解与高级用法
<path>标签支持多种样式控制属性:
android:fillColor:填充颜色,若未设置则无填充。android:strokeColor:描边颜色。android:strokeWidth:描边粗细。android:trimPathStart、android:trimPathEnd:截取路径起始与结束部分的比例(0~1)。android:trimPathOffset:偏移截取区域,实现动画效果。android:strokeLineCap:线帽样式,可选butt(平头)、round(圆头)、square(方头)。android:strokeLineJoin:线段连接方式,可选miter(尖角)、round(圆角)、bevel(斜切)。android:strokeMiterLimit:限制斜角长度,防止过长。
剪裁与分组管理
通过<group>可对多个<path>进行统一变换:
android:rotation:旋转角度。android:pivotX、android:pivotY:旋转/缩放参考点。android:scaleX、android:scaleY:缩放比例。android:translateX、android:translateY:位移偏移。
<clip-path>用于定义剪切区域,仅影响当前组及其子元素:
<clip-path android:pathData="M200,200 h200 v150 h-200 v-150" />
该设置将使图形只显示在指定矩形区域内。
视图配置与布局适配
<vector>根标签中的关键属性:
android:width、android:height:定义资源的固有尺寸(通常使用dp)。android:viewportWidth、android:viewportHeight:虚拟画布尺寸,所有路径坐标基于此单位。android:tint:动态着色,可用于主题切换或状态变化。android:autoMirrored:在RTL语言环境下自动镜像图像。android:alpha:整体透明度设置。
通过合理组合这些特性,开发者可以构建出高度可定制、响应式且高性能的矢量图标系统。