Vector xml 中pathData的语法

关于Vector中pathData的写法,从网络学习而来,感谢网络共享者!

1. 支持的指令:
    M = moveto(M X,Y) :将画笔移动到指定的坐标位置
    L = lineto(L X,Y) :画直线到指定的坐标位置
    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):弧线
    Z = closepath():关闭路径
    使用原则:
    坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下
    所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
    指令和数据间的空格可以省略
    同一指令出现多次可以只用一个
    注意,'M'处理时,只是移动了画笔, 没有画任何东西。 它也可以在后面给出上同时绘制不连续线。
    关于这些语法,开发者需要的并不是全部精通,而是能够看懂即可,其它的都可以交给工具来实现。

 命令示例(x y 代表绝对的x ,y 坐标配合大写的命令使用,dx dy 表示相对坐标移动,配合小写命令使用)
1.移动 
    M x,y 坐标从0,0点移动到x,y
2.直线
    L x,y (l dx, dy) 从当前点划一条直线到对应的点。
    H x (h dx) 从当前点绘制水平线,相当于l x,0
    V y (v dy) 从当前点绘制垂直线,相当于l 0,y
3.闭合
    Z(或z) 从结束点绘制一条直线到开始点,闭合路径
4.弧线
    A rx,ry x-axis-rotation large-arc-flag,sweepflag x,y
    a rx,ry x-axis-rotation large-arc-flag,sweepflag dx,dy
    rx,ry分别表示X Y轴直径
    x-axis-rotation 旋转的角度 -360~360
    large-arc-flag0时取小弧度 为1时取大弧度
    sweepflag 0逆时针 1顺时针
    x,y(dx,dy) 终点坐标
    例如:a 4,6 90 0,1 2,2

5.贝塞尔曲线 
    二阶 一个控制点
    Q x1,y1 x,y ( q dx1,dy1 dx,dy)
    (x1,y1)为P1的控制点 (x,y)为终点 P2
    T x,y ( t dx, dy)
    T指令是在画完一条贝塞尔曲线后,只需用T指令指定终点,就能画出一条平滑的贝塞尔曲线。控制点被默认为上一次的控制点关于上次终点的中心对称点。比如上次的控制点P1是(6,6),终点P2是(8,10), 那么使用T指令后默认控制点P1`为(10,14)    

    三阶 二个控制点
        C x1,y1 x2,y2 x,y ( c dx1,dy1 dx2,dy2 dx,dy)
        两个控制点,分别是P1(x1,y1),P2(x2,y2)还有终点P3(x,y)
        S x1,y1 x,y ( s dx1,dy1 dx, dy)
        S指令同T指令
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="80.0"
    android:viewportWidth="80.0">
    <!--↓ 直线示例-->
    <path
        android:fillColor="#FFFF00f0"
        android:pathData="M4,10 l10,3 h2v3"/>
    <!--二阶贝塞尔示例1-->
    <path
        android:fillColor="#FFFF00f0"
        android:pathData="M4,10 Q6,6 8,10 Q10,14 12,10"/>

    <!--二阶贝塞尔示例2-->
    <path
        android:fillColor="#FFFF00f0"
        android:pathData="M9,15 q2,-4 4,0 q2,4 4,0"/>

    <!--二阶贝塞尔示例3-->
    <path
        android:fillColor="#FFFF00f0"
        android:pathData="M14,20 Q16,16 18,20 T22,20"/>

    <!--二阶贝塞尔示例4-->
    <path
        android:fillColor="#FFFF00f0"
        android:pathData="M5,20  q2,-4 4,0 t4,0"/>
    <!--圆角矩形-->
    <path
        android:fillColor="#FFFF000f"
        android:pathData="M24,24
            h24 q4,0 4,4 v24 q0,4 -4,4
            h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4"/>
    <!--圆角矩形中一个心型♥-->
    <path
        android:fillColor="#f24e4e"
        android:pathData="M28,24
            h24 q4,0 4,4 v24 q0,4 -4,4
            h-24 q-4,0 -4,-4 v-24 q0,-4 4,-4
            M40,35
            a5,6 -15 0 0 -9,2
            c0,5 4,6 9,12
            c5,-6 9,-7 9,-12
            a5,6 15 0 0 -9 -2"/>
    <!--手掌-->
        <!--android:pathData=" M22,23 q0,4 -4,4 h-7 q-2,0 -3,-1 T1,16 q-0.6,-0.8 0,-2 t5,3-->
            <!--q1,1 2,0 T8,4 q0,-1 0.9,-1.1 t1.1,1 1.5,9 q0.25,0.5 0.5,0.5-->
            <!--t0.5,-0.5 0,-11 q0.2,-1 1.1,-1.1 t1.1,1.1 1,11 q0.25,0.5 0.5,0.5-->
            <!--t0.5,-0.5 0.5,-9 q0.2,-1 1,-1 t1,1 0.5,9 q0.25,0.5 0.5,0.5-->
            <!--t0.5,-0.5 1.2,-6.5 q0.3,-1 1,-1 t0.8,1 -0.8,6 T22,23" />-->
</vector>

参考
http://www.w2bc.com/article/132096
http://mobile.51cto.com/news-478709.htm
http://chuansong.me/n/400687951237

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值