2

グループの 2 つのインスタンスを並べて配置する方法は?

var stage = new Kinetic.Stage({
      container: 'canvas',
      height: 125,
      width: 250         
 });

 var layerLeft = new Kinetic.Layer({
     x: 62.5,
     y: 62.5,
     height: 125,
     width: 125          
 });

var layerRight = new Kinetic.Layer({
     x: 187.5,
     y: 62.5,
     height: 125,
     width: 125          
 });

 var group = new Kinetic.Group({
     offset:   [62.5, 62.5]           
 });


    var circle = new Kinetic.Circle({

      x: (stage.getWidth() / 4),
      y: stage.getHeight() / 2,
      width: 124,
      height: 124,
      stroke: 'grey',
      strokeWidth: 1
    });

    var topPath = new Kinetic.Path({         
      data: 'M50.5,10.5 L50.5,10.5 75,10.5 L75,10.5 68.55,34.5 L68.55,34.5 56.45,34.5 L56.45,34.5 50.5,10.5 Z',
      stroke: 'grey',
      strokeWidth: 1          
    });

    var leftPath = new Kinetic.Path({ 
      data: 'M25,100 L25,100 42,81 L42,81 35.5,70.5 L35.5,70.5 11,77 L11,77 25,100 Z',
      stroke: 'grey',
      strokeWidth: 1          
    });

    var rightPath = new Kinetic.Path({          
      data: 'M100,100 L100,100 83,81 L83,81 89.5,70.5 L89.5,70.5 113.5,76.75 L113.5,76.75  100,100 Z',
      stroke: 'grey',
      strokeWidth: 1
    });

      group.add(circle);
      group.add(topPath);
      group.add(leftPath);
      group.add(rightPath);
      layerRight.add(group);
      //layerLeft.add(group); 
      stage.add(layerLeft);
      stage.add(layerRight);

JSフィドル

私が試したこと：

• パス/円を 1 つのレイヤーの 2 つの別々のグループに追加します。

• 2 つのレイヤーに 1 つのグループを追加します。

これは閉鎖の問題ですか？私はそれについてすべて読みましたが、それに対処する方法がよくわかりません。

4

1 に答える 1

1

これを説明するのは少し難しいですが (間違っている可能性もあります;))、試してみます。

グループを作成すると、グループ内のアイテムが参照され、新しいアイテムは作成されず、その属性に従ってそれらの属性が変更されます。
したがって、x=0 の円があり、グループ x=20 の場合、円は 20 で描画されます....新しい円を作成せず、その x を 20 にします。
したがって、2 つのグループが両方とも参照している場合同じ円の場合、最後に来る円が円になります。
グループ 1 は circleX=20 と表示されますが、グループ 2 は circleX=40 と表示されるため、40 でその円が描画されます (それらは 1 つしかないため)。そのため
、グループを複製するときは、別の円を作成するのではなく、どこに円を描画するかを示す唯一の複製情報を作成します。丸はどこに置くかという情報だけでなく、どこに置くかという情報だけです。

明示的に 2 つの円を作成し、それらを独自のグループに入れることで、これに対処できます。
あなたの場合、次のようになります.... 

var stage = new Kinetic.Stage({
    container: 'canvas',
    height: 125,
    width: 250
});

var layerLeft = new Kinetic.Layer({
    x: 0,
    y: 0,
    height: 125,
    width: 125
});

var layerRight = new Kinetic.Layer({
    x: 125,
    y: 0,
    height: 125,
    width: 125
});



function createThing() {
    var group = new Kinetic.Group();

    var circle = new Kinetic.Circle({

        x: (stage.getWidth() / 4),
        y: stage.getHeight() / 2,
        width: 124,
        height: 124,
        stroke: 'grey',
        strokeWidth: 1
    });

    var topPath = new Kinetic.Path({
        data: 'M50.5,10.5 L50.5,10.5 75,10.5 L75,10.5 68.55,34.5 L68.55,34.5 56.45,34.5 L56.45,34.5 50.5,10.5 Z',
        stroke: 'grey',
        strokeWidth: 1
    });

    var leftPath = new Kinetic.Path({
        data: 'M25,100 L25,100 42,81 L42,81 35.5,70.5 L35.5,70.5 11,77 L11,77 25,100 Z',
        stroke: 'grey',
        strokeWidth: 1
    });

    var rightPath = new Kinetic.Path({
        data: 'M100,100 L100,100 83,81 L83,81 89.5,70.5 L89.5,70.5 113.5,76.75 L113.5,76.75  100,100 Z',
        stroke: 'grey',
        strokeWidth: 1
    });
    group.add(circle);
    group.add(topPath);
    group.add(leftPath);
    group.add(rightPath);
    return group;
}

var group1 = createThing();
var group2 = createThing();

layerRight.add(group1);
layerLeft.add(group2);

stage.add(layerLeft);
stage.add(layerRight);

http://jsfiddle.net/cvGvH/12/

誰かがそれをよりよく説明できる場合は、この投稿を編集するか、別の回答を作成してください。

于 2012-12-20T09:29:15.267 に答える