Android矢量图形-Vector
16lz
2021-01-24
1 概述
1.1 编写目的
学习Android矢量图形相关的知识点，记录下来，方便后续学习及查询。
2 Vector图形
2.1 图片生成Vector图形
右键->New->Vector Asset。
选择图形，设置大小就能生产Vector图形:
也可以从本地导入图片生成（VSG、PSD格式）:
2.2 制作Vector图形
Vector为矢量图形，共有四种属性，Vector、Clip-Path、Group、Path。其中Vector为一级属性，其余为子属性。
2.2.1 Clip-Path属性（剪切）
定义当前绘制的剪切路径，就是图像的一部分剪切下来。注意，clip-path 只对当前的 group 和子 group 有效。共用两个属性，Name（名字）、PathData(截图区域，具体后面介绍),如下图所示：
2.2.2 Group属性
Group有多个属性，分别是
Name：名字；
Rotation：旋转角度；
PivotX：旋转和缩放时的参考点X坐标；
PivotY：旋转和缩放时的参考点Y坐标；
ScaleX：X轴缩放比例；
ScaleY：Y轴缩放比例；
TranslateX：X轴位移；
TranslateY：Y轴位移。
Group里面可以定义多个path以及Group。
2.2.2.1 ScaleX、ScaleY、TranslateX 、TranslateY（比例和位移）
下图是在上图基础上调整缩放比例和位移的图形：
调整旋转角度、比例以及参考点，其中绿色小圆点和参考点坐标一样，方便更直观的观看。
2.2.2.2 PivotX 、PivotY 、Rotation（参考点和旋转）
下面两对比图，是相对于参考的旋转30度：
下面两对比图，是相对于参考的旋转30度：
下面两对比图，是相对于参考的X轴放大到1.5倍且旋转10度：
2.2.3 Path属性（画图）
Path共有以下属性：
Name：名字；PathData：矢量图语法（详情2.3）。
2.2.3.1 FillColor、FillAlpha、FillType（填充）
FillColor：填充路径的颜色；
FillAlpha：填充颜色透明度（0~1透明到不透明；1~255不透明到透明）；
FillType：填充模式，共两种；其中“nonzero”是非零环绕原则，也是默认值，“evenodd”为奇偶原则。Nonzero：在路径包围的区域中，随便找一点，向外发射一条射线，和所有围绕它的边相交，从0计数， 如果这个射线遇到顺时针围绕，那么+1， 如果遇到逆时针围绕，那么-1，如果最终值非0，则这块区域在路径内；Evenodd：在路径包围的区域中，随便找一点，向外发射一条射线，和所有围绕它的边相交，查看相交线的个数，如果为奇数，就填充，如果是偶数，就不填充。
FillColor、FillAlpha：
FillType （Nonzero）：
FillType （Evenodd）：
2.2.3.2 StrokeWidth、StrokeColor、StrokeAlpha（路径边框）
StrokeWidth：定义路径边框的线的宽度；
StrokeColor：定义路径边框的线的颜色；
StrokeAlpha：定义路径边框的线的颜色透明度；这三个属性从上面图形可以看出，透明度取值同填充颜色透明度。
2.2.3.3 TrimPathStart（截取）
TrimPathStart：从路径起始位置去除到指定的百分比，取值范围从 0 到1；
2.2.3.4 TrimPathEnd（截取）
TrimPathEnd：从路径结束位置去除到指定的百分比，取值范围从 0 到1；
2.2.3.5 TrimPathOffset（指定起始位置）
TrimPathOffset：指定起始位置为指定的百分比，取值范围从 0 到1；如下图所示，起点从0.5处开始：
2.2.3.6 StrokeLineCap（线的末端形状）
StrokeLineCap：设置线的末端形状["butt|round|square"],butt严格到指定的坐标就截至,round圆角的先端边缘,square方形的边缘不过有点向外延伸。
Butt：
Round：
Square：
2.2.3.7 StrokeLineJoin（线的连接处形状）
StrokeLineJoin：线的连接处形状["round|bevel|miter"],round是圆角的,bevel斜角，miter直。分别如下面图所示：
Round:
Bevel:
Miter：
2.2.3.8 StrokeMiterLimit（相交锐角）
StrokeMiterLimit：描边相交的锐角表现方式（>=1）
2.2.4 Vector属性（定义）
Vector包含九个属性。分别是：
Name：名字。
Width：宽度（图片的宽度）。
Height：高度（图片的高度）。
ViewportWidth：视图的宽度（PathData画布的宽度）。
ViewportHeight：视图的高度（PathData画布的高度）。
Tint：Vector着色。
TintMode：着色模式。
Alpha： 该图片的透明度。AutoMirrored：是否自动镜像该图片（暂未验证出来）。
2.2.4.1 Width、Height、ViewportWidth、ViewportHeight（图片大小和视图大小）
2.2.4.2 Tint、Alpha、（Vector着色以及透明）
使用Tint后会覆盖path的颜色属性，path的颜色属性无效。Alpha对tint和path的颜色属性都有效，如下图所示：
2.2.4.3 TintMode（着色模式）
TintMode（使用比较少，下面有不同模式显示状态，先画圆再画矩形框，设置蓝色矩形框的TintMode属性）。如下图所示：
2.3 PathData（矢量图语法）
PathData包含下面下面命令:
• M：move to 移动绘制点，作用相当于把画笔落在哪一点。
• L：line to 直线，就是一条直线，注意，只是直线，直线是没有宽度的，所以你什么也看不到（strokeColor、strokeWidth设置颜色和线宽）。
• H：从当前点绘制水平线，H20相当于Lx,y x+20,y
• V：从当前点绘制垂直线，V20相当于Lx,y x,y+20
• Z：close 闭合，嗯，就是把图封闭起来。
• C：cubic bezier 三次贝塞尔曲线
• Q：quatratic bezier 二次贝塞尔曲线
• A：ellipse 圆弧
• S：光滑的三次贝塞尔曲线
• T：光滑的二次贝塞尔曲线每个命令都有大小写形式，大写代表后面的参数是绝对坐标，小写表示相对坐标，相对于上一个点的位置。参数之间用空格或逗号隔开。
2.3.1 直线和多边形（M、L、H、V、Z）
2.3.2 二次贝塞尔曲线（Q）
二次贝塞尔曲线由两个点控制，分别为控制点、终点，图中绿色小点分别为这两个点以及起点，如下图所示：
2.3.3 光滑二次贝塞尔曲线（T）
光滑二次贝塞尔曲线，可以两个点、一个点、结合Q使用，一个点单独使用时就一条直线，如下图所示：
2.3.4 三次贝尔曲线
三次贝塞尔曲线由三个点控制，分别为控制点1、控制点2、终点，图中绿色小点分别为这三个点和起点，如下图所示：
2.3.5 光滑三次贝塞尔曲线（S）
光滑二次贝塞尔曲线，两个点、结合S使用，两个点单独使用时等于Q，如下图所示：
2.3.6 圆和弧（A）
A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y
rx ry 椭圆半径
x-axis-rotation x轴旋转角度
large-arc-flag 为0时表示取小弧度，1时取大弧度（要长的还是短的）
sweep-flag 0取逆时针方向，1取顺时针方向
x,y (dx,dy) 终点的位置。
各种变化对比，如下图所示：
更多相关文章
- 自定义View之圆角图片
- android 模拟器安装
- Android(安卓)vector标签 PathData 画图超详解
- Android之常见问题集锦
- 对android夜间模式实现的探讨
- android:stretchColumns=”0″
- Android-开发搭建
- 【Android(安卓)开发】：Android布局中的几种常用属性
- Android中对于Bitmap的处理