Fabric.js 监听元素是否相交重叠

目录

• 正文
• 动手试试看
• 代码仓库

正文

fabric.js 提供了一个方法可以检查对象是否与另一个对象相交（也可以叫元素是否重叠）。

这个方法叫 intersectsWithObject()。

本文主要想提一下 fabric.js 存在这么一个方便的方法。

检测元素是否相交有什么用呢？

这个功能在日常开发中其实很实用，在它的帮助下我们可以实现“防止对象碰撞”、“对象自动对齐贴合”等功能。

动手试试看

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

• 创建画布
• 创建矩形、圆形、三角形元素，并将它们添加到画布里
• 使用 canvas.on('object:moving') 监听图形元素移动
• 元素移动的过程中不断遍历画布当前所有元素，如果正在移动的元素和其他图形相交了，就在控制台输出被相交的元素的类型。

在“第4点”里，使用了 intersectsWithObject() 方法判断元素是否相交，如果相交就会返回 true。

详情请看下方代码及注释。

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

其实 intersectsWithObject() 可以传入3个参数，用法如下：

intersectsWithObject(other, absoluteopt, calculateopt)

• other: Object类型，要检测的对象
• absoluteopt: Boolean类型，使用不带 viewportTransform 的坐标
• calculateopt: Boolean类型，使用当前位置的坐标代替

代码仓库

⭐ intersectsWithObject检测对象是否相交

以上就是Fabric.js 监听元素是否相交重叠的详细内容，更多关于Fabric.js 监听元素的资料请关注脚本之家其它相关文章！