Android 矢量图详解

╰半夏微凉° 2022-01-19 01:33 236阅读 0赞

[官方文档][Link 1]

关于 Vector，在官方开发指南中介绍。本文章是由个人翻译官方指南然后添加个人理解完成。

> 由于个人精力有限，多个渠道发布，排版上可能会有问题，如果影响查看，请移步 **Android 开发者家园**

#### Vector Drawables 概述 ####

VectorDrawable 和 AnimatedVectorDrawable 是在 Android 5.0 系统中第一次加入，当然我们可以使用 Android 的支持库，来支持旧的版本，通过 VectorDrawableCompat 和 AnimateVectorDrawableCompat 来实现。

VectorDrawble 是在 `xml` 文件中定义的矢量图形。`xml` 文件中定义的矢量图形，它是一组带有颜色信息的点、线和曲线，使用矢量图主要的优点是图形可伸缩性。可以在不损失显示质量的情况下进行缩放，这意味着我们可以在不同的屏幕密度的手机上使用相同的文件。这样会使 APK 文件变小更加有利于开发人员维护。我们还可以通过多个 XML 文件和矢量图结合用于动画。

既然说起 VectorDrawable 了，那就不得不提 SVG （Scalable Vector Graphic）了，这两个经常混淆，其实 SVG 就是一种基于可扩展语言（xml），用于描述二维矢量图形的一种图形格式（和我们常见的 .png 等等图片一样，都是一种图片格式），它有自己的一套编写规范（使用 XML 编写的），所以这种图片是根据他自己的一套规范通过 XML 语言编写而成的图片。而我们的 VectorDrawable 是编程中的，它仅支持 SVG 规范中有限的内容。Android Studio 支持将 SVG 文件转换成 VectorDrawable 。这就是他们两者的关系。

**path 中的常用的简单绘制命令**

*  moveto 命令 M 移动到新的位置
 *  closepath 命令 Z 封闭路径，从当前的位置画一条直线到该路径或者子路径起始位置
 *  lineto 命令 L ，从当前的位置画一条线到指定的位置
 *  horizontal lineto 命令 H 水平画一条直线到指定位置
 *  vertical lineto 命令 V 垂直画一条直线到指定位置
 *  贝塞尔曲线 命令 Q
 *  光滑二次贝塞尔曲线 命令 T
 *  elliptical arc 命令 A 椭圆弧

每个命令都有大小写的形式，大写代表后面的参数是绝对坐标，小写表示相对坐标（我们一般用大写就可以了），参数之间用空格或者逗号隔开。所谓的相对坐标是相对于前面一个点的，比如：M30,0 l 10,10 换算成绝对坐标就是 M30,0 L40,10

**命令使用实例**

*  M(x y) 移动到坐标 x，y 处
 *  Z 后面不接参数，直接连接起点和终点
 *  L（x y）直线连接到坐标 x，y 处
 *  H（x） 水平连接
 *  V（y） 垂直连接
 *  C（x1 y1 x2 y2 x y）控制点 x1，y1 x2，y2 终点坐标 x，y
 *  Q（x1 y1 x y）控制带点 x1，y1 终点坐标 x ，y；
 *  A（rx，ry，x-axis-rotation，large-arc-flag，sweep-flag，x，y）；
    
     *  rx,ry 椭圆半径
     *  x-axis-rotation x 轴旋转角度
     *  large-arc-flag 为 0 的时候表示取小弧度，1 的时候取大弧度
     *  sweep-flag 0 取逆时针方向，1 取顺时针方向
     *  (x,y) 是终点的坐标

#### VectorDrawable 如何定义 ####

VectorDrawable 在 drawable 文件夹中通过 来定义，这里先来详细的介绍一下 vector 中的各个属性（和网上的许多不一样，网上的大多都没有自己验证过）

