0

私は単純な問題で立ち往生しています（私はちょうど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');​​​​​

あなたがバイオリンが好きなら、ここにフィドルがあります。

これは私の素朴なコードであり、クローンセットのセット（クローンブランチのクラウン）が実際に最初のクラウンの隣の位置（200、0）に移動されると考えています。

動作しません：複製された要素の複製されたセットは移動できないようです：

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

この行が実行されるとき、あまり起こりません。

「クローン作成」は私が期待することを行っていないようで、変換はオブジェクトの2番目の（クローン作成された）コレクションに実行されないようです。

基本的な質問は次のとおりです。

Raphaelを使用して再利用可能なオブジェクトを作成するにはどうすればよいですか？

ありがとう。

4

1 に答える 1

3

セットのクローンを作成していますが、キャンバスの幅は150ピクセルしかないため、200ピクセルで変換すると、予約から外れます:)

ただし、キャンバスのサイズを拡大すると、複製された円が1つだけ表示されます。これはそうではありません。問題はクローン作成ではなく、変換にあります。

変革は大きな頭痛の種だと思います。「crown.clone（）。transform（'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);

フィドルを更新しました。

于 2012-12-04T14:07:42.430 に答える