欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

android矢量图vector的简单介绍

程序员文章站 2022-04-02 20:40:51
文章目录android矢量图vector贝塞尔二阶三阶参考android矢量图vectorviewportWidth和viewport表示画板的大小大写表示绝对坐标小写表示相对上个点的坐标坐标系以左上角为原点,向右为x轴正方向,向下为y轴正方向二阶贝塞尔曲线Q需要两个坐标,第一个为控制点坐标,第二个为终点坐标三阶贝塞尔曲线C需要三个坐标,前两个为控制点,第三个为终点Z不需要参数,表示闭合L画线的话如果要看到效果,还需要设置颜色strokeColor和宽度strokeWidthV和H分别...

android矢量图vector的简单介绍

  • vector是用于绘制矢量图的,跟svg非常类似
  • 但vector是android5.0的东西,因此想在低版本使用,可以查阅下这篇文章:Android中vector用法详解_Nothing-CSDN博客_android中vector
  • 本文会讲解有关vector的一些知识,了解了这些后一些简单的图形自己完全是有能力手写出来的

vector的宽高属性

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
	...
</vector>
  • 上面的viewportWidth和viewportHeight可以理解为画布的宽高,而width和height则可以理解为实际的大小,这样的好处就是一切按照比例进行绘制
  • 举个例子,当viewportWidth为24,width为48dp时(即1:2),如果指定线的长度为3,那么实际绘制时线对应的长度就是6dp
  • 上面的xml中,如果我们将 android:width和android:height改为48dp,那么就相当于对我们的图放大了一倍
  • 一般情况下我们都是设定为1:1的比例,这样比较方便理解和计算

pathData

  • vector里最重要的内容就是pathData了,pathData就是真正的绘制代码
  • pathData中主要有几种类型,M表示移动到某个点,L表示画线,A表示弧线,Q是二阶贝塞尔,C是三阶贝塞尔,Z表示闭合,V表示垂直,H表示水平
  • 注意以上字母大写时表示绝对坐标,小写则表示相对坐标,除了Z不需要参数为,其余字母都有相应的参数要设置
  • V和H可以说是L的一种便捷方式
  • 坐标系是以左上角为原点,向下为y轴正方向,向右为x轴正方向

绘制类型

移动点

  • M(x,y)
  • 要绘制任何图形首先得有个起点吧,这个可以用M来表示,参数是坐标
  • M表示移动到某个点的意思

直线

  • L(x,y)
  • 绘制直线比较简单,用字母L表示,当绘制水平线时可以用H,绘制垂直线时可以用V
  • 注意strokeWidth和strokeColor必须指定才能看到绘制的线,否则是看不到的,而且strokeWidth的范围是相对于viewportWidth来说的,也就是不能用单位dp来表达,当我们指定viewportWidth为1时,由于1占了24的二十四分之一,因此我们会发现显示出来的效果就是线太粗了
  • L后面主要跟两个参数,就是要绘制的直线的终点坐标,有小伙伴可能会疑惑,难道不用指定起点坐标吗,实际上起点坐标都是以上一个点作为起点坐标
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:pathData="
        M0,0
        L24,24
        H0
        V0
        H24
        V24
        M0,24
        L24,0
        M0,12
        H24
        M12,0
        V24
        M0,6
        H24
        M0,18
        H24
        M6,0
        V24
        M18,0
        V24
        "
        android:strokeWidth="0.05"
        android:strokeColor="@android:color/black" />
</vector>
  • 上面的代码的效果如下
  • android矢量图vector的简单介绍

这里绘制这个网格是有意义的,有助于我们理解椭圆的绘制

弧线

  • 格式为: A(rx ry x-axis-rotation large-arc-flag sweep-flag x y)
    • 也可以按照中文便于记忆: A(x轴半径,y轴半径 x轴旋转角度 大小弧 顺逆时针 终点坐标)
  • 参数比较多,下面会说明一下:
    • 绘制弧线一般会有弧线的起点和终点,起点不用说了,就是上一个点的位置,那么终点就是A最后的x和y
    • A中的前两个就是指定半径的
    • 至于x-axis-rotation表示x轴旋转角度,本人暂时不理解其作用,取0还是取1好像都没有什么影响
    • large-arc-flag就是指明要大弧还是小弧,1表示要大弧,0表示小弧
    • sweep-flag是说按顺时针还是逆时针,0取逆时针,1取顺时针
  • 这么说还是抽象了,下面以实际绘制一个弧线举例
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:pathData="
        M0,0 L24,24 H0 V0  H24 V24 M0,24 L24,0
        M0,12 H24
        M12,0 V24
        M0,6 H24
        M0,18 H24
        M6,0 V24
        M18,0 V24
        "
        android:strokeWidth="0.05"
        android:strokeColor="@android:color/black" />
    <!--顺时针大弧-->
    <path
        android:pathData="
        M12,6
        A6,6 0 1 1 6,12
        "
        android:strokeWidth="0.5"
        android:strokeColor="@android:color/white" />
    <!--顺时针小弧-->
    <path
        android:pathData="
        M12,6
        A6,6 0 0 1 6,12
        "
        android:strokeWidth="0.5"
        android:strokeColor="@android:color/holo_red_dark" />
    <!--逆时针小弧-->
    <path
        android:pathData="
        M12,6
        A6,6 0 0 0 6,12
        "
        android:strokeWidth="0.5"
        android:strokeColor="@android:color/holo_blue_dark" />
    <!--逆时针大弧-->
    <path
        android:pathData="
        M12,6
        A6,6 0 1 0 6,12
        "
        android:strokeWidth="0.5"
        android:strokeColor="@android:color/holo_green_dark" />

