Question

在拉斐尔，如果你将.toFront()或.toBack()应用于一组，它会做两件事：

预期行为：该集合中的所有元素都会转到堆叠顺序的前面或后面。
意外行为：

元素的顺序更改

JSBin demo

单击演示中的文本按钮，注意圈中的顺序如何反转，以及在半透明矩形后面和前面移动的圆圈组。

如果.insertBefore() or .insertAfter() are used将对象移动到前面和后面，同样的事情会发生（非常不同）。

我的问题是：如何将多个Raphael元素.toFront()或.toBack()一起发送，维护之间的堆叠顺序这些元素？

我理解为什么这种情况发生了：Raphael集合基本上只是修改过的数组，而Raphael只是偶然地将.toFront()或.toBack()依次应用于集合中的每个元素，因此集合中元素内的结果顺序取决于Raphael选择循环遍历元素数组的顺序。此顺序似乎是元素被推送到数组的顺序 - 而不是元素的堆叠顺序。

我不知道该怎么办。如何在保持元素之间的顺序的同时推送一系列Raphael对象.toFront()或.toBack()？

不幸的是IE8支持是不可协商的所以理想情况下答案应该适用于Raphael的VML模式以及SVG模式。请记住，Raphael不使用SVG <g>组（我相信这是因为没有干净的VML等价物），所以the suggestion here won't work。

一个应该有效的想法，但我找不到一个干净的实现方法：也许我们可以在应用.toFront()或.toBack()之前按元素的堆叠顺序对Raphael集阵列进行排序？然后可以定义修改的.setToFront()和.setToBack()函数，这些函数可以克隆集合数组，按照堆栈顺序升序或降序对克隆进行排序，具体取决于它是从前面还是后面，然后应用{{每个元素1}}或.toFront()？但是，我无法找到任何以堆叠顺序获取对象位置的简洁方法。

Answer 1

由于您知道Raphael正在将set视为一个数组，因此您意识到必须完成一些解决方法。

所以我在你的代码中添加了一个小函数，你可以调用它来代替toFront()。
THIS 接缝可以按照您的要求进行操作，非常简单明了：

function correctOrder()
{
   for ( var i = 0; i < set1.length; i++)
   {
      var temp_circ = set1.pop();
      temp_circ.toFront();
      set1.splice(0, 0, temp_circ);
   }
}

发送Raphael设置为Front（）;或toBack（）;不改变集合内的顺序

JSBin demo

1 个答案: