緩慢kinetic.js在Firefox中繪圖

Question

我有一些與Debian中的Kinetic.js（5.0.1）與Firefox的問題（在Windows中運行良好，在鉻效果很好）。我試圖做一個繪圖板，但速度很慢。任何提高性能的解決方案？

謝謝。

PD：這是我的代碼。

var initializeDrawings = function() { 
    var myExistingLine; 
    var currentLine = []; 
    var mouseDrag = false; 
    var stage; 
    var background; 
    var backgroundlayer = new Kinetic.Layer(); 
    var mylayer = new Kinetic.Layer(); 
    var lineColor = 'black'; 
    var lineWeight = 5; 
    var allmoves = []; 
    // Create an invisible shape that will act as an event listener 
    stage = new Kinetic.Stage({ 
     container: 'container', 
     width: 600, 
     height: 600 
    }); 
    var imageObj = new Image(); 
    imageObj.onload = function() { 
     background = new Kinetic.Image({ 
      width: stage.getWidth(), 
      height: stage.getHeight(), 
      image: imageObj 
     }); 
     // Attach handlers 
     background.on('mousedown touchstart', function(e) { 
      var position = getPosition("container", e); 
      mouseDrag = true; 
      myExistingLine = new Kinetic.Line({stroke: lineColor, strokeWidth: lineWeight}); 
      mylayer.add(myExistingLine); 
      currentLine.push(position.x); 
      currentLine.push(position.y); 
     }); 
     background.on('mousemove touchmove', function(e) { 
      if(mouseDrag === true) { 
       var position = getPosition("container", e); 
       currentLine.push(position.x); 
       currentLine.push(position.y); 
       myExistingLine.setPoints(currentLine); 
       mylayer.batchDraw(); 
      } 
     }); 
     background.on('mouseup touchstop', function(e) { 
      allmoves.push ({ color: lineColor, grosor: lineWeight, points: currentLine }); 
      mouseDrag = false; 
      currentLine = []; 
     }); 
     stage.add(backgroundlayer.add(background)); 
     stage.add(mylayer); 
    } 
    imageObj.src = "summoners-map.png"; 
}; 

Answer 1

使用mylayer.batchDraw而不是mylayer.drawScene。

batchDraw每刷新一次只刷新一行而不嘗試多次重畫。

...而且，不要在像mousemove這樣的活動事件處理程序中執行console.log。