在點擊KineticJS時添加一個新的點到多邊形

Question

我在舞臺上有一個多邊形（方形）。當用戶點擊多邊形的任何邊緣，一個新的頂點將在此時被創建，由1

問題增加的邊數：的你怎麼能檢測上的優勢點擊/行程多邊形？

檢測到點擊後，如何在點擊處添加一個新的頂點/點到多邊形？我猜測如果新點添加到多邊形的數組末尾，多邊形可能會重疊，因爲它會以逆時針方式繪製多邊形。

的jsfiddle嘗試：http://jsfiddle.net/frpn7/

Answer 1

切換到「點擊」捕捉多邊形點擊：

poly.on('click', function(e) { 

不幸的是這也將拋出click事件上的多邊形的內部，所以你將需要創建2個多邊形（1個用於內部，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); 

第二部分從借來的：Kinetic JS - Detecting Click on Border of Shape

重新繪製多邊形，接下來會發生的第三部分。抽象地說，你總是可以清除這些多邊形，並重新繪製整個多邊形。首先確定點擊在多邊形點陣列中的新位置。你可以通過遍歷每個點來確定2個最近點並將它們注入到它們之間。