摘要：項目里需要做一個圖片標注工具，就是在一張底圖上繪制特定的圖形，連線，或者標注長度。這樣看起來，老舊的就顯得很可愛了，特別是它還直接支持鼠標拖拽縮放旋轉矢量圖對象。最后無奈，直接在最外層的里加標簽引用，終于成功加載。

項目里需要做一個圖片標注工具，就是在一張底圖上繪制特定的圖形，連線，或者標注長度。如下圖所示

核心需求如下：

瀏覽器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里加