观心静

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
Android 开发 VectorDrawable 矢量图 （二）了解矢量图属性与绘制

了解属性：

<vector>：

根标签，表示一个矢量动画

支持的属性：

  1. android:name：定义矢量图形的名称
  2. android:width：定义Drawable的宽度，支持所有dimension单位，一般使用dp。drawable的宽度不一定是最终绘制宽度，比如给ImageView设置backgroud则Drawable绘制宽度等于ImageView的宽度，给ImageView设置src则在ImageView大于Drawable宽度时，Drawable绘制宽度等于自己定义的宽度。
  3. android:height：定义Drawable的宽度，支持所有dimension单位，一般是dp。其它同上。
  4. android:viewportWidth：定义矢量图形的视图(viewport)空间的宽度，viewport是一个虚拟的canvas，后面所有的path都在该坐标系上绘制。坐标系左上方为(0,0)，横轴从左向右，纵轴从上到下。横轴可视区域就是0~viewportWidth。
  5. android:viewportHeight：定义矢量图形的可视区域的高度。其它见上。[0,0]~[viewportWidth,viewportHeight]定义了虚拟canvas的可视区域。
  6. android:tint：作为染色(tint)的色彩应用到drawable上。默认不应用tint。
  7. android:tintMode：tint颜色的Porter-Duff混合模式，默认是src_in。
  8. android:autoMirrored：如果drawable布局方向是RTL(right-to-left)时，drawable绘制是否需要镜像化（镜像化就是绕自身x轴中线旋转180度）。
  9. android:alpha：drawble的透明度，取值0～1

<group>：

定义一组路径和子group，另外还定义了转换信息(transformation information)。转换信息定义在vector指定的视图区域内（与viewport坐标系相同）。定义的应用转换的顺序是缩放-->旋转-->平移，所以同时定义的这些属性最先应用scaleX/scaleY属性，最后应用translateX/translateY属性。

支持的属性：

  1. android:name：定义group的名称
  2. android:rotation：group对应矢量图形的旋转角度，取值是360度制。
  3. android:pivotX：Group旋转和缩放时的中心点的X轴坐标。取值基于viewport视图的坐标系，不能使用百分比。
  4. android:pivotY：Group旋转和缩放时的中心点的Y轴坐标。取值基于viewport视图的坐标系，不能使用百分比。
  5. android:scaleX：Group在X轴上的缩放比例，最先应用到图形上。
  6. android:scaleY：Group在Y轴上的缩放比例，最先应用到图形上。
  7. android:translateX：Group在X轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。
  8. android:translateY：Group在Y轴的平移距离，取值基于viewport视图的坐标系。最后应用到图形上。

<path>：

定义一个路径，一个路径即可以表示一块填充区域也可以表示一根线条。

支持的属性：

  1. android:name：定义路径的名称
  2. android:pathData：定义路径的数据，路径由多条命令组成，格式与SVG标准的path data的d属性完全相同，路径命令的参数定义在viewport视图的坐标系。
  3. android:fillColor：指定填充路径的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path不被填充。
  4. android:strokeColor：指定路径线条的颜色，一般是一个颜色值，在SDK24及以上，可以指定一个颜色状态列表或者一个渐变的颜色。如果在此属性上做渐变动画，新的属性值会覆盖此值。如果不指定，则path的线条不会绘制出来。
  5. android:strokeWidth：指定路径线条的宽度，基于viewport视图的坐标系（不要dp/px之类的结尾）。
  6. android:strokeAlpha：指定路径线条的透明度。
  7. android:fillAlpha：指定填充区域的透明度。
  8. android:trimPathStart：取值从0到1，表示路径从哪里开始绘制。0~trimPathStart区间的路径不会被绘制出来。
  9. android:trimPathEnd：取值从0到1，表示路径绘制到哪里。trimPathEnd~1区间的路径不会被绘制出来。
  10. android:trimPathOffset：平移可绘制区域，取值从0到1，线条从(trimPathOffset+trimPathStart绘制到trimPathOffset+trimPathEnd)，注意：trimPathOffset+trimPathEnd如果超过1，其实也是绘制的的，绘制的是0～trimPathOffset+trimPathEnd-1的位置。
  11. android:strokeLineCap：设置线条首尾的外观，三个值：butt（默认，向线条的每个末端添加平直的边缘）, round（向线条的每个末端添加圆形线帽）, square（向线条的每个末端添加正方形线帽。）。
  12. android:strokeLineJoin：设置当两条线条交汇时，创建什么样的边角（线段连接类型）：三个值：miter（默认，创建尖角）,round（创建圆角）,bevel（创建斜角） 。
  13. android:strokeMiterLimit：设置设置最大斜接长度，斜接长度指的是在两条线交汇处内角和外角之间的距离。只有当 lineJoin 属性为 "miter" 时，miterLimit 才有效。

 

