svg指令學(xué)習(xí)

指令匯總:

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指令)。

圖[1] - M剂陡、L狈涮、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è)示意圖:

圖[2] - 簡(jiǎn)單示意圖

看完圖片战转,再去理解下面七個(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:

圖[3] - large-arc-flag 和 sweep-flag

再說(shuō)一說(shuō)浪默,rotate 也看一下圖片:

圖[4] - rotate1
圖[5] - rotate2
圖[6] - rotate3

總結(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一樣,即如下代碼是行不通的:

image.png
image.png

改成valueFrom =( M 扁瓢, l 详恼,L );valueTo = (M 涤妒,l 单雾,L)即可

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市她紫,隨后出現(xiàn)的幾起案子硅堆,更是在濱河造成了極大的恐慌,老刑警劉巖贿讹,帶你破解...
    沈念sama閱讀 211,948評(píng)論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件渐逃,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡民褂,警方通過(guò)查閱死者的電腦和手機(jī)茄菊,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,371評(píng)論 3 385
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)赊堪,“玉大人面殖,你說(shuō)我怎么就攤上這事】蘖” “怎么了脊僚?”我有些...
    開(kāi)封第一講書(shū)人閱讀 157,490評(píng)論 0 348
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)遵绰。 經(jīng)常有香客問(wèn)我辽幌,道長(zhǎng)增淹,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 56,521評(píng)論 1 284
  • 正文 為了忘掉前任乌企,我火速辦了婚禮虑润,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘加酵。我一直安慰自己拳喻,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,627評(píng)論 6 386
  • 文/花漫 我一把揭開(kāi)白布虽画。 她就那樣靜靜地躺著舞蔽,像睡著了一般。 火紅的嫁衣襯著肌膚如雪码撰。 梳的紋絲不亂的頭發(fā)上渗柿,一...
    開(kāi)封第一講書(shū)人閱讀 49,842評(píng)論 1 290
  • 那天,我揣著相機(jī)與錄音脖岛,去河邊找鬼朵栖。 笑死,一個(gè)胖子當(dāng)著我的面吹牛柴梆,可吹牛的內(nèi)容都是我干的陨溅。 我是一名探鬼主播,決...
    沈念sama閱讀 38,997評(píng)論 3 408
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼绍在,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼门扇!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起偿渡,我...
    開(kāi)封第一講書(shū)人閱讀 37,741評(píng)論 0 268
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤臼寄,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后溜宽,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體吉拳,經(jīng)...
    沈念sama閱讀 44,203評(píng)論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,534評(píng)論 2 327
  • 正文 我和宋清朗相戀三年适揉,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了留攒。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,673評(píng)論 1 341
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡嫉嘀,死狀恐怖炼邀,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情剪侮,我是刑警寧澤汤善,帶...
    沈念sama閱讀 34,339評(píng)論 4 330
  • 正文 年R本政府宣布,位于F島的核電站票彪,受9級(jí)特大地震影響红淡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜降铸,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,955評(píng)論 3 313
  • 文/蒙蒙 一在旱、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧推掸,春花似錦桶蝎、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 30,770評(píng)論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至毡泻,卻和暖如春胜茧,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背仇味。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 32,000評(píng)論 1 266
  • 我被黑心中介騙來(lái)泰國(guó)打工呻顽, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人丹墨。 一個(gè)月前我還...
    沈念sama閱讀 46,394評(píng)論 2 360
  • 正文 我出身青樓廊遍,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親贩挣。 傳聞我的和親對(duì)象是個(gè)殘疾皇子喉前,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,562評(píng)論 2 349

推薦閱讀更多精彩內(nèi)容

  • ****此篇為svg的進(jìn)階介紹篇,了解更多關(guān)于svg的介紹請(qǐng)看 HTML5學(xué)習(xí)--SVG全攻略(基礎(chǔ)篇)*** *...
    nightZing閱讀 5,446評(píng)論 3 27
  • 使用方式 瀏覽器直接打開(kāi) 在HTML中使用 標(biāo)簽引用 直接在HTML中使用SVG標(biāo)簽 作為CSS背景 基本圖形和屬...
    桃花島主閱讀 1,196評(píng)論 0 0
  • 行走了很多年王财、經(jīng)歷過(guò)很多地方之后才明白卵迂,能讓人記憶深刻的不是因?yàn)槟硞€(gè)地方景色的美不勝收或壯麗無(wú)比而是在尋找美景的過(guò)...
    小可的閱微筆記閱讀 681評(píng)論 0 1
  • 從來(lái)不知道706那么難等,25搪搏,46狭握,W10來(lái)來(lái)去去五六趟了,身邊的人來(lái)了又走了疯溺,而我還呆呆的在等论颅,在等這無(wú)奈的7...
    晶晶晶晶晶晶閱讀 230評(píng)論 0 2
  • 01 婚禮的場(chǎng)景是按照我們的意愿布置的恃疯,所有的帷幔和花擺上都有貓咪的裝飾,婚宴的每張桌子上的糖盒都是貓的樣子墨闲,每位...
    白橙橙閱讀 327評(píng)論 1 1