本文簡(jiǎn)介

fabric.js 為我們提供了很多厲害的方法。今天要搞明白的一個(gè)東西是 canvas.interactive 。

官方文檔對(duì) canvas.interactive 的解釋是：

Indicates that canvas is interactive. This property should not be changed.

canvas.interactive 默認(rèn)值是 true ，官方建議我們不要修改該值，但我偏不。

動(dòng)手試試

先來(lái)看看將 interactive 設(shè)為 false 之后有什么效果。

創(chuàng)建一個(gè)畫(huà)布，并在上面添加一個(gè)矩形。

<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>

從上面的效果可以看到，選中元素后并沒(méi)有出現(xiàn)默認(rèn)的控制點(diǎn)，但還是可以操作元素的縮放和旋轉(zhuǎn)的（旋轉(zhuǎn)的那個(gè)操作，我是猜了大概的操作點(diǎn)在那個(gè)位置）。

難怪官方勸大家不要修改 interactive ，確實(shí)有他的道理。

和 hasControls 、hasBorders 的區(qū)別

hasControls 和 hasBorders 需要在圖形元素上設(shè)置。

將 hasControls 設(shè)置成 false 就會(huì)取消元素選中時(shí)的控制角。

將 hasBorders 設(shè)置成 false 就會(huì)取消元素被選中時(shí)的控制邊。

<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 設(shè)置成 false 后，元素可以移動(dòng)，但不能縮放和旋轉(zhuǎn)。

和 StaticCanvas 的區(qū)別

如果不希望畫(huà)布可交互，可以使用 StaticCanvas 創(chuàng)建一個(gè)靜態(tài)的畫(huà)布。

只要將 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 創(chuàng)建的畫(huà)布，里面的元素選不中也拉不動(dòng)。

而只是將 interactive 設(shè)置成 false 的話(huà)，是可以進(jìn)行操作的。

總結(jié)

• 將 interactive 設(shè)置為 false：可操作（移動(dòng)、旋轉(zhuǎn)、縮放等），但看不見(jiàn)控制角和控制邊。
• 將元素的 hasControls 和 hasBorders 設(shè)置成 false ：可移動(dòng)，但不能旋轉(zhuǎn)和縮放，同時(shí)看不見(jiàn)控制角和控制邊。
• 使用 StaticCanvas 創(chuàng)建畫(huà)布：元素?zé)o法被選中，也無(wú)法移動(dòng)、選中、縮放等操作。

綜上所述，在日常開(kāi)發(fā)中，canvas.interactive 真的好像沒(méi)啥用耶（我還沒(méi)想到有什么應(yīng)用場(chǎng)景）。

代碼倉(cāng)庫(kù)

?Fabric.js 修改畫(huà)布交互方式

以上就是Fabric.js 修改畫(huà)布交互方式作用詳解的詳細(xì)內(nèi)容，更多關(guān)于Fabric.js 修改畫(huà)布交互的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！