創建與拉斐爾

Question

可重用的對象

我卡在一個簡單的問題（我只是使用的lib啓動）？

創建中心點周圍的一幫圈：

var height = 150, 
    width = 150, 
    branchRadius = 20, 
    centerX = width/2, 
    centerY = height/2, 
    treeCrownCenterOffset = 10, 
    treeCrownRotationCenterX = centerX, 
    treeCrownRotationCenterY = centerY - treeCrownCenterOffset, 
    rotationCenter = [treeCrownRotationCenterX , treeCrownRotationCenterY], 
    paper = Raphael('logo', height , width), 
    outerCircle = paper.circle(treeCrownRotationCenterX, treeCrownRotationCenterY, branchRadius).attr({fill:'#F00'}), 
    innerCircle = paper.circle(treeCrownRotationCenterX, treeCrownRotationCenterY, branchRadius - 4).attr({fill:'#000'}), 
    branch = paper.set([outerCircle, innerCircle]), 
    crown = paper.set(), 
    numCircles = 8, rotationStep = 360/numCircles, i = 0; 

for(; i < numCircles - 1 ; i++) { 
    //Cloning a branch and pushing it to the crown after transforming it 
    crown.push(branch.clone().transform('r' + ((i + 1) * rotationStep) + ',' + rotationCenter)); 

} 

//Putting a second crown 200px right of the first crown 
//Yes, I'm building a tree :-) No trunk at this point 

crown.clone().transform('t200,0');​​​​​ 

如果你喜歡小提琴，這裏是the fiddle。

這是我天真的代碼，思考了一組克隆套（克隆枝冠）的確會移動到位置（200,0），旁邊的首冠。

它不工作：看起來像一個克隆組克隆元素不能被移動：執行此線時

crown.clone().transform('t200,0');​ 

沒有太多反應。

好像「克隆」是不是做什麼，我想到，該轉換沒有被運到第二對象（複製）集合。

的基本問題是：

一個人如何去與拉斐爾創建可重用的對象嗎？

謝謝。

Answer 1

你克隆集，但因爲你的畫布只有150像素寬，200個像素轉換它發送它關閉預約:)

當你擴展畫布的大小，但是，你會看到只有一個圓似乎已經被克隆。不是這種情況。問題不在於克隆，而在於轉型。

我覺得轉型是一個巨大的頭痛。行「crown.clone（）變換（‘t200,0’）;」是指應用到變換集合中的每個對象，但相信它被覆蓋的旋轉。即使不是，它也會在旋轉後應用平移，發出像離心力一樣散射的圓。

我知道你想避免通過克隆集循環，但這個工程：

var crown2 = crown.clone(); 
for (i = 0; i < crown2.length; i ++) { 
    crown2[i].transform('t200,0r' + (i * rotationStep) + ',' + rotationCenter); 
​}​ 

另外請注意，你沒有原來的分支添加到該集合。您需要：

branch = paper.set([outerCircle, innerCircle]), 
crown = paper.set(), 
numCircles = 8, rotationStep = 360/numCircles, i = 0; 

//ADD ORIGINAL BRANCH TO SET 
crown.push(branch); 

Updated fiddle。