本文簡介

點贊 + 關註 + 收藏 = 學會了

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" width="400" 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" width="400" 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" width="400" 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 的話，是可以進行操作的。

總結

1. 將 interactive 設置為 false：可操作（移動、旋轉、縮放等），但看不見控制角和控制邊。
2. 將元素的 hasControls 和 hasBorders 設置成 false ：可移動，但不能旋轉和縮放，同時看不見控制角和控制邊。
3. 使用 StaticCanvas 創建畫布：元素無法被選中，也無法移動、選中、縮放等操作。

綜上所述，在日常開發中，canvas.interactive 真的好像沒啥用耶（我還沒想到有什麼應用場景）。

代碼倉庫

⭐Fabric.js 修改畫布交互方式

推薦閱讀