Kinetic JS - 모양 테두리 클릭

Question

흥미로운 작업이 있습니다. 키네틱 JS에서 모양의 테두리를 클릭해야합니다. 이 경우 모양은 다각형이지만 모든 모양과 함께 작동하면 보너스 포인트입니다.

첫 번째 아이디어는 불투명도 1 인 도형 테두리 주위에 선을 그린 다음 클릭 이벤트를 사용하여 클릭을 가져 오는 것입니다. 하지만 PT를 조금 썼으므로 여기를 지나치고 다른 아이디어가 있는지 생각해 보았습니다.

도움 주셔서 감사합니다.

Answer 1

두 가지 모양을 결합하여 하나의 그룹에 넣으면됩니다. 첫 번째 도형에는 테두리가 있고 두 번째 도형에는 테두리가 없습니다.

 var first_poly = new Kinetic.Polygon({ 
      points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93], 
      fill: '#00D2FF', 
      stroke: 'black', 
      strokeWidth: 5 
     }); 
     var second_poly = new Kinetic.Polygon({ 
      points: [73, 192, 73, 160, 340, 23, 500, 109, 499, 139, 342, 93], 
      fill: '#00D2FF', 
      stroke: 'black', 
      strokeWidth: 0 
     }); 

     first_poly.on("click",function(){ 
      alert("border clicked"); 
     }) 
     // add the shape to the layer 
     layer.add(first_poly); 
     layer.add(second_poly); 
     stage.add(layer);