Fabric.js?監(jiān)聽元素是否相交重疊
更新時間：2023年02月14日 08:54:18 作者：德育處主任
這篇文章主要為大家介紹了Fabric.js?監(jiān)聽元素是否相交重疊的方案示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
正文
fabric.js 提供了一個方法可以檢查對象是否與另一個對象相交（也可以叫元素是否重疊）。
這個方法叫 intersectsWithObject()。
本文主要想提一下 fabric.js 存在這么一個方便的方法。
檢測元素是否相交有什么用呢？
這個功能在日常開發(fā)中其實很實用，在它的幫助下我們可以實現(xiàn)“防止對象碰撞”、“對象自動對齊貼合”等功能。
動手試試看
為了演示 intersectsWithObject() ，我打算做如下操作：
- 創(chuàng)建畫布
- 創(chuàng)建矩形、圓形、三角形元素，并將它們添加到畫布里
- 使用
canvas.on('object:moving')監(jiān)聽圖形元素移動 - 元素移動的過程中不斷遍歷畫布當(dāng)前所有元素，如果正在移動的元素和其他圖形相交了，就在控制臺輸出被相交的元素的類型。
在“第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)
// 監(jiān)聽對象移動
canvas.on('object:moving', function(options) {
// 通過 canvas.forEachObject 遍歷畫布上所有元素
canvas.forEachObject(function(obj) {
// 排除當(dāng)前正在移動的元素
if (obj === options.target) return
// 檢查對象是否與另一個對象相交
if (options.target.intersectsWithObject(obj)) {
// 輸出當(dāng)前被接觸的對象類型
console.log(obj.type)
}
})
})
</script>
以上就是 intersectsWithObject() 的基本用法。
其實 intersectsWithObject() 可以傳入3個參數(shù)，用法如下：
intersectsWithObject(other, absoluteopt, calculateopt)
other: Object類型，要檢測的對象absoluteopt: Boolean類型，使用不帶viewportTransform的坐標(biāo)calculateopt: Boolean類型，使用當(dāng)前位置的坐標(biāo)代替
代碼倉庫
? intersectsWithObject檢測對象是否相交
以上就是Fabric.js 監(jiān)聽元素是否相交重疊的詳細內(nèi)容，更多關(guān)于Fabric.js 監(jiān)聽元素的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
JavaScript深拷貝方法structuredClone使用
這篇文章主要為大家介紹了JavaScript深拷貝方法structuredClone使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-02-02
這篇文章主要介紹了java Spring事務(wù)回滾的相關(guān)資料,需要的朋友可以參考下2016-10-10
umi插件開發(fā)仿dumi項目實現(xiàn)markdown文件轉(zhuǎn)為頁面
這篇文章主要介紹了umi插件開發(fā)仿dumi項目實現(xiàn)markdown文件轉(zhuǎn)為頁面方法詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
javascript使用btoa和atob來進行Base64轉(zhuǎn)碼和解碼
javascript原生的api本來就支持,Base64,但是由于之前的javascript局限性，導(dǎo)致Base64基本中看不中用。當(dāng)前html5標(biāo)準(zhǔn)正式化之際，Base64將有較大的轉(zhuǎn)型空間,對于Html5 Api中出現(xiàn)的如FileReader Api, 拖拽上傳,甚至是Canvas,Video截圖都可以實現(xiàn)2017-03-03
TypeScript新語法之infer?extends示例詳解
這篇文章主要為大家介紹了TypeScript新語法之infer?extends示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了js展示百度地圖及添加標(biāo)注實現(xiàn)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2023-08-08
lodash內(nèi)部方法getData和setData實例解析
本篇章我們將了解lodash里內(nèi)部關(guān)于Data的操作方法，重點關(guān)注getData、setData兩個內(nèi)部方法，同時由實現(xiàn)上引申其他內(nèi)部封裝的方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家介紹了async-validator實現(xiàn)原理源碼解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-01-01
這篇文章主要介紹了微信小程序--組件（swiper）詳細介紹的相關(guān)資料,需要的朋友可以參考下2017-06-06
這篇文章主要介紹了微信小程序progress組件詳細介紹的相關(guān)資料,需要的朋友可以參考下2016-09-09