為了解決筆順練習的工具可以在 iOS 中一次下載多個部件或筆畫,認真的研究了一下 SVG 圖形的語法,哈!新手上路,總是有些地方混沌不清(根本亂玩)。不過,遇到問題總是件好事,由一個點出發,挖出了不少盲點與有用的資訊。
筆順練習的筆順資料,基上會使用到的就是 SVG 中的幾個 path 的指令:
- M : MoveTo
- L : LineTo
- Q : QuadTo
- C : CubicTo
原本以為找出對應關係,就這樣簡單,頂多是加上,部件是由多個筆畫的 path 組合起來這個程序,就能完成一個 SVG 檔案中,放入多個部件的 path,使用者,要運用時,再將部件利用軟體中的「拆解」或「分解」功能來拆開就好。而前兩天在 iOS 中使用 Keynote、Pages 或是 Numbers 也是確實如此。不過,來看看 [圖1] ,當我將我的筆順練習工具製作好的 SVG 檔,插入到 LibreOffice Impress 中時,卻有不同的結果:
[圖1] LibreOffice Impress |
「雄」這個字的第一個部件,第一筆畫和第二筆畫交叉處,[圖1] 藍色箭頭和綠色箭頭是不是長得不一樣?
在 SVG 的 path 指令中有一個「Z」可以用來標示 path 結束了,[圖1] 左側的字就是沒有加上「Z」的結果,而右側的字,在每一個筆畫的指令字串最後面加上「Z」以,就正常顯示了。
這讓我想起,在使用 HTML5 的 canvas 繪圖指令時,有沒有加上 closePath 也是有差的,當初好像也卡了好久才發覺。
關於 SVG path 還可以使用哪些指令,可以參考 Mozilla 的這個線上說明:
目前筆順練習工具可以在「部件拆解」的頁面中,下載全字的部件或是筆畫 SVG 格式圖片
[圖2] 筆順練習下載 SVG 圖檔的選單 |
在 LibreOffice 或 Apple 的 Office 工具中,「部件」的話,一個字可以分解到以部件為基本單位,而「筆畫」則可以拆解到以筆畫為基本單位,依自己的需求下載不同的 SVG 圖檔。