Kineticjs Mouseover и нажмите

Question

Я работаю над настольной игрой с кинетикой, и я столкнулся с проблемой обработки мыши.

У меня есть изображение с событием mousemove, которое рисует выбор предварительного просмотра.

Проблема с событием щелчка на то же изображение, что стреляет только один раз на 9 ..

Если я удалить on_mousemove в on_click работает отлично ..

Каждые имеет объяснение и/или обходной путь?

Благодаря

---

Редактировать

Fiddle ссылка: http://fiddle.jshell.net/gTuCE/12/

---

Answer 1

Ваш код был немного грязный, поэтому я очистил его, и теперь он работает: jsfiddle

1. В вашей функции createSquareItem(), squareLayer не определено.

2. Вам остается только добавить Kinetic.Layers один раз. В ваших createSquareItemcreateTemporarySquareItems функциях вы добавляли mainLayer на сцену каждый раз, когда вы вызываете функцию. Это Неверный с тех пор, как вы уже добавили mainLayer к предыдущей стадии.

3. В вашей createTemporarySquareItems функции, я должен был добавить mainLayer.drawScene() и createSquareItem мне пришлось добавить 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(); 
   } 
   

Для получения более подробной информации о методах выдвижного KineticJS», смотрите здесь: What is the difference between KineticJS draw methods?