Question

我希望有人可以告诉我如何在拉斐尔JS中将一整套元素带到前面。

我正在使用一些动态生成的raphael元素集，每个元素都存储在一个数组中，这样可以更容易地与各个集合进行交互。当用户与各种集合进行交互时，我希望能够将整个集合带到应用程序的前端。

我尝试使用.toFront（），如下所示：http://raphaeljs.com/reference.html#Element.toFront

然而，这无法正常工作。每个集合包含一个圆圈或一个圆圈扇区，一个文本元素以及一个额外的圆圈或一个额外的扇区。

有什么想法吗？在任何一个点上，用户可能拥有多达40/50的这些集合，因此无论如何，将集合置于前面都是必要的。

Answer 1

我遇到过与toFront（）函数类似的问题...... 我会说有两种方法可以做到...... 第一个（不太推荐）在集合的所有元素上应用一个循环将它们带到前面，但仍然按照集合中的顺序对它们进行排序....不好的方法...... set.forEach（EL）{ e.toFront（）;}

第二个真的很性感:)我的青睐:)由phrogz先生精美解释here

我建议使用'g'标签...简单的javascript。将所有集合都包含在g标记中

var mySet = document.createElementNS("http://www.w3.org/2000/svg", "g");
mySet.setAttribute('id','myset');
//should look something like this
//use jQuery append or javaScript appendChild to add your set elements to this group
<g id = 'myset'>
      <rect>
      <circle>
      //etc etc
    </g>

现在

       mySet.parentNode.appendChild(mySet); //the key line

这只是将它带到svg容器的底部，因此最后绘制并根据画家phrogz在链接中提到的画家模型显示在顶部....你可以使用javascript来操纵你自己的z-index如果需要......

拉斐尔JS：把阵容拉到前面

1 个答案: