侧边栏壁纸
  • 累计撰写 379 篇文章
  • 累计创建 60 个标签
  • 累计收到 109 条评论

目 录CONTENT

文章目录

Android vector 绘制通用几何图形

Z同学
2020-08-25 / 0 评论 / 2 点赞 / 1,183 阅读 / 8,576 字
温馨提示:
本文最后更新于 2022-01-17,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

前言

介绍如何使用vector 进行绘制几何图标。
vector 其实使用的就是svg格式的矢量图。我们如果通过https://www.iconfont.cn/ 进行下载,得到的图片,也可以选择svg格式。

SVG介绍

通常情况下,有以下几种使用Vector Asset的方式

1.File-> New -> Vestor Asset 然后使用google提供的各种基础库进行修改。
2.通过设计或者UI将图片导出为svg格式,然后倒入到drawable文件夹下进行替换。
3.自己根据参数逻辑,直接手写。

那么,好好的png用的也很好,为什么要有svg呢?

1.可被非常多的工具读取和修改(比如记事本)
2.与 JPEG 和 GIF 图像比起来,尺寸更小,且可压缩性更强
3.是可伸缩的
4.图像可在任何的分辨率下被高质量地打印
5.可在图像质量不下降的情况下被放大
6.图像中的文本是可选的,同时也是可搜索的(很适合制作地图)
7.可以与 Java 技术一起运行
8.是开放的标准
9.SVG文件是纯粹的 XML

如果想更清晰的了解svg绘制格式的内容,可以到W3school 进行学习:https://www.w3school.com.cn/svg/index.asp

vector 介绍

绘制的大部分代码都是在<path>标签内。同时,一个vector之中允许存在多个<path>标签

基本语法

每个命令都有大小写形式,大写代表后面的参数是绝对坐标,小写表示相对坐标,相对于上一个点的位置。参数之间用空格或逗号隔开。

命令案例介绍:
M (x y) 把画笔移动到x,y,要准备在这个地方画图了。
L (x y) 直线连到x,y,还有简化命令H(x) 水平连接、V(y)垂直连接。
Z,没有参数,连接起点和终点 //闭合线段
C(x1 y1 x2 y2 x y),控制点(x1,y1)( x2,y2),终点x,y 。 //三阶贝塞尔曲线
Q(x1 y1 x y),控制点(x1,y1),终点x,y //二阶贝塞尔曲线

A(rx ry x-axis-rotation large-arc-flag sweep-flag x y) //绘制圆弧
rx ry 椭圆半径
x-axis-rotation x轴旋转角度
large-arc-flag 为0时表示取小弧度,1时取大弧度 (舍取的时候,是要长的还是短的)
sweep-flag 0取逆时针方向,1取顺时针方向

关于<vector>标签里面的函数介绍

android:name 定义该drawable的名字
android:width 定义该 drawable 的内部宽度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:height 定义该 drawable 的内部高度,支持所有 Android 系统支持的尺寸,通常使用 dp
android:viewportWidth 定义矢量图视图的宽度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:viewportHeight 定义矢量图视图的高度,视图就是矢量图 path 路径数据所绘制的虚拟画布
android:tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的
android:tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in
android:autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片。比如 藏文,阿拉伯文这种从右往左布局。
android:alpha 该图片的透明度属性

关于<path>标签里面的函数介绍

android:name 定义该 path 的名字,这样在其他地方可以通过名字来引用这个路径
android:pathData 和 SVG 中 d 元素一样的路径信息。
android:fillColor 定义填充路径的颜色,如果没有定义则不填充路径
android:strokeColor 定义如何绘制路径边框,如果没有定义则不显示边框
android:strokeWidth 定义路径边框的粗细尺寸
android:strokeAlpha 定义路径边框的透明度
android:fillAlpha 定义填充路径颜色的透明度
android:trimPathStart 从路径起始位置截断路径的比率,取值范围从 0 到1
android:trimPathEnd 从路径结束位置截断路径的比率,取值范围从 0 到1
android:trimPathOffset 设置路径截取的范围 
android:strokeLineCap 设置路径线帽的形状,取值为 butt, round, square.
android:strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
android:strokeMiterLimit 设置斜角的上限

关于<group>标签里面的函数介绍

android:name 定义 group 的名字
android:rotation 定义该 group 的路径旋转多少度,这样图片就被旋转了,注意写数字的时候别晕了。
android:pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的。
android:pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的。
android:scaleX 定义 X 轴的缩放倍数
android:scaleY 定义 Y 轴的缩放倍数
android:translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的。
android:translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的。

关于<clip-path>标签里面的函数介绍
注意,clip-path 只针对当前的group和子group有效。
默认情况下vector下就是一个group了。

android:name 定义该 path 的名字
android:pathData  定义当前需要绘制的剪切路径,就是将已经绘制好的path 的部分path裁剪掉。 很多复杂图形都是通过裁剪和绘制进行堆叠而成。

案例介绍

1.圆形

代码:

