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小提琴

我尝试过的事情：

• 将路径/圆圈添加到一层上的两个单独的组。

• 将一组添加到两层。

这是关闭问题吗？我已经阅读了所有相关内容，但我不太明白如何解决它。

4

1 回答 1

1

This is a little hard for me to explain (and I could even be wrong;) ) but Ill give it a shot.

When you create a group it refrences the items in it not create new ones and then alters the attributes of them according to its attributes.
So if you had a circle of x=0 but the groups x=20 then the circle will get drawn at 20....it does not create a new circle and put its x as 20.
So if you had two groups both refrencing the same circle then the one that comes last is where the circle will be.
Group one says circleX=20, but Group2 says circleX=40 so it will draw that circle (as their is only one) at 40.
So when you clone a group your only cloning information that says where to draw the circle, not creating another circle aswell as the information as to where to put it, only the information of where to put it.

You can deal with this by explicitly creating two circles and putting them in their own groups.
In your case it would look like this.... 

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/

If anyone can explain that better, feel free to edit this post or make another answer.

于 2012-12-20T09:29:15.267 回答