Vector xml 中pathData的语法

最新推荐文章于 2022-08-10 09:44:58 发布

重塑梦想

最新推荐文章于 2022-08-10 09:44:58 发布

阅读量1.1k

点赞数

分类专栏： android 文章标签： Android vector pathData

android 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

关于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-flag 为0时取小弧度 为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>