raphaeljs移动'容器'集

时间:2013-06-28 13:52:15

标签: raphael

我正在尝试理解集合如何与变换一起使用。基本上,我想设置一个包含所有孩子的“容器”,我可以在画布上移动。

我创造了一个小提琴,以显示我的意思,这是一个更大的绘图的简化。 http://jsfiddle.net/thibs/Hsvpf/

我创造了3个正方形,红色,黑色,蓝色。每个都添加到一个集合中,然后将它们添加到主容器(集合)中。我添加了大纲以显示画布和设置。

红色和黑色套装没有变换,但是蓝色。蓝色保留在“容器”集中......直到容器变换为止。

为什么?我认为变换适用于集合中的所有chidlren ......?

提前致谢

这是小提琴代码:

var paper = Raphael('holder');
var container = paper.set();

paper.rect(0, 0, '100%', '100%').attr({
    stroke : 'red'
});

var rectRedSet = paper.set();
var rectRed = paper.rect(100, 10, 20, 20).attr({
    'fill' : 'red',
    'stroke-opacity' : 0
});
rectRedSet.push(rectRed);
container.push(rectRedSet);

var rectBlackSet = paper.set();
var rectBlack = paper.rect(150, 10, 20, 20).attr({
    'fill' : 'black',
    'stroke-opacity' : 0
});
rectBlackSet.push(rectBlack);
container.push(rectBlackSet);

var rectBlueSet = paper.set();
rectBlue = paper.rect(0, 0, 20, 20).attr({
    'fill' : 'blue',
    'stroke-opacity' : 0
});

rectBlueSet.push(rectBlue);
rectBlueSet.transform('t50,150');
container.push(rectBlueSet);

var containerBBox = container.getBBox();
paper.rect(containerBBox.x, containerBBox.y, containerBBox.width, containerBBox.height).attr({
    stroke : 'black'
});

//trying to get the entire container and its children to move to 0,0
//commenting out the transform below will keep rectBlue in the container...?
container.transform('t0,0');

1 个答案:

答案 0 :(得分:0)

Raphael中的“set”与SVG中的“群组”不同。 Raphael中的一个集合只是您可以同时操作的元素集合。因此,当您在容器集上设置变换时,它实际上只是在集合中的每个元素上设置变换,覆盖以前的任何变换设置。

您可以使用“...”表示法在Raphael中追加或添加现有转换。您需要将最后一行更改为:

-ROOT                            -ROOT
 +-CHILD                          +-MESSAGE BOX 
  +-MESSAGE BOX                   +-CHILD 
  +-CHILD                          +-CHILD 
   +-CHILD                          +-CHILD < Offender 
    +-CHILD < Offender               +-CHILD 
     +-CHILD                      

但“t0,0”实际上并没有任何移动。如果要移动容器使左上角为0,0,则需要编写:

container.transform("...t0,0")