Angularjs 搭配 SVG!

上個禮拜我在關心一個問題! 那就是用 Angularjs 怎樣畫圖比較方便!

photo credit: 'Camera baba' aka Udit Kulshrestha via photopin cc

現在再web上畫圖不外乎幾種常用方法：

1.用SVG (向量繪圖)

2.用CSS (就像我上一篇那樣畫法)

3.用Canvas (html5的新標籤)

有些人可能會覺得為什麼要在web上畫圖而不直接用圖片就好呢?

我自己是覺得啦! 因為用圖片做一些動畫沒有上面方法方便，如果有很多變化就要很多圖片一直切換很麻煩....又很占空間效能!

另外如果想要圖片上某些位置觸發某些事件這樣的功能!

我就還要切圖片切出一個個的範圍然後針對圖片的某個範圍寫事件...這也很麻煩!

像我之前寫過一個計算機!

用一個計算機的圖片在 photoshop 中切出一堆範圍，然後在這些範圍寫 javascript 事件!

比如要算 10+25 

1是一個範圍

0是一個範圍

+是一個範圍

2是一個範圍

5是一個範圍

雖然功能也是能完成啦! 但這樣多累阿!  寫起來程式碼又很亂!

所以某些時候真的還是要用上述那三種方式畫圖會比用圖片還方便!!

也因為這原因，我就在思考這三種方式怎樣跟 Angularjs 最好搭配!!

Canvas方法因為是直接在 Canvas 標籤裡面呼叫繪圖API來畫圖，所以我感覺跟 Angularjs 搭配怪怪的! 因為沒地方可以用那些 預設的 directive 啊!  

CSS方法則是畫圖的數據資料都放在 <style></style> 裡面，但 Angularjs 又不能控制外部樣式的內容! 行內樣式硬要控制好像可以控制啦! 但應該沒人用CSS行內樣式畫圖的吧!  (那會瘋掉...

而SVG這東西其實我完全沒碰過，所以我去找了一下資料，學了一下要怎用! 後來我找到一篇文章還不錯! 

如何在 SVG 與 Canvas 之間選擇

雖然現在用Canvas來畫圖是個顯學! 

但文中也比較了一些優缺點! 用Canvas來畫圖還是有缺點的唷!

好! 回到重點!

在我研究完SVG如何使用之後!

我自己覺得 SVG 跟 Angularjs 應該可以搭配得很好!

因為SVG是用很像標籤的東西在畫圖，格式就像下面所示：

<div>
    <svg>
        <polygon></polygon>
        <polygon></polygon>
        <polygon></polygon>
    </svg>
</div>

座標、顏色等的屬性我都省略了! 但看整個結構可以發現! 它就跟我們一般的網頁標籤一樣! 所以比如我們要在某個多邊形加一個按下事件就可以這樣寫：

<div ng-controller="myController">
    <svg>
        <polygon ng-click="select()"></polygon>
        <polygon></polygon>
        <polygon></polygon>
    </svg>
</div>

所以我個人覺得啦! Angularjs 跟 SVG 搭配還挺不錯的! ( XD....

剛好今天LION大大交代我改CMS這案子的一個東西!

就是要加色碼選擇器!

我後來用SVG做了一個127色的色碼選擇器如下所示：

使用者只要 mousemove 進一個多邊形就會回傳一組16進位的色碼進去程式中!

我本來想要寫成 directive 但後來太客戶在催太趕了!

我來不及寫成 directive 所以就先寫成一般的方式!

等我有空的時候再來把它改寫成 directive! 這樣就可以多個地方重複使用囉!! ^ . ^