<vector
            android：name（用于定义这个 vector drawable 的名字）、
            android：width（定义该 drawble 的内部宽度，支持所有的 Android 系统支持的尺寸单位，通常使用 dp）
            android：height（定义该 drawble 的内部高度，支持所有的 Android 系统支持的尺寸单位，通常使用 dp）
            android：viewportWidth(定义矢量图视图的宽度，实际上就是对应 path 路径所使用的数据)
            android：viewportHeight(定义矢量图视图的高度，实际上就是对应 path 路径所使用的数据)
            android：tint（定义该 drawble 线条的颜色，定义了后，你再在路径里面设置颜色就没有作用了）
            android：tintMode（定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in，暂时不用理会）
            android：autoMirrored 设置当系统为 RTL （right-to-left）布局的时候，是否自动镜像该图片。
            android：alpha 该图片的透明属性
            >
        <grup
              // 有时候我们需要对几个路径一起处理，这样就可以使用 group 元素来把多个 path 放到一起，group 支持的属性有
              android：name 定义 group 的名字
              android：rotation 定义该 group 的路径旋转多少度（顺时针旋转）
              android：pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
              android：pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
              android：scaleX 定义 X 轴的缩放倍数
              android：scaleY 定义 Y 轴的缩放倍数
              android：translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的
              android：translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的>
        	  <path 
                    // path 元素里面的 pathData 就是矢量图的路径数据，除此之外还可以设置其他的属性。path 的属性有：
                    android：name 定义该 path 的名字，这样在其他地方可以通过名字来引用这个路径
                    android：pathData 和 SVG 中 d 元素一样的路径信息
                    android：fillColor 定义填充路径的颜色，如果没有定义则不填充路径
                    android：strokeWidth 定义路径边框的粗细尺寸
                    android：strokeAlpha 定义路径边框的透明度
                    android：fillAlpha 定义填充路径颜色的透明度
                    android：trimPathStart 从路径起始位置(path 的 M 位置)截取后剩下的内容，取值范围从 0 到 1，比如，取值是 0.3 则截取后的内容就是 原长度 - （原长度*0.3） 
                    android：trimPathEnd 从路径起始位置位置截取的内容，取值范围从 0 到 1，比如，取值是 0.3，则截取后的内容就是 原长度*0.3  
                   	需要注意的是如果 trimPathStart 和 strimPathEnd 一块使用的话，这里有个规律如果 trimPathEnd 取值大于等于 trimPathStart 的时候结果就是他们两者分别截取后内容的交集，如果 trimPathEnd 小于 trimPathStart 的时候，取值就是他们俩的合集（这是经过我无数的实验得出的规律，你也可以尝试一下）
                    android：trimPathOffset 其实就是设置开始点的偏移位置（取值 从 0 到 1）1 的话就是开始点和结束的互换了，注意这个路径是可以循环的（下面画图说明）
                    android：strokeLineCap 设置路径的线头的形状，取值为 butt，round，square 默认是 butt
                    android：strokeLineJoin 设置路径交界处的连接方式，取值为 miter、round、bevel 默认是 miter
                    android：strokeMiterLimit 设置斜角的上界 默认是 4 （当 strokeLineJoin 设置为 "miter" 的时候，绘制两条线段以锐角相交的时候，所得的斜面可能相当长，当斜面太长，就会变的不协调。strokeMiterLimit 属性为斜面的长度设置了一个上限。这个属性表示斜面长度和线条长度的比值。当 strokeLineJoin 设置为其他属性时，这个属性是无效的）
                   
            </path>
            
            vector 还支持 clip-path 元素，定义当前绘制的剪切路径。注意：clip-path 只对当前的 group 和子 group 有效。需要 API 大于等于 21
                    
                    
                    
                    
                   
        
        
        
        </grup>
    
    </vector>
    复制代码

#### 矢量动画 ####

利用 XML 文件来设置矢量动画

1.  创建一个矢量图
    
        <?xml version="1.0" encoding="utf-8"?>
        <vector xmlns:android="http://schemas.android.com/apk/res/android"
                android:width="200dp"
                android:height="200dp"
                android:viewportWidth="100"
                android:viewportHeight="100">
            <group android:name="head_eyes">
                <path
                    android:fillColor="@color/colorPrimary"
                    android:name="head"
                    android:pathData=" M50,50 A15,15,0,1,1 50,51Z"
                    android:strokeWidth="2"
                    android:strokeColor="@color/colorPrimary"/>
                <group android:name="eyes">
                    <path android:fillColor="@android:color/white"
                          android:name="eye_left"
                          android:pathData="M55,40A2,2,0,1,1,55,41"/>
                    <path android:fillColor="@android:color/white"
                          android:name="eye_right"
                          android:pathData="M69,40A2,2,0,1,1,69,41"/>
                </group>
        
                <path android:fillColor="@color/colorAccent"
                    android:pathData="M60,55L55,60H65Z"/>
        
            </group>
        </vector>
        复制代码

哈哈，样子太丑了，大家就凑合着看把。

1.  在 drawble 创建矢量动画
    
    目的就是将我们的矢量图和 objectAnimator 关联起来
    
        <?xml version="1.0" encoding="utf-8"?>
        <animated-vector xmlns:android="http://schemas.android.com/apk/res/android"
            // 对应动画文件
            android:drawable="@drawable/vector_simple">
            <target
                android:animation="@animator/head"
                // 这里的名字对应你的矢量图中想要产生动画的 path 或者 group 或者 clip-path 的名字
                android:name="head_eyes"/>
        
        </animated-vector>
        
        复制代码
2.  在 animator 中创建动画
    
        <?xml version="1.0" encoding="utf-8"?>
        <set xmlns:android="http://schemas.android.com/apk/res/android">
            <objectAnimator
                android:duration="200"
                android:propertyName="translateY"
                android:repeatCount="infinite"
                android:repeatMode="reverse"
                android:valueFrom="0"
                android:valueTo="20"
                android:valueType="floatType"/>
        </set>
        复制代码
3.  布局文件中添加图片
    
        <ImageView
                android:id="@+id/iv_android"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/animated_head"
                android:contentDescription="@string/app_name"/>
        复制代码
4.  在程序中启动动画
    
        Drawable drawable =  ivAndroid.getDrawable();
        ((Animatable)drawable).start();
        复制代码

**效果图**

在 objectAnimator 的 propertyName 中有两个很重要的属性值，**trimPathEnd** 和 **trimPathStart** 表示截取，和前面介绍的 path 里面的类似，利用这个可以绘制 vectordrawble。注意如果动画使用这个两个属性值的话，animated-vector 中 target 对应的 name 必须是 path 类型不能是 group 效果图：

#### SVG 图片转成 vectordrawble ####

利用我们 Android Studio 提供的工具就可以将 SVG 格式的图片直接转成我们的 vectordrawble 了。

转载于:https://juejin.im/post/5cd86041f265da03981fe4e0

[Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdeveloper.android.com%2Fguide%2Ftopics%2Fgraphics%2Fvector-drawable-resources