Android矢量图pathData绘制规则及简单常用的矢量图绘制

右箭头
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
        <path android:name="arrow"
            android:strokeColor="#FFFFFF"
            android:strokeWidth="0.5"
            android:pathData="M12,0 L24,12 12,24"/>
</vector>
下箭头
<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!--android:rotation="180" 可实现上箭头-->
    <group
        android:name="group1"
        android:pivotX="12"
        android:pivotY="12"
        android:rotation="0">
        <path
            android:name="path1"
            android:fillColor="#FFFFFFFF"
            android:pathData="M7,7.67 L17,7.67 12,16.33" />
    </group>
</vector>
圆点
<?xml version="1.0" encoding="utf-8"?>
<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportHeight="300.0"
    android:viewportWidth="300.0">
        <path
            android:name="circle"
            android:fillColor="@android:color/black"
            android:pathData="M150,75 a75,75 0 1,1 0,150 a75,75 0 1,1 0,-150"
            android:strokeColor="#00000000" />

</vector>

矢量图pathData绘制规则:

  1. Mx,y:移动到点(x,y)
  2. Lx,y:直线连到点x,y,简化命令H(x)水平连接和V(y)垂直连接
  3. Qx1,y1 x2,y2:二阶贝塞尔曲线,控制点(x1,y1),终点x2,y2
  4. Cx1,y1 x2,y2 x3,y3:三阶贝塞尔曲线,控制点(x1,y1)( x2,y2),终点x3,y3
  5. Tx y:平滑的二阶贝塞尔曲线,参数只有一个点(x,y),这个点是结束点,控制点是前一个二阶贝塞尔曲线的控制点相对于前一个贝塞尔曲线的结束点的镜像点
  6. Sx2,y2 x,y:平滑的三阶贝塞尔曲线,参数为(x2,y2 x,y) ,x2,y2 为第二个控制点,x,y为绘制终点,那么第一个控制点则是前一个三阶曲线的第二个控制点相对于前一个三阶曲线终点的镜像点
  7. Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y:ellipse arc圆弧曲线
  8. z:close闭合

注:每个指令都有大小写形式,大写表示后面的参数是绝对坐标,小写表示相对于上一个点的相对坐标位置,参数可以用逗号或者空格分离

矢量图绘制椭圆详解:

Arx,ry x-axis-rotation large-arc-flag,sweep-flag x,y

  1. rx,ry :分别表示x轴半径和y轴半径
  2. x-axis-rotation:表示x轴的旋转角度
  3. large-arc-flag,sweep-flag:分别表示 绘制大弧还是小弧,1大0小,顺时针弧线还是逆时针弧线,1顺0逆
  4. x,y:表示绘制的终点

示例:

标题

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值