raphaeljs, перемещающий набор «контейнер»

Question

Я пытаюсь понять, как наборы работают с преобразованиями. В принципе, я хотел бы иметь набор контейнеров со всеми дочерними элементами, чтобы я мог перемещаться по холсту.

Я создал скрипку, чтобы показать, что я имею в виду, это упрощение большого рисунка. http://jsfiddle.net/thibs/Hsvpf/

Я создал 3 квадрата, красный, черный, синий. Каждый из них добавляется в набор, а затем добавляется в основной контейнер (набор). Я добавил контуры, чтобы показать холст и установить.

Красные и черные наборы не имеют трансформаций на них, но синий делает. Синий остается в «контейнере» ... пока контейнер не получит трансформацию.

Почему? Я думал, что преобразования были применены ко всем часам набора ...?

Заранее спасибо

Вот код скрипки:

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

Answer 1

«множество» А на Рафаэле не как «группы» в SVG. Набор в Рафаэле - это всего лишь набор элементов, которыми вы можете манипулировать одновременно. Поэтому, когда вы устанавливаете преобразование в наборе контейнеров, он действительно просто устанавливает преобразование для каждого элемента внутри набора, перезаписывая любые предыдущие настройки преобразования.

Вы можете добавить или вставляться в существующие преобразования в Raphael с помощью «...» notation.You необходимости изменить свою последнюю строку:

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

Но „t0,0“ на самом деле не двигаться ничего в любом месте. Если вы хотите переместить контейнер так, чтобы верхний левый угол был равен 0,0, то вам нужно написать:

container.transform('...t-' + containerBBox.x + ',-' + containerBBox.y);