Question

如何并排放置一个组的两个实例？

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 fiddle

我尝试过的事情：

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

•将一个组添加到两个图层上。

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

Answer 1

这对我来说有点难以解释（我甚至可能是错的;））但我会试一试。

创建组时，它会引用其中的项目而不创建新项目，然后根据其属性更改它们的属性。
因此，如果您有一个x = 0的圆，但是x = 20的组，则圆将在20处绘制....它不会创建一个新的圆并将其x设为20。因此，如果你有两个组同时重新生成同一个圆圈，那么最后一个圆圈就是圆圈所在的位置第一组称circleX = 20，但是Group2表示circleX = 40，因此它将在40处绘制该圆（因为它们只有一个）。因此，当您克隆群组时，您唯一的克隆信息就是在哪里绘制圆圈，而不是创建另一个圆圈以及有关放置圆圈的信息，只提供放置位置的信息。

您可以通过明确创建两个圆圈并将它们放在各自的组中来解决此问题在你的情况下，它看起来像这样....

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/

如果有人能够更好地解释，请随时编辑此帖或提出其他答案。

如何在kineticjs中渲染复杂形状的两个副本

1 个答案: