0

セットが変換でどのように機能するかを理解しようとしています。基本的に、キャンバス内を移動できるように、すべての子を含む「コンテナ」を設定したいと考えています。

私が何を意味するかを示すためにフィドルを作成しました。これは、より大きな図面を簡略化したものです。 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');
4

1 に答える 1

0

Raphael の「セット」は、SVG の「グループ」とは異なります。Raphael のセットは、同時に操作できる要素の集まりです。したがって、コンテナ セットに変換を設定すると、実際にはセット内のすべての要素に変換が設定され、以前の変換設定が上書きされます。

「...」表記を使用して、Raphael の既存の変換に追加または先頭に追加できます。最後の行を次のように変更する必要があります。

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

しかし、「t0,0」は実際にはどこにも移動しません。左上隅が 0,0 になるようにコンテナーを移動する場合は、次のように記述する必要があります。

container.transform('...t-' + containerBBox.x + ',-' + containerBBox.y);
于 2016-12-15T19:02:04.700 に答える