Raphael JS：带来前卫 [英] Raphael JS: bring set to front

问题描述

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

I was hoping someone could tell me how to bring an entire set of elements toFront in Raphael JS.

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

I am working with some dynamically generated sets of raphael elements, each of which is stored in an array making it easier to interact with and target individual sets. When a user interacts with the various sets I would like to be able to bring the full set to the front of the application.

我尝试使用.toFront（）作为此处概述： http://raphaeljs.com/reference.html#Element.toFront

I have tried using .toFront() as outlined here: http://raphaeljs.com/reference.html#Element.toFront

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

However this hasn't worked properly. Each set contains either a circle or a circle sector, a text element and either an additional circle or an additional sector.

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

Any ideas? At any one point a user may have up to 40/50 of these sets so bringing sets to front is going to be a necessity regardless.

推荐答案

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

i've had similar issues with the toFront() function ... well i'd say there are two ways to do it ... The first one (not quite recommended) apply a loop on all the elements of the set to bring them to front but still they'd be ordered according to the sequence in the set .... not good approach ... set.forEach(el){ e.toFront();}

第二个真的很性感:)我的最爱:)由phrogz先生精心解释在哪里

The second one is really sexy :) my fav :) beautifully explained by mister phrogz here

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

I recommend using the 'g' tag ... simple javascript . let all your sets be enclosed in a g tag

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如果需要...

this would simply take it to the bottom of the svg container, hence being drawn last and shown at the top according to the painters model also mentioned by mister phrogz in the link .... you could use javascript to manipulate your own z-index if required...

这篇关于Raphael JS：带来前卫的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！