本文簡介
點贊 + 關注 + 收藏 = 學會了
fabric.js 為我們提供了很多厲害的方法，今天要搞明白的一個東西是 canvas.interactive ，
官方檔案對 canvas.interactive 的解釋是：
Indicates that canvas is interactive. This property should not be changed.
canvas.interactive 默認值是 true ，官方建議我們不要修改該值，但我偏不，
動手試試
先來看看將 interactive 設為 false 之后有什么效果，
創建一個畫布，并在上面添加一個矩形，
<canvas id="canvasBox" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox', {
interactive: false // 隱藏互動模式
})
let rect = new fabric.Rect({
top: 60,
left: 60,
width: 60,
height: 60,
fill: '#08d9d6'
})
canvas.add(rect)
</script>
從上面的效果可以看到，選中元素后并沒有出現默認的控制點，但還是可以操作元素的縮放和旋轉的（旋轉的那個操作，我是猜了大概的操作點在那個位置），
難怪官方勸大家不要修改 interactive ，確實有他的道理，
和 hasControls 、hasBorders 的區別
hasControls 和 hasBorders 需要在圖形元素上設定，
將 hasControls 設定成 false 就會取消元素選中時的控制角，
將 hasBorders 設定成 false 就會取消元素被選中時的控制邊，
<canvas id="canvasBox" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let canvas = new fabric.Canvas('canvasBox')
let rect = new fabric.Rect({
top: 60,
left: 60,
width: 60,
height: 60,
fill: '#08d9d6',
hasControls: false, // 取消控制角
hasBorders: false // 取消控制邊
})
canvas.add(rect)
</script>
從上圖的效果可以看出，將 hasControls 和 hasBorders 設定成 false 后，元素可以移動，但不能縮放和旋轉，
和 StaticCanvas 的區別
如果不希望畫布可互動，可以使用 StaticCanvas 創建一個靜態的畫布，
只要將 new fabric.Canvas 改成 new fabric.StaticCanvas 就行了，
<canvas id="canvasBox" height="400" style="border: 1px solid #ccc;"></canvas>
<script>
let canvas = new fabric.StaticCanvas('canvasBox')
let rect = new fabric.Rect({
top: 60,
left: 60,
width: 60,
height: 60,
fill: '#08d9d6'
})
canvas.add(rect)
</script>
瞧，使用了 StaticCanvas 創建的畫布，里面的元素選不中也拉不動，
而只是將 interactive 設定成 false 的話，是可以進行操作的，
總結
- 將
interactive設定為false：可操作（移動、旋轉、縮放等），但看不見控制角和控制邊， - 將元素的
hasControls和hasBorders設定成false：可移動，但不能旋轉和縮放，同時看不見控制角和控制邊， - 使用
StaticCanvas創建畫布：元素無法被選中，也無法移動、選中、縮放等操作，
綜上所述，在日常開發中，canvas.interactive 真的好像沒啥用耶（我還沒想到有什么應用場景），
代碼倉庫
?Fabric.js 修改畫布互動方式
推薦閱讀
??《Fabric.js 從入門到_ _ _ _ _ _》
??《Fabric.js 上劃線、中劃線（洗掉線）、下劃線》
??《Fabric.js 激活輸入框》
??《Fabric.js 輸出精簡的JSON》
??《Fabric.js 動態設定字號大小》
??《Fabric.js 橡皮擦的用法（包含恢復功能）》
點贊 + 關注 + 收藏 = 學會了
代碼倉庫
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/540557.html
標籤：其他