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

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/

如果有人能更好地解释这一点，请随时编辑这篇文章或做出另一个答案。