返回顶部
首页 > 资讯 > 前端开发 > JavaScript >Fabric.js 监听元素是否相交重叠
  • 441
分享到

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

Fabric.js 监听元素Fabric.js 监听元素相交重叠 2023-02-14 09:02:42 441人浏览 八月长安
摘要

目录正文动手试试看代码仓库正文 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交(也可以叫元素是否重叠)。 这个方法叫 intersectsWithObject(

正文

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 监听元素的资料请关注编程网其它相关文章!

--结束END--

本文标题: Fabric.js 监听元素是否相交重叠

本文链接: https://lsjlt.com/news/195922.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • Fabric.js 监听元素是否相交重叠
    目录正文动手试试看代码仓库正文 fabric.js 提供了一个方法可以检查对象是否与另一个对象相交(也可以叫元素是否重叠)。 这个方法叫 intersectsWithObject(...
    99+
    2023-02-14
    Fabric.js 监听元素 Fabric.js 监听元素相交重叠
  • java判断数组元素是否重复
    java判断数组元素是否重复:一、先对数组去重,然后通过判断数组长度即可判断数组元素是否重复。 public static boolean hasRepeat(Object[] args){ Set tempSet = ne...
    99+
    2020-03-26
    java
  • java怎么判断数组元素是否重复
    Java中判断数组元素是否重复可以使用以下方法:1. 使用两层循环遍历数组,比较每对元素是否相同。如果找到相同的元素,则数组中存在重...
    99+
    2023-09-22
    java
  • php怎么判断数组是否有相同的元素
    判断步骤:1、用array_unique()去除数组中的重复值,语法“array_unique(原数组)”,会返回一个去重数组;2、用count()分别获取原数组和去重数组的数组长度,并判断两个数组长度是否相等,语法“count(原数组)=...
    99+
    2022-08-19
    php数组 php
  • php 判断两个数组中是否有相同元素
    在 PHP 中判断两个数组是否有相同元素是一件很常见的事情,因为在实际的开发中,我们很难避免需要对数组进行比较。下面就来介绍几种判断两个数组是否有相同元素的方法。方法一:使用 array_intersect 函数array_intersec...
    99+
    2023-05-19
  • php如何判断数组中元素是否都相同
    这篇文章主要介绍了php如何判断数组中元素是否都相同的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇php如何判断数组中元素是否都相同文章都会有所收获,下面我们一起来看看吧。判断方法:1、去除数组中的重复值,语法...
    99+
    2023-06-30
  • Java怎么判断数组是否有重复元素
    可以使用两种方法来判断一个数组是否有重复元素。 方法一:使用双层循环遍历数组 public static boolean hasDu...
    99+
    2023-10-26
    Java
  • php怎么对比两个数组是否有相同元素
    对比方法:1、利用array_intersect_assoc()函数对比两个数组的键名和键值,语法“array_intersect_assoc($arr1,$arr2)”,会返回一个包含相同元素的交集数组;2、利用“==”运算符判断交集数组...
    99+
    2022-06-14
    php php数组
  • php如何对比两个数组是否有相同元素
    这篇文章主要介绍“php如何对比两个数组是否有相同元素”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php如何对比两个数组是否有相同元素”文章能帮助大家解决问题。对比方法:1、利用array_int...
    99+
    2023-07-02
  • php怎么判断数组中是否有重复元素
    在PHP编程中,常常会使用数组来存储和管理数据。有时候我们会需要判断一个数组中是否存在重复的元素。本文将介绍一些PHP的技巧来实现这个目的。方法一:使用array_unique()函数array_unique()函数可以用来去除数组中的重复...
    99+
    2023-05-14
  • php怎么判断数组中是否存在重复元素
    PHP是一种运用广泛的脚本语言,广泛应用于Web开发。在PHP开发中,我们经常会涉及到数组这个数据类型。而判断数组中是否存在重复的元素也是一项很重要的任务。在本文中,我们将讨论如何使用PHP判断数组中是否存在重复元素。利用array_cou...
    99+
    2023-05-14
    php php数组
  • php如何判断数组中是否存在重复元素
    这篇文章主要讲解了“php如何判断数组中是否存在重复元素”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“php如何判断数组中是否存在重复元素”吧!利用array_count_values()函...
    99+
    2023-07-05
  • Vue如何监听一个数组id是否与另一个数组id相同
    这篇文章主要介绍了Vue如何监听一个数组id是否与另一个数组id相同,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。数据list,结构为[{i...
    99+
    2024-04-02
  • javascript如何判断两个数组是否有重复的元素
    今天小编给大家分享一下javascript如何判断两个数组是否有重复的元素的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收...
    99+
    2024-04-02
  • Python怎么判断一个整数数组是否存在重复元素
    本篇内容主要讲解“Python怎么判断一个整数数组是否存在重复元素”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Python怎么判断一个整数数组是否存在重复元素”吧!问题:给定一个整数数组,你如...
    99+
    2023-06-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作