theme: smartblue
我正在參加「掘金·啟航計劃」
本文簡介
戴尬猴，我是德育處主任
這次要介紹的一個demo是"拖拽多邊形定點修改多邊形形狀"。
其實 Fabric.js 官網(wǎng)也有這個demo：Fabric.js demos · Custom controls, polygon 。但這個demo可能對于剛接觸 Fabric.js 的工友來說有點過于復(fù)雜，所以本文就把該demo進一步簡化，簡化到老奶奶也能看得懂的！
先看看效果(錄制gif的工具有點小瑕疵，導(dǎo)致多邊形紅色填充色“被弄臟了”)：
完整代碼在文末。
原理分析
要實現(xiàn)“拖拽多邊形定點修改多邊形形狀”這個功能有很多方案，比如 Fabric.js demos · Custom controls, polygon 中，通過自定義控件來實現(xiàn)。又或者用 《Fabric.js 講解官方demo：Stickman》 文章中的方法去實現(xiàn)。
使用 Fabric.js 官網(wǎng)給出的demo會更優(yōu)雅，推薦在工作中使用。但如果你看了官網(wǎng)的demo還不太懂怎么創(chuàng)建自定義控件，可以看看 《Fabric.js 自定義控件》 這篇文章。
本文使用對學(xué)習(xí)階段來說更容易理解的方案去實現(xiàn)上述功能。
先列出所有步驟：
- 綁定頁面上指定畫布
new fabric.Canvas() - 創(chuàng)建多邊形，且禁止用戶直接操作多邊形
new fabric.Polygon() - 在多邊形的每個頂點上創(chuàng)建小圓形(當(dāng)做修改多邊形時的控制器)
new fabric.Circle() - 監(jiān)聽元素移動，如果移動的是小圓形，那么多邊形對應(yīng)的頂點也跟著移動
canvas.on('object:moving', callback) - 刷新畫布
canvas.renderAll()
以上就是需要做的所有操作了。
多邊形的配置
我們創(chuàng)建出來的多邊形是禁止用戶直接操作的，想要修改多邊形形狀只能通過輔助的小圓來修改。
要禁止多邊形的操作可以設(shè)置多邊形以下兩個屬性為 false：
js selectable: false, // 禁止選中 evented: false, // 當(dāng)設(shè)置為“false”時，對象不能成為事件的目標(biāo)。所有事件都會通過它傳播。
還要將多邊形的 objectCaching 設(shè)置為 false，只有這樣做了，多邊形才不會有緩存。
圓形的配置
創(chuàng)建圓形時，需要將其 originX 和 originY 設(shè)置為 center ，這樣圓形的圓心就是它的 top 和 left 了。這個做法和 《Fabric.js 講解官方demo：Stickman》 是一樣的。
除此之外還需要將 hasControls 和 hasBorders 設(shè)置為 false ，這樣做完圓形就不會顯示控制角和控制邊了，看上去會更像是多邊形的控件。
最后還需要給每個圓形添加一個自定義屬性，當(dāng)圓形被移動時就可以用這個自定義屬性判斷當(dāng)前移動的是哪個圓。
動手實現(xiàn)
如果理解了上面的講解就看看下面的代碼吧(都有備注了，應(yīng)該比較好理解)
```html
```
代碼倉庫
? 修改多邊形形狀
推薦閱讀
??《Fabric.js 從入門到膨脹》
??《Fabric.js 講解官方demo：Stickman》
??《Fabric.js 激活輸入框》
??《Fabric.js 元素被選中時保持原有層級》
??《Fabric.js 精簡輸出的JSON》文章來源：http://www.zghlxwxcb.cn/news/detail-438076.html
??《Fabric.js 上標(biāo)和下標(biāo)的使用偏方》文章來源地址http://www.zghlxwxcb.cn/news/detail-438076.html
到了這里，關(guān)于Fabric.js 拖拽頂點修改多邊形形狀的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
