javascript - Fabric.js 根据左上角位置循环对象

标签 javascript fabricjs

嗨,我有一个 Canvas ,放置了多个图像,我想从左上角位置一直向下循环浏览图像。

  Lets say i have 10 images placed on canvas 
    [1] [2] [3] [4] [5]
    [6] [7] [8] [9] [10]

  I have changed position of some of the images 
    [9] [5] [3] [4] [2]
    [6] [7] [8] [10] [1]
  i want to loop in the similar order based on position from top left 

抱歉,我无法创建/显示示例

现在,fabric.js 中的 foreach 考虑基于添加的对象并基于 z-index(如果我可能是正确的)。

有什么方法可以根据左上角的位置循环遍历对象。

任何帮助都会很棒。

最佳答案

最直接的看似技术将涉及大量使用 fabric.Object 类的 intersectsWithRect 方法。它以两个点作为参数,组成一个正方形。

对 Canvas 上的所有对象使用此方法,您可以看到哪些对象与此正方形相交。

我的建议是将整个 Canvas 分成这些正方形的网格,然后循环遍历每个正方形,从左上角的正方形开始一直到右下角的正方形。您肯定需要使用两个 for 循环之类的东西来测试每个方 block 。

测试每个正方形时,如果您发现 Canvas 上的某个对象确实与该正方形相交,请将其添加到结果数组中。

最终,当你到达网格的末尾时,你的数组就完成了!

您可能遇到的问题是每个方 block 有多大。正方形越小,您的列表就越准确,但完成所有过程的速度就越慢。

正方形越大,精确度可能越低,但循环会完成得更快。

我提到准确性只是因为您能够在 Canvas 上堆叠对象,并且此技术只会告诉您对象是否与这两个点创建的区域相交。它不会告诉您它们在 Canvas 网格的“单元格”内部的顺序。

希望这有帮助!

关于javascript - Fabric.js 根据左上角位置循环对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26930340/

相关文章:

javascript - 从 URL 添加 SVG 渲染黑色图像

javascript - 试图将 javascript 注入(inject)我的页面

JavaScript:字符串 '//ns1:RunLocatorResponse' 在 Chrome 中包含无法解析的命名空间 - 为什么?

javascript - meteor.js 应用程序在本地主机上正常运行,但不在服务器上运行

FabricJS 动画路径

javascript - 使用 FabricJS 进行像素操作

javascript - transparant 360图像显示黑色

javascript - 如何在不支持的浏览器上正确模拟 requestAnimationFrame?

javascript - 如何添加一组保持分组的单独对象?

javascript - 图像只占用盒子内的小空间