Fabric.js 監聽元素是否相交重疊

2023-02-16 06:02:04

正文

fabric.js 提供了一個方法可以檢查物件是否與另一個物件相交（也可以叫元素是否重疊）。

這個方法叫 intersectsWithObject()。

本文主要想提一下 fabric.js 存在這麼一個方便的方法。

檢測元素是否相交有什麼用呢？

這個功能在日常開發中其實很實用，在它的幫助下我們可以實現“防止物件碰撞”、“物件自動對齊貼合”等功能。

動手試試看

為了演示 intersectsWithObject() ，我打算做如下操作：

建立畫布
建立矩形、圓形、三角形元素，並將它們新增到畫布裡
使用 canvas.on('object:moving') 監聽圖形元素移動
元素移動的過程中不斷遍歷畫布當前所有元素，如果正在移動的元素和其他圖形相交了，就在控制檯輸出被相交的元素的型別。

在“第4點”裡，使用了 intersectsWithObject() 方法判斷元素是否相交，如果相交就會返回 true。

詳情請看下方程式碼及註釋。

<canvas id="c" width="500" height="500" style="border: 1px solid #ccc;"></canvas>
<script src="../js/fabric.js"></script>
<script>
  let canvas = new fabric.Canvas('c')
  // 矩形 - 亮粉色
  let rect = new fabric.Rect({
    left: 260,
    top: 110,
    width: 80,
    height: 60,
    fill: 'hotpink'
  })
  // 圓形 - 黃綠色
  let circle = new fabric.Circle({
    top: 200,
    left: 150,
    radius: 30,
    fill: 'yellowgreen'
  })
  // 三角形 - 天藍色
  let triangle = new fabric.Triangle({
    width: 100,
    height: 100,
    left: 300,
    top: 200,
    fill: 'skyblue'
  })
  // 將矩形、圓形、三角形新增到畫布中
  canvas.add(rect, circle, triangle)
  // 監聽物件移動
  canvas.on('object:moving', function(options) {
    // 通過 canvas.forEachObject 遍歷畫布上所有元素
    canvas.forEachObject(function(obj) {
      // 排除當前正在移動的元素
      if (obj === options.target) return
      // 檢查物件是否與另一個物件相交
      if (options.target.intersectsWithObject(obj)) {
        // 輸出當前被接觸的物件型別
        console.log(obj.type)
      }
    })
  })
</script>

以上就是 intersectsWithObject() 的基本用法。

其實 intersectsWithObject() 可以傳入3個引數，用法如下：

intersectsWithObject(other, absoluteopt, calculateopt)

other: Object型別，要檢測的物件
absoluteopt: Boolean型別，使用不帶 viewportTransform 的座標
calculateopt: Boolean型別，使用當前位置的座標代替

程式碼倉庫

⭐ intersectsWithObject檢測物件是否相交

以上就是Fabric.js 監聽元素是否相交重疊的詳細內容，更多關於Fabric.js 監聽元素的資料請關注it145.com其它相關文章！

Fabric.js 監聽元素是否相交重疊

目錄

正文

動手試試看

程式碼倉庫

熱門文章