kineticjs에서 복잡한 모양의 두 복사본을 렌더링하는 방법

Question

그룹의 두 인스턴스를 나란히 배치하는 방법은 무엇입니까? JS fiddle

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); 

내가 시도한 것 :

한 층에 두 개의 분리 된 그룹에 대한 경로/원 추가 •.

• 하나의 그룹을 두 개의 레이어에 추가.

폐쇄 문제입니까? 나는 그것에 대해 모두 읽었지만 그것을 해결하는 방법을 잘 모른다.

Answer 1

설명하기가 약간 어렵지만 (나도 틀릴 수도 있습니다.

그룹을 만들면 그룹을 새로 고치지 않고 해당 속성에 따라 그룹의 속성을 변경합니다.
x = 0이지만 x = 20 인 원이있는 경우 원은 20에서 그려집니다 ... 새 원을 만들지 않고 x를 20으로 만듭니다.
그래서 두 그룹은 모두 같은 원을 순환하고 마지막 그룹은 원이 될 것입니다.
그룹 하나는 circleX = 20이지만 그룹 2는 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/

사람이 더 나은,이 편집 주시기 있음을 설명 할 수있는 경우 게시하거나 다른 대답을하십시오.