本文简介
点赞 + 关注 + 珍藏 = 学会了
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 喷雾笔刷 从入门到放肆》
《Fabric.js 自定义子类，创立属于本人的图形》
《Fabric.js 自定义选框款式》
《Fabric.js 元素核心缩放》
《Fabric.js 动静设置字号大小》
《Fabric.js 橡皮擦的用法（蕴含复原性能）》
本文参考了 Intersection 实例：http://fabricjs.com/intersection