嗨,我有一个 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/