了解语法：

  • M = moveto(M X,Y) ：将画笔移动到指定的坐标位置，相当于 android Path 里的moveTo()
  • L = lineto(L X,Y) ：画直线到指定的坐标位置，相当于 android Path 里的lineTo()
  • H = horizontal lineto(H X)：画水平线到指定的X坐标位置
  • V = vertical lineto(V Y)：画垂直线到指定的Y坐标位置
  • C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY)：三次贝赛曲线
  • S = smooth curveto(S X2,Y2,ENDX,ENDY) 同样三次贝塞尔曲线，更平滑
  • Q = quadratic Belzier curve(Q X,Y,ENDX,ENDY)：二次贝赛曲线
  • T = smooth quadratic Belzier curveto(T ENDX,ENDY)：映射 同样二次贝塞尔曲线，更平滑
  • A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y)：弧线 ，相当于arcTo()
  • Z = closepath()：关闭路径（会自动绘制链接起点和终点）

注意：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

 

直线命令

例子1 画一个方向图标：

注意！下面的代码是Android的VectorDrawable格式

<?xml version="1.0" encoding="utf-8"?>
<!--android:width="50dp"  android:height="50dp" 画布的宽度与高度-->
<!--android:viewportWidth="50.0" android:viewportHeight="50.0" 视图的宽度和高度-->
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="50dp"
    android:height="50dp"
    android:viewportWidth="50.0"
    android:viewportHeight="50.0">

    <!--strokeColor=  笔画颜色 线条的颜色-->
    <!--fillColor=  填充颜色  注意2个颜色 有明显区分，填充颜色只是在图形闭合后颜色-->
    <!--strokeWidth=  线宽-->
    <path
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="5"
        android:pathData="M10,10
        L26.7,26.9
        M25,25
        L10,40"/>
    <!--这里使用的都是大写字母，所以坐标值都是绝对坐标-->
    <!--M10,10 = 首先将画笔移动到X10,Y10的地方-->
    <!--L26.7,26.9 = 然后画一条直线到X26.7,Y26.9 -->
    <!--M25,25 = 在将画笔移动到 X25.7,Y25 -->
    <!--L10,40 = 画一条直线到 X10.7,Y40 -->
    
</vector>
 

效果图：

例子2  画一个矩形：

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="100dp"
    android:height="100dp"
    android:viewportHeight="100.0"
    android:viewportWidth="100.0">

    <path
        android:name="stars"
        android:strokeColor="@color/colorPrimaryDark"
        android:strokeWidth="2"
        android:pathData="M10,10 L90,10 L90,90 L10,90 Z"/>
    
</vector>
  • 我们的画布是100*100的,首先在X10,Y10的坐标上向右画直线,然后在下线画直线,在向左画直线,最后使用Z闭合图形。注意！需要闭合图形需要在一个图形里一直保持线段的连贯,如果在中间使用M移动画笔，那么Z闭合只与最后一次M移动的点闭合图形。这点与自定义View里的path画法类似。
  • 另外，如果你需要一个填充全部颜色的矩形，只需要修改android:strokeColor="@color/colorPrimaryDark"  为android:fillColor="@color/colorPrimaryDark" 这样，图形中间就会被全部填充。但是建议初学者在画的时候设置strokeColor和strokeWidth 在来绘制图形，否则图形如果不设置线条颜色和线宽，图形在闭合之前是不会显示图形的。当然，熟悉svg的大佬可以略过。。

效果图:

 

曲线命令

绘制平滑曲线的命令有三个，其中两个用来绘制贝塞尔曲线，另外一个用来绘制弧形或者说是圆的一部分.
在path元素里，只存在两种贝塞尔曲线：三次贝塞尔曲线C，和二次贝塞尔曲线Q

三次贝塞尔曲线C

三次贝塞尔曲线C，三次贝塞尔曲线需要定义一个点和两个控制点，所以用C命令创建三次贝塞尔曲线，需要设置三组坐标参数：

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)

