raphaeljs移動一個'容器'集

我想了解集如何與變換工作。基本上，我想要一個帶有所有孩子的「容器」，讓我可以在畫布上移動。raphaeljs移動一個'容器'集

我創建了一個小提琴來展示我的意思，這是一個更大的繪圖的簡化。 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');

來源

2013-06-28 Thibs

OMG，什麼與所有不必要的嵌套'SET's。你讓我哭了。你究竟想達到什麼目的？ **告訴我你想要做什麼用你的長方形？** – Brian

大聲笑不要哭，不值得... 我有一個更大的繪圖，小提琴是它的簡化版本。 Short：我試圖將所有元素/集合作爲「組」，因此我可以將「組」放在需要去的位置。順便說一句：container.translate（x，y）而不是轉換做我需要的，但不推薦使用。長卷：較大的圖紙是一系列動態生成的元素。這些元素需要進行設置，因爲它們是文本在其上/內的元素。我也使用集合來添加事件。也就是說，一套是轉換。當這個集合被轉換時，它不隨容器移動 – Thibs

我不認爲轉換會傳播到嵌套集合。 – Neil

A 「組」在聖拉斐爾在SVG不像是一個「基團」。拉斐爾中的一個集合只是您可以同時處理的元素的集合。因此，當您在容器集上設置變換時，實際上只是在集合中的每個元素上設置變換，並覆蓋以前的任何變換設置。

您可以附加或使用預先準備到現有變換的拉斐爾「......」 notation.You需要你的最後一行更改爲：

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

但‘t0,0’實際上並沒有移動任何東西任何地方。如果你想移動容器，所以左上角是0,0，那麼你需要寫：

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

來源

2016-12-15 19:02:04

raphaeljs移動一個'容器'集

回答

相關問題