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

 更新时间:2023年02月14日 08:54:18   作者:德育处主任  
这篇文章主要为大家介绍了Fabric.js 监听元素是否相交重叠的方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪

正文

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 监听元素的资料请关注脚本之家其它相关文章!

相关文章

  • 关于前端JavaScript ES6详情

    关于前端JavaScript ES6详情

    这篇文章主要介绍了关于前端JavaScript中的ES6,ES6是一个泛指,含义是 5.1 版以后的 JavaScript 的下一代标准,涵盖了 ES2015、ES2016、ES2017语法标准,ES6新特性目前只有在一些较新版本浏览器得到支持,老版本浏览器里面运行我们需要将ES6转换为ES5
    2021-10-10
  • 关于js typeof 与 instanceof 判断数据类型区别及开发使用

    关于js typeof 与 instanceof 判断数据类型区别及开发使用

    我们经常会遇到判断一个变量的数据类型或该变量是否为空值的情况,你是如何去选择判断类型操作符的?本文来记录一下我们开发人员必须掌握关于 typeof 和 instanceof 的知识点及在开发中的使用建议,同时在面试过程中也经常会遇到这样的问题,需要的朋友可参考下文章内容
    2021-10-10
  • JS ES新特性 模板字符串

    JS ES新特性 模板字符串

    这篇文章主要介绍了JS ES新特性模板字符串,模板字符串即Template String是增强版的字符串,使用反引号(```)来代替谱通字符串中的用双引号和单引号,更多相关介绍,需要的朋友可以参考下面文章的详细内容
    2021-12-12
  • 微信小程序 教程之条件渲染

    微信小程序 教程之条件渲染

    这篇文章主要介绍了微信小程序 条件渲染的相关资料,并附简单实例代码,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 石头剪刀布实例代码

    微信小程序 石头剪刀布实例代码

    这篇文章主要介绍了微信小程序 石头剪刀布实例代码的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 封装http请求实例详解

    微信小程序 封装http请求实例详解

    这篇文章主要介绍了微信小程序 封装http请求实例详解的相关资料,需要的朋友可以参考下
    2017-01-01
  • 微信小程序 wx:for的使用实例详解

    微信小程序 wx:for的使用实例详解

    这篇文章主要介绍了微信小程序 wx:for的使用实例详解的相关资料,需要的朋友可以参考下
    2017-04-04
  • 微信小程序 教程之注册页面

    微信小程序 教程之注册页面

    这篇文章主要介绍了微信小程序 注册页面的相关资料,需要的朋友可以参考下
    2016-10-10
  • 微信小程序 生命周期详解

    微信小程序 生命周期详解

    这篇文章主要介绍了微信小程序 生命周期的相关资料,创建、到开始、暂停、唤起、停止、卸载等过程,需要的朋友可以参考下
    2016-10-10
  • JavaScript 定时器详情

    JavaScript 定时器详情

    这篇文章主要介绍了JavaScript 定时器,在JavaScript中定时器有两个 setInterval() 与 setTimeout() 分别还有取消定时器的方法,下面来看看文章的详细介绍
    2021-11-11

最新评论