</vector>


  • 绘制效果如下
  • android矢量图vector的简单介绍
  • 到了这里,如果想绘制一个圆怎么办,其实圆说白了就是两个半圆弧组成的,因此绘制两个半圆弧即可
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <path
        android:pathData="
        M0,0 L24,24 H0 V0  H24 V24 M0,24 L24,0
        M0,12 H24
        M12,0 V24
        M0,6 H24
        M0,18 H24
        M6,0 V24
        M18,0 V24
        "
        android:strokeWidth="0.05"
        android:strokeColor="@android:color/black" />
    <path
        android:pathData="
        M18,12
        A6,6 0 1 0 6,12
        A6,6 0 1 0 18,12
        "
        android:strokeWidth="0.5"
        android:strokeColor="@android:color/white" />

</vector>

android矢量图vector的简单介绍

  • 其中 A6,6 0 1 0 6,12绘制上半段弧, A6,6 0 1 0 18,12绘制了下半段弧,注意下面的A是以上一个A的终点作为起点的

贝塞尔曲线

二阶

android矢量图vector的简单介绍

  • 假设从a(Xa,Ya)点到b(Xb,Yb)点的二阶贝塞尔(只有一个控制点),可以设置控制点c(Xc,Yc),那么写法就是 QXc,Yc Xb,Yb,例如
Q1,1 2,2
  • 再具体点,以绘制一个聊天背景框为例,这里我们设定我们的画布大小为20*10,那么接下来的坐标我们都需要在这个x属于[0,20] ,y属于[0,10]这个范围内,然后聊天对话框的边角是圆角,圆角本来也可以用椭圆A来绘制,但此处我们使用二阶贝塞尔Q来实现
  • 整个绘制分为两部分,一部分是绘制圆角矩形,一部分是绘制底下的三角形(这部分比较简单就不阐述了)
  • 绘制圆角矩形的话,我们先用M移动到我们需要绘制的第一个圆角的位置即左上角,作为贝塞尔曲线的起始点,然后按逆时针方向依次绘制圆角,向下竖线,圆角,向右横线,圆角,向上竖线,圆角,这样一个圆角矩形就绘制完成了
  • 示例代码如下:
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="20dp"
    android:height="10dp"
    android:tint="#417FF9"
    android:viewportWidth="20"
    android:viewportHeight="10">

    <path

        android:fillColor="@android:color/white"
        android:pathData="
        M1,0
        Q0,0 0,1
        V8
        Q0,9 1,9
        L19,9
        Q20,9 20,8
        V1
        Q20,0 19,0

        M9.5,9
        H10.5
        L10,10

        z" />
</vector>
  • 以上代码绘制出的效果图就是这样
  • android矢量图vector的简单介绍

三阶

android矢量图vector的简单介绍

  • 三阶贝塞尔曲线用大写C或小写c表示,后面跟三个坐标点的坐标,分别是控制点1,控制点2,和终点坐标,坐标中间用空格隔开
  • 假设要绘制从a(Xa,Ya)点到b(Xb,Yb)点的三阶贝塞尔(有两个控制点),可以设置控制点c(Xc,Yc)和d(Xd,Yd),那么写法就是 CXc,Yc Xd,Yd Xb,Yb,例如
C0,0 1,1 2,2
  • 这里可能有人会疑惑,为何起始点a的坐标没体现出来,因为起始点就是从上一个点开始的,比如你可以通过M移动到某个点e或者通过L到达点e,接着再绘制贝塞尔,那么这个e点就是贝塞尔曲线的起始点

参考

本文地址:https://blog.csdn.net/huweijian5/article/details/107560477