javascript - 发送 Raphael set toFront();或 toBack();不改变集合内的顺序

Question

在拉斐尔，如果你申请.toFront()或.toBack()对于一个集合，它做了两件事:

• 预期行为:该集合中的所有元素都位于堆叠顺序的前面或后面。
• 意外行为:集合内元素的顺序发生变化

JSBin demo

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

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

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

<小时/>

我明白为什么会发生这种情况:Raphael 集基本上只是修改后的数组，而 Raphael 只是随意应用 .toFront()或.toBack()依次到集合中的每个元素，因此集合中元素内的结果顺序取决于拉斐尔为循环元素数组而选择的顺序。此顺序似乎是元素被推送到数组的顺序 - 而不是元素的堆叠顺序。

我不知道该怎么办。我如何推送拉斐尔对象的选择 .toFront()或.toBack()同时保持元素之间的顺序？

不幸的是，IE8 支持是不可协商的，因此理想的答案应该在 Raphael 的 VML 模式和 SVG 模式下工作。请记住 Raphael 不使用 SVG <g>组(我相信这是因为没有干净的 VML 等效项)，所以 the suggestion here won't work .

<小时/>

一个想法应该可行，但我找不到一种干净的实现方法:也许我们可以在应用 .toFront() 之前按元素的堆叠顺序对拉斐尔集数组进行排序。或.toBack() ？然后修改.setToFront()和.setToBack()可以定义函数，它可能克隆集合数组，根据堆栈顺序升序或降序对克隆进行排序，具体取决于它是在前面还是在后面，然后应用 .toFront()或.toBack()对每个元素？然而，我找不到任何干净的方法来获取对象在堆叠顺序中的位置。

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);
   }
}