<vector android:height="40dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:pathData="
   M6,20
   A 5 5 0 1 1 35 20
   A5 5 0 1 1 6 20
   z"
        android:strokeWidth="3"
        android:strokeColor="#fff" />
</vector>

效果:
圆形

2.箭头

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:pathData="
   M8,20
   L30,20
   M32,20
   L27 15
   L27 24
   z"
        android:strokeWidth="3"
        android:strokeColor="#fff" />
</vector>

效果:
箭头

3.正三角形

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:pathData="
   M20,10
   L30,30
   L10,30
   z"
        android:strokeWidth="3"
        android:strokeColor="#fff" />


</vector>

效果:
正三角形

4.直角三角形

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:pathData="
   M10,10
    v20
   h20
   z"
        android:strokeWidth="3"
        android:strokeColor="#fff" />
</vector>

效果:
直角三角形

4.横线

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:pathData="
   M8,20
   L32,20
   z"
        android:strokeWidth="3"
        android:strokeColor="#fff" />
</vector>


效果:
横线

5.圆形

<vector  android:height="40dp"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
  <path
      android:pathData="
   M4,20
   A 9 6 0 1 1 36 20
   A9 6 0 1 1 4 20
   z"
      android:strokeWidth="3"
      android:strokeColor="#fff" />
</vector>

效果:
圆形

6.平行四边形

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:strokeColor="#fff"
        android:strokeWidth="3"
        android:pathData="
        M20,13
       h15
       L20,28
       h-15
        z"
         />
</vector>


效果:
平行四边形

7.正方形

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="40"
    android:viewportHeight="40">
    <path
        android:strokeColor="#fff"
        android:strokeWidth="3"
        android:pathData="
        M10,10
       h20 v20 h-20
        z"
         />
</vector>

效果:
正方形

8.五角星

<vector android:height="40dp"
    android:viewportHeight="24.0" android:viewportWidth="24.0"
    android:width="40dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path
        android:fillColor="#fff"
        android:pathData="
        M22,9.24l-7.19,-0.62
        L12,2 9.19,8.63 2,9.24l5.46,4.73
        L5.82,21 12,17.27 18.18,21
        l-1.63,-7.03L22,9.24z
        M12,15.4l-3.76,2.27 1,-4.28 -3.32,-2.88 4.38,-0.38
        L12,6.1l1.71,4.04 4.38,0.38 -3.32,2.88 1,4.28
        L12,15.4
        z"/>
</vector>

效果:
五角星

9.气泡框

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="20dp"
    android:viewportWidth="20"
    android:viewportHeight="10">

    <path
        android:fillColor="#fff"
        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>

效果:
气泡框

10.向右 按钮

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="40dp"
    android:height="40dp"
    android:viewportWidth="50.0"
    android:viewportHeight="50.0">

    <path
        android:strokeColor="#fff"
        android:strokeWidth="5"
        android:pathData="M10,10
        L26.7,26.9
        M25,25
        L10,40"/>
</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="24"
    android:viewportWidth="24">

    <path
        android:name="toe1"
        android:fillColor="#ffffff"
        android:pathData="M 4.5 7 C 5.88071187458 7 7 8.11928812542 7 9.5 C 7 10.8807118746 5.88071187458 12 4.5 12 C 3.11928812542 12 2 10.8807118746 2 9.5 C 2 8.11928812542 3.11928812542 7 4.5 7 Z" />
    <path
        android:name="toe2"
        android:fillColor="#ffffff"
        android:pathData="M 9 3 C 10.3807118746 3 11.5 4.11928812542 11.5 5.5 C 11.5 6.88071187458 10.3807118746 8 9 8 C 7.61928812542 8 6.5 6.88071187458 6.5 5.5 C 6.5 4.11928812542 7.61928812542 3 9 3 Z" />
    <path
        android:name="toe3"
        android:fillColor="#ffffff"
        android:pathData="M 15 3 C 16.3807118746 3 17.5 4.11928812542 17.5 5.5 C 17.5 6.88071187458 16.3807118746 8 15 8 C 13.6192881254 8 12.5 6.88071187458 12.5 5.5 C 12.5 4.11928812542 13.6192881254 3 15 3 Z" />
    <path
        android:name="toe4"
        android:fillColor="#ffffff"
        android:pathData="M 19.5 7 C 20.8807118746 7 22 8.11928812542 22 9.5 C 22 10.8807118746 20.8807118746 12 19.5 12 C 18.1192881254 12 17 10.8807118746 17 9.5 C 17 8.11928812542 18.1192881254 7 19.5 7 Z" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79 .05 c-.11 .02 -.22 .05 -.33 .09 -.7 .24 -1.28 .78 -1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79 .29 1.02 1.02 2.03 2.33 2.32 .73 .15 3.06-.44 5.54-.44h.18c2.48 0 4.81 .58 5.54 .44 1.31-.29 2.04-1.31 2.33-2.32 .31 -2.04-1.3-3.49-2.61-4.8z" />
</vector>

效果:
百度logo

2

评论区