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

最新推荐文章于 2024-03-06 01:16:19 发布

snow_lyGirl

最新推荐文章于 2024-03-06 01:16:19 发布

阅读量2.1k

点赞数 2

分类专栏： android 文章标签：矢量图绘制圆形矢量图矢量图规则

本文链接：https://blog.csdn.net/qq_31028313/article/details/103361625

版权

android 专栏收录该内容

82 篇文章 1 订阅

订阅专栏

<?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绘制规则：

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

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