这里的最后一个坐标(x,y)表示的是曲线的终点，另外两个坐标是控制点，(x1,y1)是起点的控制点，(x2,y2)是终点的控制点

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="400"
    android:viewportWidth="400">

    <path
        android:name="rect_vector"
        android:fillColor="#04f91d"
        android:pathData="M 100 100 C 200 0 300 0 400 100 "
        android:strokeColor="#f76f07"
        android:strokeWidth="5" />
        
</vector>

M 定义起点为(100,100)
C 定义终点为(400,100)
其中两个控制点 (200,0)(300,0)

连接贝塞尔曲线 S

以将若干个贝塞尔曲线连起来，从而创建出一条很长的平滑曲线。通常情况下，一个点某一侧的控制点是它另一侧的控制点的对称（以保持斜率不变）。这样，可以使用一个简写的贝塞尔曲线命令S

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="800dp"
    android:height="800dp"
    android:viewportHeight="800"
    android:viewportWidth="800">
    
    <path
            android:name="rect_vector"
        android:fillColor="#04f91d"
        android:pathData="M 100 100 C 200 0 300 0 400 100 S 600 200 700 100"
        android:strokeColor="#f76f07"
        android:strokeWidth="5" />

</vector>

二次贝塞尔曲线Q

它比三次贝塞尔曲线简单，只需要一个控制点，用来确定起点和终点的曲线斜率。因此它需要两组参数，控制点和终点坐标

Q x1 y1, x y (or q dx1 dy1, dx dy)

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="400dp"
    android:height="400dp"
    android:viewportHeight="800"
    android:viewportWidth="800">

    <path
        android:name="rect_vector"
        android:fillColor="#04f91d"
        android:pathData="M 100 100 Q 200 0 400 100"
        android:strokeColor="#f76f07"
        android:strokeWidth="5" />

</vector>

 

连接贝塞尔曲线 T

就像三次贝塞尔曲线有一个S命令，二次贝塞尔曲线有一个差不多的T命令，可以通过更简短的参数，延长二次贝塞尔曲线。

T x y (or t dx dy)
    <?xml version="1.0" encoding="utf-8"?>
    <vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="800dp"
        android:height="800dp"
        android:viewportHeight="800"
        android:viewportWidth="800">

        <path
            android:name="rect_vector"
            android:fillColor="#04f91d"
            android:pathData="M 100 100 Q 200 0 300 100 T 500 100"
            android:strokeColor="#f76f07"
            android:strokeWidth="5" />

    </vector>

弧形

弧形命令A是另一个创建SVG曲线的命令。基本上，弧形可以视为圆形或椭圆形的一部分。假设，已知椭圆形的长轴半径和短轴半径，另外已知两个点（它们的距离在圆的半径范围内），这时我们会发现，有两个路径可以连接这两个点。每种情况都可以生成出四种弧形。所以，为了保证创建的弧形唯一，A命令需要用到比较多的参数

A rx ry x-axis-rotation large-arc-flag sweep-flag x y

a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy

弧形命令A的前两个参数分别是x轴半径和y轴半径
参数 x-axis-rotation （第三个）表示弧形的旋转情况
参数 large-arc-flag （第四个）决定弧线是大于还是小于180度，0表示小角度弧，1表示大角度弧。
参数 sweep-flag（第五个）表示弧线的方向，0表示从起点到终点沿逆时针画弧，1表示从起点到终点沿顺时针画弧。
最后的参数x y 是弧线的终点

实例

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="800dp"
    android:height="800dp"
    android:viewportHeight="800"
    android:viewportWidth="800">
    
    <path
        android:name="rect_vector"
        android:fillColor="#04f91d"
        android:pathData="
        M 100 400
        A 100 120 0 0 1 400 400 Z"
        android:strokeColor="#f76f07"
        android:strokeWidth="5" />

</vector>

这里 起点坐标是 (100,400) 弧线的半径 rx =100 ry=120 旋转角度为 0度，第四个参数 0 代表取的是小角方向的弧度，这里正好两而相等
终点坐标是 (400,400) 最后 Z 闭合曲线 

 贝塞尔在线模拟工具:http://wx.karlew.com/canvas/bezier/

github:https://github.com/karlew/bezier-tool-for-canvas

posted on 2018-08-30 18:08  观心静  阅读(4766)  评论(1)  编辑  收藏  举报