Android vector标签 PathData 画图超详解

<p>SVG是一种矢量图格式,是Scalable Vector Graphics三个单词的首字母缩写。在xml文件中的标签是&lt;vector&gt;,画出的图形可以像一般的图片资源使用,例子如下:</p><pre class="brush:xml;toolbar:false">&lt;vectorxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:width=&quot;24dp&quot; android:height=&quot;24dp&quot; android:viewportHeight=&quot;24.0&quot; android:viewportWidth=&quot;24.0&quot;&gt; &lt;path android:fillColor=&quot;#FF000000&quot; android:pathData=&quot;M22,16V4c0,-1.1-0.9,-2-2,-2H8c-1.1,0-2,0.9-2,2v12c0,1.10.9,22,2h12c1.1,02,-0.92,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.10.9,22,2h14v-2H4V6H2z&quot;/&gt; &lt;/vector&gt;</pre><p>其所画出的图形为   <img src="/up_pic/201812/191030515200.png" title="191030515200.png" alt="1.png"/></p><p>于此同时,android studio提供了丰富的图片资源,可以右键module,new-&gt;vector asset选择,如下:</p><p><img src="/up_pic/201812/191030556359.png" title="191030556359.png" alt="2.png"/></p><p>是不是很羡慕这些酷酷的图形,当然自己也可以去动手去做。显而易见,上面例子的重点是在PathData里面的那一大窜数字:</p><p>android:pathData=&quot;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,-2zm-11,-4l2.03,2.71L16,11l4,5H8l3,-4zM2,6v14c0,1.1 0.9,2 2,2h14v-2H4V6H2z&quot; /&gt;</p><p></p><p>xml文件中:</p><p><img src="/up_pic/201812/191031063232.png" title="191031063232.png" alt="3.png"/></p><p>共有三个标签,下面就是&lt;path&gt;部分:</p><p>先慢慢学习一些基本的语法:</p><p>M:move to 移动绘制点,作用相当于把画笔落在哪一点。</p><p>L:line to 直线,就是一条直线,注意,只是直线,直线是没有宽度的,所以你什么也看不到。</p><p>android:strokeColor=&quot;#333330&quot; android:strokeWidth=&quot;10&quot; 设置颜色和线宽</p><p>Z:close 闭合,嗯,就是把图封闭起来。</p><p>C:cubic bezier 三次贝塞尔曲线</p><p>Q:quatratic bezier 二次贝塞尔曲线</p><p>A:ellipse 圆弧</p><p>每个命令都有大小写形式,大写代表后面的参数是绝对坐标,小写表示相对坐标,相对于上一个点的位置。参数之间用空格或逗号隔开。</p><p>命令详解:</p><p>M (x y) 把画笔移动到x,y,要准备在这个地方画图了。</p><p>L (x y) 直线连到x,y,还有简化命令H(x) 水平连接、V(y)垂直连接。</p><p>Z,没有参数,连接起点和终点</p><p>C(x1 y1 x2 y2 x y),控制点(x1,y1)( x2,y2),终点x,y 。</p><p>Q(x1 y1 x y),控制点(x1,y1),终点x,y</p><p>C和Q会在下文做简单对比。</p><p>A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)</p><p>android:pathData=&quot; M50,50 a10,10 1,1 0 1,0&quot; /&gt;</p><p>rx ry 椭圆半径</p><p>x-axis-rotation x轴旋转角度</p><p>large-arc-flag 为0时表示取小弧度,1时取大弧度 (舍取的时候,是要长的还是短的)</p><p>sweep-flag 0取逆时针方向,1取顺时针方向</p><p></p><p>L的用法:</p><p>android:pathData=&quot; M10,0 L10,40 40,40&quot; /&gt;</p><p>把画笔放在(10,0)位置,连线10,40点 在连线40,40点。。。于是,一个直角三角形出来了~这里没有写z,没什么关系。</p><p> <img src="/up_pic/201812/191032062659.png" title="191032062659.png" alt="1.png"/></p><p>Q和C的对比: 详细了解贝塞尔曲线:</p><p>http://www.cnblogs.com/jay-dong/archive/2012/09/26/2704188.html</p><p>Q</p><p>android:pathData=&quot;M0,0 q30,90 80,20&quot;/&gt;   </p><p><img src="/up_pic/201812/191032145914.png" title="191032145914.png" alt="2.png"/></p><p> </p><p>控制点1,30,90 :</p><p>控制点2,80,20 :</p><p>C</p><p>android:pathData=&quot; M0,0 c0,0 30,90 80,20&quot; /&gt;</p><p>C 第一控制点(0,0) 第二控制点(30,90) 结束点(80,20) 或 c 第一控制点 第二控制点 结束点</p><p><img src="/up_pic/201812/191032228367.png" title="191032228367.png" alt="3.png"/></p><p>现在修改第一个控制点:</p><p>android:pathData=&quot; M0,0 c50,0 30,90 80,20&quot; /&gt;</p><p><img src="http://www.outobe.com/up_pic/201812/191032349472.png" title="191032349472.png" alt="4.png"/></p><p>a:</p><p>这么多 数字,怎么看啊,可以直接拉到下面看作用。</p><p>android:pathData=&quot; M50,50 a10,5 0,1 0 1,0&quot; /&gt;</p><p>以50,50为起点,逆时针画</p><p>椭圆图形,x轴半径10,y轴半径5</p><p></p><p><img src="/up_pic/201812/191034007751.png" title="191034007751.png" alt="1.png"/></p><p>转动x轴~~~</p><p>android:pathData=&quot; M50,50 a10,5 90,1 0 1,0&quot; /&gt;</p><p><img src="/up_pic/201812/191034045172.png" title="191034045172.png" alt="2.png"/></p><p>我想要椭圆上半段,此处修改为x轴半径的两倍</p><p>android:pathData=&quot; M50,50 a10,5 90,1 0 20,0&quot; /&gt;</p><p>椭圆左半段</p><p>android:pathData=&quot; M50,50 a10,5 90 1 0 0 10&quot; /&gt;</p><p>椭圆右半段</p><p>android:pathData=&quot; M50,50 a10,5 90 1 1 0 10&quot; /&gt;</p><pre class="brush:xml;toolbar:false">&lt;path android:fillColor=&quot;#fff70000&quot;下 android:pathData=&quot;M50,50a10,501010&quot;/&gt; &lt;path android:fillColor=&quot;#FFF22420&quot;上 android:pathData=&quot;M50,50a10,501110&quot;/&gt; &lt;path android:fillColor=&quot;#fff57000&quot;右 android:pathData=&quot;M50,50a10,501111&quot;/&gt; &lt;path android:fillColor=&quot;#FF323243&quot;左 android:pathData=&quot;M50,50a10,501001&quot;/&gt;</pre><p><img src="/up_pic/201812/191034495843.png" title="191034495843.png" alt="1.png"/></p><p>出现上面的情况可以想到是因为,起始点50,50在椭圆中的位置不同。那么,再修改一下。</p><p> android:pathData=&quot; M50,50 a10,5 0 1 1 0 7&quot; /&gt; 修改了右边椭圆的代码</p><p><img src="/up_pic/201812/191034585049.png" title="191034585049.png" alt="2.png"/> 现在取的是大弧度,所以看到这样的效果,如果 7改为10(也就是y轴半径的两倍)这刚好会在 一半的位置。</p><p>现在取小弧度看看,</p><p>android:pathData=&quot; M50,50 a10,5 0 0 1 0 7&quot; /&gt; ,可以看到小弧度 顺时针画图。</p><p><img src="/up_pic/201812/191035074694.png" title="191035074694.png" alt="3.png"/></p><p>再修改为逆时针,</p><p>android:pathData=&quot; M50,50 a10,5 0 0 0 0 7&quot; /&gt;</p><p><img src="/up_pic/201812/191035143297.png" title="191035143297.png" alt="4.png"/></p><p>椭圆的属性 差不多讲解完成了,如下</p><p>android:pathData=&quot; M50,50 a10,5 0 0 0 0 7&quot; /&gt;</p><p>10,5 为椭圆x,y轴半径</p><p>第一个0 为 x轴旋转角度</p><p>第二个0 为取大小弧度,0为小,1为大</p><p>第三个0 为顺逆时针,0为逆1为顺</p><p>第四个0 为修改修改起始点在椭圆中的位置,y轴.</p><p>第四个 7 为修改修改起始点在椭圆中的位置,x轴。</p><p>这是前辈留下的图:</p><p><img src="/up_pic/201812/191035372211.png" title="191035372211.png" alt="1.png"/></p><p>&lt;path&gt;里面还有哪些属性那?</p><p><img src="/up_pic/201812/191036235509.png" title="191036235509.png" alt="1.png"/></p><p>android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径</p><p>android:pathData 和 SVG 中 d 元素一样的路径信息。</p><p>android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径</p><p>android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框</p><p>android:strokeWidth 定义路径边框的粗细尺寸</p><p>android:strokeAlpha 定义路径边框的透明度</p><p>android:fillAlpha 定义填充路径颜色的透明度</p><p>android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 0 到1</p><p>android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 0 到1</p><p>android:trimPathOffset 设置路径截取的范围 Shift trim region (allows showed region to include the start and end), in the range from 0 to 1.</p><p>android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.</p><p>android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.</p><p>android:strokeMiterLimit 设置斜角的上限,Sets the Miter limit for a stroked path.</p><p>下面详细讲一下 android:strokeLineCap ,android:strokeLineJoin 两个属性</p><p>android:pathData=&quot;M200,200 l100,300 </p><p>       M300,200 l-100,300</p><p>再没有添加这两条属性前:</p><p><img src="/up_pic/201812/191036435564.png" title="191036435564.png" alt="1.png"/><br/></p><p>添加语句:android:strokeLineCap=&quot;round&quot; 后可以看到有三个点改变了格式(左下角是图形结束点,并没有改变)</p><p><img src="/up_pic/201812/191036482233.png" title="191036482233.png" alt="2.png"/></p><p>最后添加:android:strokeLineJoin=&quot;round&quot; 左下角也做了改变,如下</p><p><img src="/up_pic/201812/191036595232.png" title="191036595232.png" alt="3.png"/></p><p>这xml开始部分的代码是做什么的那?</p><pre class="brush:xml;toolbar:false">&lt;vectorxmlns:android=&quot;http://schemas.android.com/apk/res/android&quot; android:width=&quot;24dp&quot; android:height=&quot;24dp&quot; android:viewportHeight=&quot;24.0&quot; android:viewportWidth=&quot;24.0&quot;&gt;</pre><p>先看看有哪些属性,</p><p><img src="/up_pic/201812/191037192929.png" title="191037192929.png" alt="4.png"/></p><p>android:name 定义该drawable的名字</p><p>android:width 定义该 drawable 的内部(intrinsic)宽度,支持所有 Android 系统支持的尺寸,通常使用 dp</p><p>android:height 定义该 drawable 的内部(intrinsic)高度,支持所有 Android 系统支持的尺寸,通常使用 dp</p><p>android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布</p><p>android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布</p><p>android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的</p><p>android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in</p><p>android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片。比如 阿拉伯语。</p><p>android:alpha 该图片的透明度属性</p><p>&lt;group&gt;里面可以定义多了&lt;path&gt;,这样可以方便管理多个&lt;path&gt;</p><p><img src="/up_pic/201812/191037297912.png" title="191037297912.png" alt="5.png"/></p><p>android:name 定义 group 的名字</p><p>android:rotation 定义该 group 的路径旋转多少度,这样图片就被旋转了,注意写数字的时候别晕了。</p><p>android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。</p><p>android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。</p><p>android:scaleX 定义 X 轴的缩放倍数</p><p>android:scaleY 定义 Y 轴的缩放倍数</p><p>android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。</p><p>android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。</p><p>&lt;clip-path&gt;定义当前绘制的剪切路径,就是图像的一部分剪切下来。注意,clip-path 只对当前的 group 和子 group 有效。</p><p><img src="/up_pic/201812/191037459560.png" title="191037459560.png" alt="6.png"/></p><p>&lt;clip-path android:pathData=&quot;M200,200 h200 v150 h-200 v-150&quot; /&gt;</p><p>原图为上面的 叉 ,剪切后为:</p><p><img src="/up_pic/201812/191037506625.png" title="191037506625.png" alt="7.png"/></p>
RangeTime:0.007233s
RangeMem:215.56 KB
返回顶部 留言