博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
vector 的用法--------------自绘资源
阅读量:5960 次
发布时间:2019-06-19

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

创建

命名 选择根元素
当然你也可以选择其他元素

属性介绍

vector 元素

name:定义该矢量图形的名字。通过名字找到这个矢量图

width,height:定义该矢量图形的固有宽高(必须的,矢量图内部的宽高intrinsic) ,与外部的宽高无关
viewportHeight,viewportWidth:定义画布(viewport)的大小,不需要指定单位。但大小可以理解为一个虚拟单位,将drawable的宽高分成多少等份,在定义path的时候所有数值都是说取drawable宽高的多少份。如viewportWidth和viewportHeight分别为32,32,在path中(16,16)便表示在drawable宽高的中间。所有控制点都必须在viewportWidth和viewportHeight内,超出的部分交不予显示。该属性为必需值
alpha:图片的不透明度
tint 定义该 drawable 的 tint 颜色。默认是没有 tint 颜色的。一般不需设置
tintMode 定义 tint 颜色的 Porter-Duff blending 模式,默认值为 src_in
autoMirrored 设置当系统为 RTL (right-to-left) 布局的时候,是否自动镜像该图片
group 元素
几个元素需要一起处理时使用,将需要处理的path放到group中。
group 主要是用来设置路径做动画的关键属性的

name 定义 group 的名字

rotation 定义该 group 的路径旋转多少度
pivotX 定义缩放和旋转该 group 时候的 X 参考点。该值相对于 vector 的 viewport 值来指定的
pivotY 定义缩放和旋转该 group 时候的 Y 参考点。该值相对于 vector 的 viewport 值来指定的
scaleX 定义 X 轴的缩放倍数
scaleY 定义 Y 轴的缩放倍数
translateX 定义移动 X 轴的位移。相对于 vector 的 viewport 值来指定的
translateY 定义移动 Y 轴的位移。相对于 vector 的 viewport 值来指定的
clip-path 元素
定义当前绘制的剪切路径。注意,clip-path 只对当前的 group 和子 group 有效

name 定义 clip path 的名字

pathData 和 android:pathData 的取值一样
path 元素

name:路径的名称。可以在其他地方来引用

fillColor:图形的填充颜色。设置该属性值后,得到的svg图形就会填充满.(画满)
strokeColor:边界的颜色。(画边框)
strokeWidth:边框的宽度
strokeAlpha:边界透明度
trimPathEnd:从开始到结束,显示百分比,0,不显示,1 显示
trimPathStart:从开始到结束,隐藏百分比,0 不隐藏,1 隐藏
trimPathOffset:设置截取范围
strokeLineCap 设置路径线帽的形状,取值为 butt, round, square. (设置线头为圆滑)
strokeLineJoin 设置路径交界处的连接方式,取值为 miter,round,bevel.
strokeMiterLimit 设置路径交叉时候,斜角的上限。当 strokeLineJoin 为 “round” 或 “bevel” 的时候,这个属性无效。为miter时,锐角相交,可能斜面会很长,不协调。所以就为交界的斜面设置上限。默认是10.意味着一个斜面的长度不应该超过线条宽度的 10 倍
pathData:定义控制点的位置。
pathData参数
所有的参数,都可以大写小写,大写表示是绝对位置。小写是相对位置

所有的值,都可以用空格来间隔开,或者用逗号间隔开

M:move to 移动绘制点, 一个坐标 (移动但不绘制)

M45,14 将绘制点移动到坐标(45,14)
m1,1 将绘制点相对于上一个绘制点移动(1,1)
L:line to 直线,一个坐标
L55,14从上一个绘制点绘制直线到坐标(55,14)
l10,0相对于上一个绘制点绘制直线(10,0)
以上两种方式现对于M45,14 而言,效果是一致的
Z:close 闭合,不要参数
C:三次贝塞尔曲线,三个坐标,前两个为贝塞尔曲线的控制点的坐标,最后一个终点的坐标。
S:同C,但比C要更平滑。
Q:二次贝塞尔曲线,两个坐标,第一个表示贝塞尔曲线的控制点坐标,第二个终点的坐标。
绘制90度圆角 M8,4 l24,0 q4,0 4,4 l0,24
T:同Q,但比q平滑。
A:ellipse 圆弧,七个参数,
(rx ry rotation big_flag sweep_flag x y)
rx ry,弧线所属椭圆的半轴的xy的长度,如果xy相等,那么就是一个圆。
rotation 旋转角度
big_flag 是否大圆 1 为 是, 0 不是
sweep_flag 是否顺时针 1 为 是, 0 不是
x y 终点坐标
H:水平画一条直线到指定位置,一个坐标
v:垂直画一条直线到指定位置 ,一个坐标
//指令的大小写分别代表着绝对定位与相对定位。绝对定位指的是这个点在drawable中的坐标,而相对定位指的是这个点相较于前一个点移动的坐标
这里抄袭个小玩意
drawable/vector_smile

animator/oa_smile

drawable/av_smile

使用

ImageView imageView = (ImageView) findViewById(R.id.image);        Animatable animatable = (Animatable) imageView.getDrawable();        animatable.start();

就是一个表情的变化图片

转载于:https://www.cnblogs.com/Im-Victor/p/10740876.html

你可能感兴趣的文章
javascript 操作DOM元素样式
查看>>
Android 内存管理 &Memory Leak & OOM 分析
查看>>
【查找算法】基于存储的查找算法(哈希查找)
查看>>
JavaWeb网上图书商城完整项目--day02-10.提交注册表单功能之页面实现
查看>>
做程序开发的你如果经常用Redis,这些问题肯定会遇到
查看>>
006android初级篇之jni数据类型映射
查看>>
org.openqa.selenium.StaleElementReferenceException
查看>>
HBase 笔记3
查看>>
Linux嵌入式GDB调试环境搭建
查看>>
java分析jvm常用指令
查看>>
【Linux】Linux 在线安装yum
查看>>
Atom 编辑器系列视频课程
查看>>
[原][osgearth]osgearthviewer读取earth文件,代码解析(earth文件读取的一帧)
查看>>
阿里百川码力APP监控 来了!
查看>>
使用dotenv管理环境变量
查看>>
温故js系列(11)-BOM
查看>>
Vuex学习
查看>>
bootstrap - navbar
查看>>
切图崽的自我修养-[ES6] 编程风格规范
查看>>
服务器迁移小记
查看>>