1钝凶、SVG概述
SVG(Scalable Vector Graphics) : 可縮放矢量圖形,使用 XML 格式定義圖像仪芒。
優(yōu)勢:
SVG是矢量圖形文件,無限放大不失真耕陷。
可以用CSS樣式來自由定義圖標(biāo)顏色掂名,比如顏色/尺寸等效果。
所有的SVG可以全部在一個文件中哟沫,節(jié)省HTTP請求 饺蔑。
使用SMIL、CSS或者是javascript可以制作充滿靈性的交互動畫和濾鏡效果嗜诀。
由于SVG也是一種XML節(jié)點(diǎn)的文件膀钠,所以可以使用gzip的方式把文件壓縮到很小。
缺點(diǎn):對CPU消耗比較裹虫,圖片越大肿嘲,繪制占用的CUP資源越多。官方建議不超過200dp*200dp
2筑公、SVG圖片使用
Android studio提供了svg圖片格式轉(zhuǎn)換成代碼的工具:
看到生成的一堆代碼雳窟,是不是一臉懵逼,特別是pathData命令匣屡,一堆字母數(shù)字小數(shù)點(diǎn)封救,不用管它,只要了解個大概捣作,就知道怎么玩了誉结,反正他是生成的,我們只追求高效的工作效率券躁,但是至少需要知道大概意思惩坑,不要一直懵逼下去:
Path指令解析如下所示:
1、支持的指令:
M = moveto(M X,Y) :將畫筆移動到指定的坐標(biāo)位置
L = lineto(L X,Y) :畫直線到指定的坐標(biāo)位置
H = horizontal lineto(H X):畫水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y):畫垂直線到指定的Y坐標(biāo)位置
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):弧線
Z = closepath():關(guān)閉路徑
注意:如果還有不了解貝塞爾曲線的也拜,可以專門去學(xué)習(xí)一下以舒,我這里不啰嗦。
2慢哈、使用原則:
坐標(biāo)軸為以(0,0)為中心蔓钟,X軸水平向右,Y軸水平向下
所有指令大小寫均可卵贱。大寫絕對定位滥沫,參照全局坐標(biāo)系侣集;小寫相對定位,參照父容器坐標(biāo)系
指令和數(shù)據(jù)間的空格可以省略
同一指令出現(xiàn)多次可以只用一個