最近很認真的研究 SVG 的圖形，原本是在做筆順練習改版的前置作業，結果寫了以 SVG 圖形元件為主的小遊戲 HTML5 FUN PARTDLE。初版的 PARTDLE 遇到在平板上拖曳 SVG path 繪製的國字部件，有時移動會很遲鈍的情形，也可以說是點不到部件，尤其是面積較小的部件；另外像「口」這種「中空」的形狀，有的人習慣按著中央後開始拖曳，但是因為中央空白的部分並是不屬於「口」的 path，當然就「感應」不到了。
「太小」和「中空」的 SVG 圖形元件，怎麼增加它們的「感應區」呢？
一開始我是以國字的「部件」為單位，依部件的大小，在底層加一個填滿且透明的矩形，這樣子，隨便點，部件都會被感應到。不過，針對部件大小來加入的矩形背景也有新的問題產生，像「返」的「辶」部，看起來是在字的左下角而已，如果取部件的矩形範圍，幾乎是整個字的大小了，如果又剛好是先被點選了，它右上角的小部件，可能因位於下層，就會被遮掩而無法點選。又比如像「回」，中央的小部件「口」，也可能被大的遮蔽。
[圖1] 是將字以「部件」為單位，加上「矩形」背景的結果(暫時以黃色顯示)：
 |
| [圖1] 在部件底層加上矩形背景 |
為了減少範圍較大的 path 去遮蔽較小的，第一個想法是不要使用矩形來畫背景，改用橢圓形；另外，PARTDLE 的字是用教育部筆順網的筆順資料，圖形的基本單位是「筆畫」，所以如果加背景時，改以「筆畫」為基本單位，這樣子，像「辶」部，只會在字的左下角加上背景，對字右上方其它部位的影響，就會減到最小。
[圖2] 是將字以「筆畫」為單位，加上「橢圓」背景的結果(暫時以黃色顯示)：
 |
| [圖2] 在筆畫的底層加上橢圓形背景 |
如果看靜態的圖片及前述的說明不太能理解，底下利用「啊」這個字的實際操作來體會一下差異。測試時可以試著在「口」的中央拖曳看看，加了背景，再試著拖曳看看。
請按底下四個功能鈕的其中一個，它會先載入 SVG 圖檔，接著就可以拖曳「啊」的各部件來測試感應區到底有什麼差別。
發表文章
沒有留言:
張貼留言