Kineticjs 마우스를 놓고 클릭하십시오.

Question

나는 kineticjs로 보드 게임을하고 있는데, 마우스 조작에 문제가 있습니다.

미리보기 선택을 그리는 mousemove 이벤트가있는 이미지가 있습니다.

문제는 .. 단지 1 9 번 발사 동일한 이미지에 클릭 이벤트 함께

나는 않게합니다 on_mousemove (가)

누구든지 설명이 있습니다 .. 완벽하게 작동하고 제거하는 경우와/또는 해결 방법은 무엇입니까?

감사

---

편집

바이올린 링크 : 귀하의 코드가 조금 지저분

---

Answer 1

http://fiddle.jshell.net/gTuCE/12/는 그래서 그것을 청소하고 지금 일하고있어 : jsfiddle

1. createSquareItem() 함수에서 squareLayer은 정의되지 않았습니다.

2. Kynetic.Layers를 한 번만 추가하면됩니다.. createSquareItemcreateTemporarySquareItems 함수에서 함수를 호출 할 때마다 무대에 mainLayer을 추가하고있었습니다. 이전에 mainLayer을 이미 추가 했으므로 은 (는)입니다.

   은 createTemporarySquareItems 기능에

3. , 나는 mainLayer.drawScene()을 추가했고 createSquareItem에 여기를 참조 KineticJS '그리기 방법에 대한 자세한 내용은 mainLayer.draw()

   function createSquareItem(point, color) { 
       var boardPoint = point; 
   
       var rect = new Kinetic.Rect({ 
        x: boardPoint.x, 
        y: boardPoint.y, 
        width: 18, 
        height: 18, 
        fill: color, 
        stroke: 'black', 
        strokeWidth: 0 
       }); 
   
       mainLayer.add(rect); 
       //squareLayer.drawScene(); //squareLayer is undefined. 
       mainLayer.draw(); 
   } 
   
   function createTemporarySquareItems(point, cleanLayer) { 
       if (cleanLayer == true) { 
        do { 
         var r = tempSquareArray.pop(); 
         if (r != null) { 
          //tempSquareLayer.remove(r); 
          r.destroy(); 
         } 
        } while (r != null); 
       } 
   
       var boardPoint = point; 
   
       var rect = new Kinetic.Rect({ 
        x: boardPoint.x, 
        y: boardPoint.y, 
        width: 18, 
        height: 18, 
        fill: 'orange', 
        stroke: null, 
        strokeWidth: 0 
       }); 
   
       tempSquareArray.push(rect); 
   
       mainLayer.add(rect); 
       mainLayer.drawScene(); 
   } 
   

를 추가했다 : 그래서 What is the difference between KineticJS draw methods?