3

在 Raphael 中，如果你应用.toFront()or.toBack()到一个集合，它会做两件事：

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

JSBin 演示

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

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

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

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

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

不幸的是，IE8 支持是不可协商的，因此理想的答案应该在 Raphael 的 VML 模式和 SVG 模式下工作。请记住，Raphael 不使用 SVG<g>组（我相信这是因为没有干净的 VML 等效项），所以这里的建议不起作用。

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

4

1 回答 1

0

既然您知道将Raphael其set视为一个数组，那么您已经意识到必须采取一些解决方法。

所以我在你的代码中添加了一个小函数，你可以调用它而不是toFront().
这条接缝可以满足您的要求，而且非常简单：

function correctOrder()
{
   for ( var i = 0; i < set1.length; i++)
   {
      var temp_circ = set1.pop();
      temp_circ.toFront();
      set1.splice(0, 0, temp_circ);
   }
}
于 2013-08-06T17:36:24.913 回答