亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Fabric.js?監(jiān)聽元素是否相交重疊

 更新時(shí)間：2023年02月14日 08:54:18   作者：德育處主任  
這篇文章主要為大家介紹了Fabric.js?監(jiān)聽元素是否相交重疊的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

正文

fabric.js 提供了一個(gè)方法可以檢查對(duì)象是否與另一個(gè)對(duì)象相交（也可以叫元素是否重疊）。

這個(gè)方法叫 intersectsWithObject()。

本文主要想提一下 fabric.js 存在這么一個(gè)方便的方法。

檢測(cè)元素是否相交有什么用呢？

這個(gè)功能在日常開發(fā)中其實(shí)很實(shí)用，在它的幫助下我們可以實(shí)現(xiàn)“防止對(duì)象碰撞”、“對(duì)象自動(dòng)對(duì)齊貼合”等功能。

動(dòng)手試試看

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

  • 創(chuàng)建畫布
  • 創(chuàng)建矩形、圓形、三角形元素，并將它們添加到畫布里
  • 使用 canvas.on('object:moving') 監(jiān)聽圖形元素移動(dòng)
  • 元素移動(dòng)的過程中不斷遍歷畫布當(dāng)前所有元素，如果正在移動(dòng)的元素和其他圖形相交了，就在控制臺(tái)輸出被相交的元素的類型。

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

詳情請(qǐng)看下方代碼及注釋。

<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'
  })
  // 三角形 - 天藍(lán)色
  let triangle = new fabric.Triangle({
    width: 100,
    height: 100,
    left: 300,
    top: 200,
    fill: 'skyblue'
  })
  // 將矩形、圓形、三角形添加到畫布中
  canvas.add(rect, circle, triangle)
  // 監(jiān)聽對(duì)象移動(dòng)
  canvas.on('object:moving', function(options) {
    // 通過 canvas.forEachObject 遍歷畫布上所有元素
    canvas.forEachObject(function(obj) {
      // 排除當(dāng)前正在移動(dòng)的元素
      if (obj === options.target) return
      // 檢查對(duì)象是否與另一個(gè)對(duì)象相交
      if (options.target.intersectsWithObject(obj)) {
        // 輸出當(dāng)前被接觸的對(duì)象類型
        console.log(obj.type)
      }
    })
  })
</script>

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

其實(shí) intersectsWithObject() 可以傳入3個(gè)參數(shù)，用法如下：

intersectsWithObject(other, absoluteopt, calculateopt)
  • other: Object類型，要檢測(cè)的對(duì)象
  • absoluteopt: Boolean類型，使用不帶 viewportTransform 的坐標(biāo)
  • calculateopt: Boolean類型，使用當(dāng)前位置的坐標(biāo)代替

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

? intersectsWithObject檢測(cè)對(duì)象是否相交

以上就是Fabric.js 監(jiān)聽元素是否相交重疊的詳細(xì)內(nèi)容，更多關(guān)于Fabric.js 監(jiān)聽元素的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

相關(guān)文章

最新評(píng)論