2. SVG

SVG

SVG:

Scaleable Vector Graphics 可伸缩矢量图形,这种图像格式在前端中已经使用的非常广泛了。

1. 矢量图形

SVGW3C推出的一种开放标准的文本式矢量图形描述语言,它是基于XML的、专门为网络而设计的图像格式,SVG是一种采用XML来描述二维图形的语言,所以它可以直接打开xml文件来修改和编辑。

2. 位图图像

位图图像的存储单位是图像上每一点的像素值,因而文件会比较大,像GIFJPEGPNG等都是位图图像格式。

Bitmap(位图)通过在每个像素点上存储色彩信息来表达图像,而SVG是一个绘图标准。与Bitmap对比,SVG最大的优点就是放大不会失真。而且Bitmap需要为不同分辨率设计多套图标,而矢量图则不需要。

Vector:

Android中指的是Vector Drawable,也就是Android中的矢量图,可以说Vector就是Android中的SVG实现(并不是支持全部的SVG语法,现已支持的完全足够用了)

Vector图像刚发布的时候,是只支持Android 5.0+的,自从Appcompat 23.2以后,Vector可以使用于Android 2.1以上的所有系统,只需要引用com.android.support:appcompat-v7:23.2.0以上的版本就可以了。(所谓的兼容也是个坑爹的兼容,即低版本非真实使用SVG,而是生成PNG图片)

Vector Drawable:

Android 5.0 发布的时候,Google提供了Vector的支持,即Vector Drawable类。
Vector Drawable相对于普通的Drawable来说,有以下几个好处:

  • Vector图像可以自动进行适配,不需要通过分辨率来设置不同的图片。
  • Vector图像可以大幅减少图像的体积,同样一张图,用Vector来实现,可能只有PNG的几十分之一。
  • 使用简单,很多设计工具,都可以直接导出SVG图像,从而转换成Vector图像,功能强大。
  • 不用写很多代码就可以实现非常复杂的动画 成熟、稳定、前端已经非常广泛的进行使用了。
Vector语法简介

通过使用它的Path标签,几乎可以实现SVG中的其他所有标签,虽然可能会复杂一点,但这些东西都是通过工具来完成的,所以并不用担心写起来会很复杂。
Path指令解析如下所示:

M = moveto(M x,y):将画笔移动到指定的坐标位置,相当于android Path里的moveTo()
L = lineto(L x,y): 画直线到指定的坐标位置,相当于android Path里的lineTo()
H = horizontal line(H X): 画水平线到指定的X坐标位置
V = vertical lineto(V Y):画垂直线到指定的Y坐标位置
C = curveto(C X1,Y1,X2,Y2,ENDX,ENDY):三次贝塞尔曲线
S = smooth curveto(S X2,Y2,ENDX,ENDY): 同样三次贝塞尔曲线,更平滑
Q = quadratic Belzier curve(Q,X,Y,ENDX,ENDY): 二次贝塞曲线
T = smooth quadratic Belzier curveto(T ENDX,ENDY):映射 同样二次贝塞尔曲线,更平滑
A = elliptical Arc(A,RX,RY,XROTATION,FLAG1,FLAG2,X,Y): 弧线,相当于arcTo()
Z = closepath(): 关闭路径(会自动绘制连接点和终点)

注意:关于这些语法,开发者不需要全部精通,而是能够看懂即可。

使用工具
  1. 可以使用http://editor.method.ac/生成SVG图片,然后用http://inloop.github.io/svg2android/生成Vector Drawable
  2. 使用Android Studio自带的工具生成SCGhttps://www.jianshu.com/p/d6c39f2dd5e7
静态Vector图像

1)生成图片
例如: 我们用as生成的一个图片如下:

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

    <path
        android:fillColor="#fff"
        android:pathData="M -1 -1 H 581 V 401 H -1 V -1 Z" />
    <path
        android:fillColor="url(#gridpattern)"
        android:pathData="M 0 0 H 100 V 100 H 0 V 0 Z" />
    <path
        android:fillColor="#fcfbf9"
        android:strokeColor="#000"
        android:strokeWidth="1.5"
        android:pathData="M 41.5 75.4375 H 220.5 V 198.4375 H 41.5 V 75.4375 Z" />
</vector>

解释头部的几个标签:
android:width \ android:height: 定义图片的宽高
android:viewportHeight \ android:viewportWidth: 定义图像被划分的比例大小,例如例子中的580,即把580大小的图像划分成580份,后面Path标签中的坐标,就全部使用的是这里划分后的坐标系统。
这样做有一个非常好的作用,就是将图像大小与图像分离,后面可以随意修改图像大小,而不需要修改PathData中的坐标。

2)使用图片,就当普通的图片使用就可以了。
<ImageView
    android:id="@+id/iv"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:src="@drawable/vector_image"/>

或者代码设置:

ImageView iv = (ImageView) findViewById(R.id.iv);
iv.setImageResource(R.drawable.vector_image);
iv.setBackgroundResource(R.drawable.vector_image)

如果是Button,可以设置selector(写两个SVGDrawable

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
     <item android:drawable="@drawable/selector1" android:state_pressed="true"/>
     <item android:drawable="@drawable/selector2"/>
</selector>
动态Vector

动态Vector才是Android Vector Drawable的精髓所在
animated-vector:只能5.+才能使用!!
如果是两个SVG进行动画,要注意两个SVG的节点一定要一样多(命令数要一样)

5.VectorDrawable的性能问题:
  • Bitmap的绘制效率并不一定会比Vector高,它们有一定的平衡点,当Vector比较简单时,其效率是一定比Bitmap高的,所以,为了保证Vector的高效率,Vector需要更加简单,PathData更加标准、精简,当Vector图像变得非常复杂时,就需要使用Bitmap来代替了
    Vector适用于ICONButtonImageView的图标等小的ICON,或者是需要的动画效果,由于BitmapGPU中有缓存功能,而Vector并没有,所以Vector图像不能做频繁的重绘
  • Vector图像过于复杂时,不仅仅要注意绘制效率,初始化效率也是需要考虑的重要因素
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 156,265评论 4 359
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 66,274评论 1 288
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 106,087评论 0 237
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,479评论 0 203
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 51,782评论 3 285
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,218评论 1 207
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,594评论 2 309
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,316评论 0 194
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,955评论 1 237
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,274评论 2 240
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,803评论 1 255
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,177评论 2 250
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,732评论 3 229
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,953评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,687评论 0 192
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,263评论 2 267
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,189评论 2 258

推荐阅读更多精彩内容