指令匯總:
M = moveto(M X,Y) : 將畫(huà)筆移動(dòng)到指定的坐標(biāo)位置
L = lineto(L X,Y) : 畫(huà)直線到指定的坐標(biāo)位置
H = horizontal lineto(H X) : 畫(huà)水平線到指定的X坐標(biāo)位置
V = vertical lineto(V Y) : 畫(huà)垂直線到指定的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)閉路徑
M退渗、L颓芭、V
繪制直線的指令是“L”,從當(dāng)前點(diǎn)劃線到給定點(diǎn)怪嫌。 “L”之后的參數(shù)是一個(gè)點(diǎn)坐標(biāo),如“L 200 400”澈圈。 如果畫(huà)水平線或垂直線琉用,可以使用“H”和“V”指令落包,后面的參數(shù)是x(H指令)或y坐標(biāo)(V指令)。
M 起點(diǎn)X,起點(diǎn)Y L(直線)終點(diǎn)X鸭栖,終點(diǎn)Y H(水平線)終點(diǎn)X V(垂直線)終點(diǎn)Y
注意:
'M'處理時(shí)歌馍,只是移動(dòng)了畫(huà)筆, 沒(méi)有畫(huà)任何東西晕鹊。
圖片來(lái)源:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2014/1129/2079.html
A指令-畫(huà)弧線
寫(xiě)在最前面-這節(jié)里面都是我自己實(shí)踐-查閱-瞎猜松却,因?yàn)檫@個(gè)指令就是一個(gè)坑暴浦,往往你試過(guò)幾次之后總能把你之前的理解徹底弄崩潰,問(wèn)了幾個(gè)大神大家紛紛表示基本不會(huì)用這個(gè)指令畫(huà)復(fù)雜的橢圓晓锻,所以大家就當(dāng)了解一下就好歌焦,當(dāng)然有哪位大神知道他的繪圖機(jī)制的,趕緊過(guò)來(lái)帶我飛砚哆!
這個(gè)參數(shù)比較復(fù)雜独撇,一共有7個(gè)參數(shù),理解起來(lái)必須根據(jù)圖片來(lái)一起理解T晁7紫场!
(A rx ry rotate large_arc_flag x y)
原文:
A rx ry rotate large_arc_flag sweep_flag x y = Draw a elliptical arc from the current point to x,y. The ellipse has radius rx ry (major/minor axis), rotated by rotate (in degrees, clockwise.). The large_arc_flag and sweep_flag should be 1 or 0, they control which section of the ellipse to use.
先看一個(gè)示意圖:
看完圖片战转,再去理解下面七個(gè)參數(shù)可能會(huì)相對(duì)舒服點(diǎn):
- rx - 橢圓在x軸上的長(zhǎng)关炼、短半軸
- ry -橢圓在y軸上的短、長(zhǎng)半軸
- rotate -圖中沒(méi)展示匣吊,最蛋疼的參數(shù)儒拂,下文會(huì)講解,先知道他就是橢圓跟X正半軸的夾角色鸳,格式是360°度數(shù)
- large-arc-flag - 因?yàn)閮牲c(diǎn)間的弧線用橢圓來(lái)看社痛,它有一個(gè)大弧線和小弧線,當(dāng)large-arc-flag=0時(shí)命雀,會(huì)去選擇小弧線蒜哀,具體可以看一下下圖[3]。
- sweep-flag - 就是畫(huà)弧線是順時(shí)針還是逆時(shí)針吏砂,這個(gè)也看圖[3]去理解撵儿,因?yàn)樗枰鷏arge-arc-flag配合去看。
- x狐血,y - 終點(diǎn)坐標(biāo)(一般A指令前面都會(huì)有M指令去判定起點(diǎn)(x1淀歇,y1)不然的話就是上一條指令到哪就是哪,比如說(shuō)“L 30,20 A~~ ”匈织,那A指令的起點(diǎn)就是(30,20)p)
接下來(lái)看一下 large-arc-flag 和 sweep-flag:
再說(shuō)一說(shuō)浪默,rotate 也看一下圖片:
總結(jié):
每個(gè)參數(shù)解釋了很多,差不多都看煩了把缀匕?最后總結(jié)一下怎么取理解這個(gè)A指令纳决,純屬個(gè)人自己的理解:
如指令(M 20,30 A 25,10 30 0,1 45,30)
- 機(jī)器調(diào)用到A指令后乡小,先去獲取rx阔加,ry,獲得一個(gè)基本的橢圓满钟。
- 然后獲得rotate值將基本的橢圓旋轉(zhuǎn)30°胜榔。
- 接著獲取起點(diǎn)和終點(diǎn)坐標(biāo)胳喷。
- 將橢圓平移去適配起點(diǎn)和終點(diǎn),這樣的話就得到了四條弧線苗分,最后通過(guò)large-arc-flag 厌蔽、sweep-flag去選定到底是哪條。
以上就是我如何去理解一個(gè)A指令摔癣,具體的代碼怎么實(shí)現(xiàn)小弟無(wú)能為力了奴饮,小弟只能試著去了解,但事要問(wèn)為什么择浊?回答不出來(lái)……
最后說(shuō)一下兩個(gè)特殊的情況
- 起點(diǎn)和終點(diǎn)剛好在橢圓長(zhǎng)軸上戴卜。
- 就是起點(diǎn)和終點(diǎn)不可能在rx,ry琢岩,rotate確定的橢圓上投剥。
第一種情況的話,large-arc-flag 無(wú)效担孔,想想也知道江锨,因?yàn)殚L(zhǎng)度都一樣了嘛。第二種情況就比較超過(guò)上述的理解了糕篇,這也是我寫(xiě)這篇文章的初衷啄育,就是你會(huì)發(fā)現(xiàn)這樣子的話,我前面巴拉巴拉一大堆就是廢話了拌消,我只能說(shuō)事實(shí)是遇到這種情況橢圓會(huì)被放大挑豌,這個(gè)指令肯定會(huì)畫(huà)出來(lái)一個(gè)弧線的,但是這個(gè)弧線就不是在由rx墩崩、ry確定的橢圓的上了氓英,那它是怎么被放大的?放大多少倍鹦筹?不敢說(shuō)铝阐,因?yàn)闆](méi)看到代碼我也不清楚里面的機(jī)制,有興趣的盛龄,看一下下面幾個(gè)圖片:
然后這只是最舒服的“意外情況”饰迹,如果是斜著呢?算了余舶,這個(gè)坑點(diǎn)到為止吧 - -
這篇博客講的很詳細(xì):https://medium.com/@DcardLab/%E7%B0%A1%E5%96%AE%E7%9C%8B%E6%87%82-vectordrawable-svg-path-data-fe0fb42a7f43
這是SVG文檔:http://xahlee.info/js/svg_path_ellipse_arc.html
這是Eclipse(橢圓)文檔:http://xahlee.info/SpecialPlaneCurves_dir/Ellipse_dir/ellipse.html
使用原則
① 坐標(biāo)軸為以(0,0)為中心,X軸水平向右锹淌,Y軸水平向下匿值。
② 所有指令大小寫(xiě)均可。大寫(xiě)絕對(duì)定位赂摆,參照全局坐標(biāo)系挟憔;小寫(xiě)相對(duì)定位钟些,參照父容器坐標(biāo)系。
如指令(M 50,50 L 90,50 L 90,90)它和 (M 50,50 l 40,0 l 0,40)绊谭、(M 50,50 l 40,0 L 90,90)政恍、
(M 50,50 L 90,50 l 40,0)是等價(jià)的。詳細(xì)解剖原指令(M 50,50 L 90,50 L 90,90)的每一個(gè)步驟是:
- 先移到點(diǎn)(50,50)p (p代表全局坐標(biāo)系)
- 然后畫(huà)一條直線到(90,50)p (相當(dāng)于 l 40,0 因?yàn)榇藭r(shí)相對(duì)坐標(biāo)原點(diǎn)是點(diǎn)(50,50)p)
- 然后畫(huà)一條直線到(90,50)p (相當(dāng)于 l 0,40 因?yàn)榇藭r(shí)相對(duì)坐標(biāo)原點(diǎn)是點(diǎn)(90,50)p)
- 也就是說(shuō)當(dāng)移動(dòng)了畫(huà)筆后达传,相對(duì)坐標(biāo)系就改變了篙耗。
③ 同一指令出現(xiàn)多次可以只用一個(gè),如(M 50,50 L 90,50 L 90,90)=(M 50,50 L 90,50 90,90)。
④ 指令和數(shù)據(jù)間的空格可以省略宪赶。(不建議宗弯,閱讀麻煩,其實(shí)逗號(hào)有時(shí)候也可以用空格代替如繪制弧線的時(shí)候 經(jīng)常是 a 5,10 0 0,1 20,0 搂妻,它其實(shí)跟 a 5,10,0,0,1,20,0 是一樣的)蒙保。
異常提醒
指令大小寫(xiě)在繪制靜態(tài)VectorDrawable沒(méi)什么限制,你大小寫(xiě)混搭著用都沒(méi)關(guān)系欲主,但是在animator繪制動(dòng)畫(huà)的時(shí)候邓厕,valueFrom中的樣式要跟valueTo一樣,即如下代碼是行不通的:
改成valueFrom =( M 扁瓢, l 详恼,L );valueTo = (M 涤妒,l 单雾,L)即可