关于前端:Fabricjs-监听元素相交重叠

点赞 + 关注 + 珍藏 = 学会了

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

关于前端:Fabricjs-监听元素相交重叠

本文简介

入手试试看

代码仓库

举荐浏览