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

項(xiàng)目里需要做一個(gè)圖片標(biāo)注工具，就是在一張底圖上繪制特定的圖形，連線，或者標(biāo)注長度。如下圖所示

核心需求如下：

瀏覽器PC端使用

繪制的點(diǎn)、線、圖形，應(yīng)該是矢量圖，可以移動、縮放和旋轉(zhuǎn)

可以定制需要的標(biāo)注工具，比如繪制坐標(biāo)軸，需要跟隨鼠標(biāo)移動

可以加載底圖

可以把繪制完成的矢量圖+底圖一起導(dǎo)出

基礎(chǔ)技術(shù)沒啥可選的，肯定是基于Canvas實(shí)現(xiàn)，關(guān)鍵是選一個(gè)好用的庫，搜索了一下，并沒有像三維引擎那樣出現(xiàn)“大一統(tǒng)”的局面（Three.js），只有幾款不太熱門的選項(xiàng)，根據(jù)github熱度粗選，剩下兩個(gè)：

Fabric.js vs Two.js

一開始因?yàn)門wo.js和Three.js命名接近，而且界面風(fēng)格更現(xiàn)代而傾向于它，但調(diào)研后發(fā)現(xiàn)，Two.js竟然完全不支持加載image，雖說是專注于矢量圖，這也有點(diǎn)過分了；而且它明顯是為了做動畫設(shè)計(jì)的，所有的example都是動畫；它還沒有自己的事件體系，借用了Backbone的。

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

不過引用Fabric的時(shí)候，出現(xiàn)了一點(diǎn)問題——我們的項(xiàng)目是基于iView的，模塊化開發(fā)，一開始也想用npm安裝，然后import的方式引用Fabric.js，誰知道引進(jìn)來以后總是出錯(cuò)；后來發(fā)現(xiàn)只要用npm管理，F(xiàn)abric就認(rèn)為自己跑在服務(wù)器端的Node.js環(huán)境中，所以需要依賴一些后端解析dom的庫——崩潰，我明明只是在瀏覽器中使用啊。Github上有人提過這個(gè)issue，建議提供前端版本的npm管理配置，但開源方好像沒有精力搞這個(gè)事兒。

最后無奈，直接在最外層的html里加