关于材料设计vector矢量图形

时间:2022-11-07 22:52:10

关于材料设计vector矢量图形

vector简介

首先看一下官方文档
VectorDrawable
  extends Drawable
  
 java.lang.Object
  ↳ android.graphics.drawable.Drawable
   ↳ android.graphics.drawable.VectorDrawable

   
显然vector是一个drawable,所以他可以像图片一样用,至于里面要怎么写呢?
<vector>:定义一个Vector Drawable。
android:name定义这个VectorDrawable的名字;
android:width定义本质的几何宽度,尺寸标准随意,一般为dp;
android:height定义本质的几何高度,尺寸标准随意,一般为dp;
android:viewportWidth定义viewport宽度,viewport是将path绘制在上面的一个虚拟画布;
android:viewportHeight定义viewport高度,同上;
android:tint定义Drawable的着色,默认没有色彩;
android:tintMode定义着色模式,默认是src_in;
android:autoMirrored定义图片是否需要镜像反转,当布局方向是RTL,即从右到左布局时才有用;
android:alpha设置图片的透明度;
<group>:定义一个Path组或者子组。
android:name定义组的名字;
android:rotation定义组的旋转角度;
android:pivotX定义缩放或者旋转中轴点x坐标,是虚拟画布中的坐标;
android:pivotY同上,定义y坐标;
android:scaleX定义缩放x维;
android:scaleY定义缩放y维;
android:translateX定义x缩放,是虚拟画布中的坐标;
android:translateY定义y缩放,是虚拟画布中的坐标;
<path>:定义一个被绘制的Path。
android:name定义path的名字;
android:pathData定义路径采用了SVG文件里d标签中的path值,这些值绘制在虚拟画布上;
android:fillColor定义路径填充颜色;
android:strokeColor定义path的外轮廓颜色;
android:strokeWidth路径的宽度;
android:strokeAlpha一个路径的透明度;
android:fillAlpha全路径透明度;
android:trimPathStart开始路径的百分比,0-1;
android:trimPathEnd结束路径的百分比,0-1;
android:trimPathOffset转换区域0-1;
android:strokeLineCap设置线的顶路径,圆还是方等;
android:strokeLineJoin设置线连接处路径方式;
android:strokeMiterLimit设置线的修饰;
<clip-path>:定义路径裁剪,只适用于当前组或者子项。
android:name定义裁剪路径的名字;
android:pathData定义路径采用了SVG文件里d标签中的path值;

以上翻译部分内容是我抄的。。。这里包含了所有的标签,有的翻译也不是很形象,后面我们再一起做一做,画一画,在画的过程中体会体会。。。

just try it

我们先试着画个放大镜,一个圆圈+一条直线
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
 android:height="24dp" //图像高度
 android:width="150dp"//图像宽度
 android:viewportHeight="24"//视野高度
 android:viewportWidth="150"//视野宽度
 >
 <group
  android:name="Group"//图像分组(这里这个标签去掉也没问题)
  >
   <path
    android:name="search"//路径名字
    android:strokeColor="@color/colorPrimary"//描边颜色
    android:strokeWidth="2"//描边宽度
    android:pathData="M141,17 A9,9 0 1,1 142,16 L149,23"/>//路径信息
 </group>
</vector>

看一下效果图:
关于材料设计vector矢量图形

命令

其他都好理解,感觉就是pathData这个标签有点高大上,高深莫测的赶脚,其实也还好啦,简单说一下大家就都懂了(总感觉越扩展越多。。。)
常用命令:

命令 名称 参数
M move to移动 x,y 画笔移动到x,y(这时候没开始画呢)
L line to直线 x,y 从上个位置画直线到这个位置
Z close闭合 没有参数,直接连接起点和终点
C cubic bezier三次贝塞尔曲线 x1,y1,x2,y2,x,y 控制点x1,y1 和x2,y2,加上一个终点x,y
Q quatratic bezier二次贝塞尔曲线 控制点x1,y1加上一个终点x,y
A elipse圆弧 rx,ry,x-axis-rotation,large-arc-flag,sweep-flag,x,y

对命令的具体理解

我解释一下这些命令,里面有几个比较抽象,挨个来吧
M就是抬起画笔移动到这个位置,这个比较好理解
L从上一个画笔结束或停留的位置开始画直线到x,y这个点
z闭合,也好理解
接下来重头戏来了,这三个家伙
A,圆弧,里面包含正圆,椭圆,尤其椭圆跟高中学的完全不一样,椭圆不再是由两个焦点啥啥的确定的了,而是由椭圆的x方向半径加上y方向半径来确定的一个椭圆,然后根据旋转角度,方向,和经过的两个点来确定其中的某一段圆弧,这么说还是有点抽象,再来个图:
关于材料设计vector矢量图形
(不要纠结图的长相问题)如果rx=ry的时候,那这个椭圆就变成了圆,然后截取椭圆上的弧的时候需要用到两个点,这就是起始点和x,y,这里还有个图
关于材料设计vector矢量图形
总的来说,x-axis-rotation=1就取大的那部分弧,=0就取小的
     sweep-flag =1就取顺时针,=0就取逆时针
分析一下我们上边的例子:
M141,17 A9,9 0 1,1 142,16 这是个差一点点就完整的一个圆,141,17就是起始点,142,16就是终点,半径都是9说明是个正圆,其次正圆旋转多少度都是正圆,所以第三个参数写0和写别的没啥实质区别,然后这两个1说明取的是大圆,而且还是顺时针的,这回明白了吧。
椭圆讲完了,还有俩更让人头疼的,二次贝塞尔和三次贝塞尔
二次贝塞尔就好比高中时候我们学过的多元二次方程,三次贝塞尔就好比我们学过的多元三次方程,为什么这么说,看一下图形是怎么画出来的就明白了(小猴子数学课堂要开课啦。。)
二次贝塞尔:
关于材料设计vector矢量图形
关于材料设计vector矢量图形
图里的p0为起始点,p1为控制点,p2为终点
三次贝塞尔:
关于材料设计vector矢量图形
关于材料设计vector矢量图形
图里的p0为起始点,p1为控制点1,p2为控制点2,p3为终点(艾玛,真希望这辈子用不上这个。。。。)

补充

差点忘了一件非常重要的事,就是path里面的命令是区分大小写的,大写的时候是在绝对坐标系里,相对世界来的,小写的时候是相对于自身的,确切的说是相对于上个结束坐标点的。可能有些拗口,但却很重要。。

结束语:

这篇博客写到这里基本就结束了,主要介绍了一下安卓vector矢量图形的绘制,里面需要写的一些标签和他们的含义,主要是path路径的描述方法,也简单介绍了一下贝塞尔(让人悲伤、心塞的)曲线,小弟的第一篇博客,如有写的不好的地方请大家多多包涵,如有错误内容请大神们不吝指教。