如何在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/

如果任何人都可以解释这更好的，随意编辑此张贴或做出另一个答案。