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

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

核心需求如下：

瀏覽器PC端使用

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

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

可以加載底圖

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

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

Fabric.js vs Two.js

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

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

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

最后無(wú)奈，直接在最外層的html里加