博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Android 矢量图详解
阅读量:7217 次
发布时间:2019-06-29

本文共 2562 字,大约阅读时间需要 8 分钟。

关于 Vector,在官方开发指南中介绍。本文章是由个人翻译官方指南然后添加个人理解完成。

由于个人精力有限,多个渠道发布,排版上可能会有问题,如果影响查看,请移步 Android 开发者家园

Vector Drawables 概述

VectorDrawable 和 AnimatedVectorDrawable 是在 Android 5.0 系统中第一次加入,当然我们可以使用 Android 的支持库,来支持旧的版本,通过 VectorDrawableCompat 和 AnimateVectorDrawableCompat 来实现。

VectorDrawble 是在 xml 文件中定义的矢量图形。xml 文件中定义的矢量图形,它是一组带有颜色信息的点、线和曲线,使用矢量图主要的优点是图形可伸缩性。可以在不损失显示质量的情况下进行缩放,这意味着我们可以在不同的屏幕密度的手机上使用相同的文件。这样会使 APK 文件变小更加有利于开发人员维护。我们还可以通过多个 XML 文件和矢量图结合用于动画。

既然说起 VectorDrawable 了,那就不得不提 SVG (Scalable Vector Graphic)了,这两个经常混淆,其实 SVG 就是一种基于可扩展语言(xml),用于描述二维矢量图形的一种图形格式(和我们常见的 .png 等等图片一样,都是一种图片格式),它有自己的一套编写规范(使用 XML 编写的),所以这种图片是根据他自己的一套规范通过 XML 语言编写而成的图片。而我们的 VectorDrawable 是编程中的,它仅支持 SVG 规范中有限的内容。Android Studio 支持将 SVG 文件转换成 VectorDrawable 。这就是他们两者的关系。

path 中的常用的简单绘制命令

  • moveto 命令 M 移动到新的位置
  • closepath 命令 Z 封闭路径,从当前的位置画一条直线到该路径或者子路径起始位置
  • lineto 命令 L ,从当前的位置画一条线到指定的位置
  • horizontal lineto 命令 H 水平画一条直线到指定位置
  • vertical lineto 命令 V 垂直画一条直线到指定位置
  • 贝塞尔曲线 命令 Q
  • 光滑二次贝塞尔曲线 命令 T
  • elliptical arc 命令 A 椭圆弧

每个命令都有大小写的形式,大写代表后面的参数是绝对坐标,小写表示相对坐标(我们一般用大写就可以了),参数之间用空格或者逗号隔开。所谓的相对坐标是相对于前面一个点的,比如:M30,0 l 10,10 换算成绝对坐标就是 M30,0 L40,10

命令使用实例

  • M(x y) 移动到坐标 x,y 处
  • Z 后面不接参数,直接连接起点和终点
  • L(x y)直线连接到坐标 x,y 处
  • H(x) 水平连接
  • V(y) 垂直连接
  • 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 取顺时针方向
    • (x,y) 是终点的坐标

VectorDrawable 如何定义

VectorDrawable 在 drawable 文件夹中通过 来定义,这里先来详细的介绍一下 vector 中的各个属性(和网上的许多不一样,网上的大多都没有自己验证过)

vector 还支持 clip-path 元素,定义当前绘制的剪切路径。注意:clip-path 只对当前的 group 和子 group 有效。需要 API 大于等于 21

offset说明.png

矢量动画

利用 XML 文件来设置矢量动画

  1. 创建一个矢量图

head.png

哈哈,样子太丑了,大家就凑合着看把。

  1. 在 drawble 创建矢量动画

    目的就是将我们的矢量图和 objectAnimator 关联起来

  2. 在 animator 中创建动画

  3. 布局文件中添加图片

  4. 在程序中启动动画

    Drawable drawable =  ivAndroid.getDrawable();((Animatable)drawable).start();

效果图

效果图.gif

在 objectAnimator 的 propertyName 中有两个很重要的属性值,trimPathEndtrimPathStart 表示截取,和前面介绍的 path 里面的类似,利用这个可以绘制 vectordrawble。注意如果动画使用这个两个属性值的话,animated-vector 中 target 对应的 name 必须是 path 类型不能是 group 效果图:

trimPathStart.gif

SVG 图片转成 vectordrawble

利用我们 Android Studio 提供的工具就可以将 SVG 格式的图片直接转成我们的 vectordrawble 了。

svgtovector.png

选择图片.png

欢迎大家关注我的微信公众号,和我交流分享

转载于:https://www.cnblogs.com/sydmobile/p/10854553.html

你可能感兴趣的文章
Html唤起手机APP,如果有就唤起,如果没有就跳到下载页。
查看>>
Java中File类如何扫描磁盘所有文件包括子目录及子目录文件
查看>>
VC++ 限制窗口的大小范围的方法
查看>>
结对开发-返回一个整数数组中最大子数组的和(首尾相接版)
查看>>
meanshift-聚类
查看>>
不要if else的编程
查看>>
rn.ShowDialog() == DialogResult.OK
查看>>
20160519
查看>>
SCU 3132(博弈)
查看>>
正则表达式
查看>>
delete archivelog all 无法彻底删除归档日志?
查看>>
Redis五大数据类型
查看>>
大型分布式网站架构技术总结
查看>>
矩阵求导与投影梯度相关问题
查看>>
SVN
查看>>
C语言编程写的一个http下载程序(王德仙)2012-04-08
查看>>
CCF201409-3 字符串匹配(100分)
查看>>
UVALive2203 UVa10042 Smith Numbers【质因数分解+素数判定+数位之和】
查看>>
Project Euler Problem 9: Special Pythagorean triplet
查看>>
HDU5701 中位数计数【中位数】
查看>>