一、首先我们来绘制一个三角形
Android 5.0系统中引入了 VectorDrawable 来支持矢量图(SVG),同时还引入了AnimatedVectorDrawable 来支持矢量图动画
VectorDrawable 并没有支持所有的 SVG 规范,目前只支持 PathData 和有限的 Group 功能。另外还有一个 clip-path 属性来支持后面绘图的区域。 所以对于使用 VectorDrawable 而言,我们只需要了解 SVG 的 PathData 规范即可(对应自定义控件中的绘图中的Path路径功能)。
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:viewportWidth="24"
android:viewportHeight="24"
android:width="24dp"
android:height="24dp">
<path
android:pathData="m0 24 l12 -24 l12 24 z"
android:fillColor="#000000" />
</vector>
效果图:
现在我们来分析以下这段代码
在根元素 vector 上有两个宽高设置,其中 viewport 是指矢量图里面的画布大小,而android:width 和 android:height 是指该矢量图所对应的 VectorDrawable 的大小。path 元素里面的 pathData 就是矢量图的路径数据。
我们在代码中所定义的画布大小,宽高均为24。就是相当于我们现在有一个画布她的大小如下所示的画布:
path表示我们绘制的路径,其中填充颜色给了黑色,pathdata中参数的定义:
M=moveto 命令 M or m ,移动到新的位置 (大写的命令为绝对坐标命令;小写的命令为相对坐标命令, 下同) ,
Z=closepath 命令 Z or z,封闭路径,从当前的位置画一条直线到该路径或者子路径起始位置
L=lineto 命令 L or l,从当前的位置画一条线到指定的位置
H=horizontal lineto 命令 H or h,水平画一条直线到指定位置
V=vertical lineto 命令 V or v,垂直画一条直线到指定位置
Q=quadratic Bézier curve 命令 Q or q ,贝塞尔曲线
T=smooth quadratic Bézier curveto 命令 T 光滑二次贝塞尔曲线
A=elliptical arc 命令 A 椭圆弧
注释:
以上所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。
代码中代表的含义为
m0 24 l12 -24 l12 24 z
因为都是小写,所以指的是相对路径。第一个点为(0,24),相对于(0,24),x+12,y-24,即(12,0).以此类推
总体表示画一条直线,从(0,24)开始,到达位置 (12,0),然后从那里开始到 (24,24),最后在 (0,24) 关闭路径。
路径效果图为:
二、思考:倒三角形
如果我们想得到一个倒三角形呢?
方法一:
VectorDrawable里面有一个GROUP,在这个节点中,我们可以对绘制出来的图形进行旋转
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">
<group
android:rotation="180"
android:pivotX="12"
android:pivotY="12">
<path
android:fillColor="#000000"
android:pathData="m0 24 l12 -24 l12 24 z" />
</group>
</vector>
代码中代表的含义为
m0 0 l12 24 l12 -24 z
相对于(12,12)这个点,其他三个点分别旋转180度
方法二:
像正的三角一样我们通过路径绘制
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportHeight="24"
android:viewportWidth="24">
<group
android:rotation="180"
android:pivotX="12"
android:pivotY="12">
<path
android:fillColor="#000000"
android:pathData="m0 24 l12 -24 l12 24 z" />
</group>
</vector>
代码中代表的含义为
m0 0 l12 24 l12 -24 z
第一个点为(0,0),相对于(0,0),x+12,y+24,即(12,24).以此类推
总体表示画一条直线,从(0,0)开始,到达位置 (12,24),然后从那里开始到 (24,0),最后在 (0,0) 关闭路径。
效果图:
在布局中使用:
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:background="@drawable/triangle"/>
此外,对于一些很复杂的图片,我们可以通过下面第三个链接的那种方式去创建
例如,我通过这种方式,创建了一个倒着的圆角三角形,自己写的话计算路径是十分麻烦的。
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="20dp"
android:height="20dp"
android:viewportHeight="200"
android:viewportWidth="200">
<path
android:fillColor="#000000"
android:pathData="M 85.00,67.00
C 85.00,67.00 138.00,67.00 138.00,67.00
144.54,67.09 149.84,69.23 148.76,77.00
148.11,81.71 143.03,87.22 140.12,91.00
140.12,91.00 116.40,121.00 116.40,121.00
113.05,125.19 109.37,130.90 104.00,132.43
95.23,134.93 90.12,129.22 85.21,123.00
85.21,123.00 56.03,86.00 56.03,86.00
51.32,79.93 47.66,72.62 56.03,67.74
61.77,66.33 78.15,67.00 85.00,67.00 Z" />
</vector>
效果图:
参考文档:哈哈哈感谢以下的各位大神
SVG 和 VECTORDRAWABLE 的基本知识:
https://www.colabug.com/1876039.html
https://blog.csdn.net/zl18603543572/article/details/78495574
Android 使用Vector XML文件创建矢量图片资源
https://blog.csdn.net/klxh2009/article/details/51121034
SVG教程(超级详细)注意,这里的svg规范,里面的很多东西android端的VectorDrawable 并不支持,只是拿来参考一下Pathdata这一段
https://segmentfault.com/a/1190000012071386