vector 的用法--------------自绘资源

创建

命名选择根元素

当然你也可以选择其他元素

属性介绍
vector 元素

name：定义该矢量图形的名字。通过名字找到这个矢量图
width，height：定义该矢量图形的固有宽高(必须的，矢量图内部的宽高intrinsic) ,与外部的宽高无关
viewportHeight，viewportWidth：定义画布(viewport)的大小，不需要指定单位。但大小可以理解为一个虚拟单位，将drawable的宽高分成多少等份，在定义path的时候所有数值都是说取drawable宽高的多少份。如viewportWidth和viewportHeight分别为32，32，在path中(16,16)便表示在drawable宽高的中间。所有控制点都必须在viewportWidth和viewportHeight内，超出的部分交不予显示。该属性为必需值
alpha：图片的不透明度
tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的。一般不需设置
tintMode 定义 tint 颜色的 Porter-Duff blending 模式，默认值为 src_in
autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候，是否自动镜像该图片
group 元素
几个元素需要一起处理时使用，将需要处理的path放到group中。
group 主要是用来设置路径做动画的关键属性的

name 定义 group 的名字
rotation 定义该 group 的路径旋转多少度
pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的
pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的
scaleX 定义 X 轴的缩放倍数
scaleY 定义 Y 轴的缩放倍数
translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的
translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的
clip-path 元素
定义当前绘制的剪切路径。注意，clip-path 只对当前的 group 和子 group 有效

name 定义 clip path 的名字
pathData 和 android:pathData 的取值一样
path 元素

name：路径的名称。可以在其他地方来引用
fillColor：图形的填充颜色。设置该属性值后，得到的svg图形就会填充满.(画满)
strokeColor：边界的颜色。(画边框)
strokeWidth：边框的宽度
strokeAlpha：边界透明度
trimPathEnd：从开始到结束，显示百分比，0，不显示，1 显示
trimPathStart：从开始到结束，隐藏百分比，0 不隐藏，1 隐藏
trimPathOffset：设置截取范围
strokeLineCap 设置路径线帽的形状，取值为 butt, round, square. (设置线头为圆滑)
strokeLineJoin 设置路径交界处的连接方式，取值为 miter,round,bevel.
strokeMiterLimit 设置路径交叉时候，斜角的上限。当 strokeLineJoin 为 “round” 或 “bevel” 的时候，这个属性无效。为miter时，锐角相交，可能斜面会很长，不协调。所以就为交界的斜面设置上限。默认是10.意味着一个斜面的长度不应该超过线条宽度的 10 倍
pathData：定义控制点的位置。
pathData参数
所有的参数，都可以大写小写，大写表示是绝对位置。小写是相对位置

所有的值，都可以用空格来间隔开，或者用逗号间隔开

M：move to 移动绘制点, 一个坐标（移动但不绘制）
M45,14 将绘制点移动到坐标（45，14）
m1,1 将绘制点相对于上一个绘制点移动（1，1）
L：line to 直线，一个坐标
L55,14从上一个绘制点绘制直线到坐标（55，14）
l10,0相对于上一个绘制点绘制直线（10，0）
以上两种方式现对于M45,14 而言，效果是一致的
Z：close 闭合，不要参数
C：三次贝塞尔曲线，三个坐标，前两个为贝塞尔曲线的控制点的坐标，最后一个终点的坐标。
S：同C，但比C要更平滑。
Q：二次贝塞尔曲线，两个坐标，第一个表示贝塞尔曲线的控制点坐标，第二个终点的坐标。
绘制90度圆角 M8,4 l24,0 q4,0 4,4 l0,24
T：同Q，但比q平滑。
A：ellipse 圆弧，七个参数，
(rx ry rotation big_flag sweep_flag x y)
rx ry，弧线所属椭圆的半轴的xy的长度，如果xy相等，那么就是一个圆。
rotation 旋转角度
big_flag 是否大圆 1 为是， 0 不是
sweep_flag 是否顺时针 1 为是， 0 不是
x y 终点坐标
H:水平画一条直线到指定位置，一个坐标
v:垂直画一条直线到指定位置，一个坐标
//指令的大小写分别代表着绝对定位与相对定位。绝对定位指的是这个点在drawable中的坐标，而相对定位指的是这个点相较于前一个点移动的坐标
这里抄袭个小玩意
drawable/vector_smile

<vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:name="smile"

    android:width="30dp"

    android:height="30dp"

    android:viewportHeight=""

    android:viewportWidth="">

    <!--脸-->

    <path

        android:name="smile_circle"

        android:fillColor="#f7ec22"

        android:pathData="M0 50, A50 50 0 0 1 100 50, A50 50 0 0 1 0 50" />

    <!--嘴巴-->

    <path

        android:name="mouth"

        android:strokeColor="#00ff00"

        android:strokeWidth="" />

</vector>

animator/oa_smile

<objectAnimator xmlns:android="http://schemas.android.com/apk/res/android"

    android:duration=""//控制动画时间

    android:propertyName="pathData"

    android:valueTo="M30 70, Q50 50 70 70"

    android:valueFrom="M30 70, Q50 90 70 70"

    android:valueType="pathType">

</objectAnimator>

drawable/av_smile

<animated-vector xmlns:android="http://schemas.android.com/apk/res/android"

    android:drawable="@drawable/vector_smile">

    <target

        android:name="mouth"

        android:animation="@animator/oa_smile" />

</animated-vector>

使用

    <ImageView

        android:src="@drawable/av_smile"

        android:id="@+id/image"

        android:layout_width="100dp"

        android:layout_height="100dp" />

        ImageView imageView = (ImageView) findViewById(R.id.image);

        Animatable animatable = (Animatable) imageView.getDrawable();

        animatable.start();

就是一个表情的变化图片

巴特西

vector 的用法--------------自绘资源

最新文章

热门文章