圖片標註工具選型

項目裏須要作一個圖片標註工具，就是在一張底圖上繪製特定的圖形，連線，或者標註長度。以下圖所示

核心需求以下：

• 瀏覽器PC端使用
• 繪製的點、線、圖形，應該是矢量圖，能夠移動、縮放和旋轉
• 能夠定製須要的標註工具，好比繪製座標軸，須要跟隨鼠標移動
• 能夠加載底圖
• 能夠把繪製完成的矢量圖+底圖一塊兒導出

基礎技術沒啥可選的，確定是基於Canvas實現，關鍵是選一個好用的庫，搜索了一下，並無像三維引擎那樣出現「大一統」的局面（Three.js），只有幾款不太熱門的選項，根據github熱度粗選，剩下兩個：

Fabric.js vs Two.js

一開始由於Two.js和Three.js命名接近，並且界面風格更現代而傾向於它，但調研後發現，Two.js居然徹底不支持加載image，雖然說是專一於矢量圖，這也有點過度了；並且它明顯是爲了作動畫設計的，全部的example都是動畫；它尚未本身的事件體系，借用了Backbone的。

這樣看起來，老舊的Fabric.js就顯得很可愛了，特別是它還直接支持鼠標拖拽、縮放、旋轉矢量圖對象。

不過引用Fabric的時候，出現了一點問題——咱們的項目是基於iView的，模塊化開發，一開始也想用npm安裝，而後import的方式引用Fabric.js，誰知道引進來之後老是出錯；後來發現只要用npm管理，Fabric就認爲本身跑在服務器端的Node.js環境中，因此須要依賴一些後端解析dom的庫——崩潰，我明明只是在瀏覽器中使用啊。Github上有人提過這個issue，建議提供前端版本的npm管理配置，但開源方好像沒有精力搞這個事兒。

最後無奈，直接在最外層的html里加<script>標籤引用，終於成功加載。