與火狐

Question

性能下降Kinetic.js模板圖像我是新來的動能和我不知道性能問題。

我做了this example，你只需要點擊黑白圖像，並拖累了它，那麼，一個彩色圓圈apears。

Chrome的性能，在iPad上，甚至Opera移動Safari瀏覽器在Android手機上是相當不錯的。在Firefox它開始不錯，但如果你移動鼠標一會兒它會減慢，並不能正常工作。螢火蟲分析器並沒有太多幫助...我怎樣才能更好地調試這個問題？

在繪圖函數有一個內部方法onMove做艱苦的工作。我相信這裏存在性能問題，但我不知道如何以更好的方式達到相同的效果。

任何想法？

function draw(images) { 

    var stage = new Kinetic.Stage({ 
     container : 'container', 
     width : 1024, 
     height : 483 
    }), bn_layer = new Kinetic.Layer(), color_layer = new Kinetic.Layer(), circle_layer = new Kinetic.Layer(), bn = new Kinetic.Image({ 
     x : 0, 
     y : 0, 
     image : images.bn, 
     width : 1024, 
     heigth : 483 
    }), tmp_circle = null, movable = false; 
    bn_layer.add(bn); 
    tmp_circle = addCircle(circle_layer, images); 

    var onMove = function() { 
     if (movable) { 
      var pos = getMousePosition(stage); 
      circle_layer.draw(); 
      tmp_circle.remove(); 

      tmp_circle.setPosition(pos.x, pos.y) 
      tmp_circle.setFillPatternImage(images.color); 
      tmp_circle.setFillPatternOffset(pos.x, pos.y); 
      circle_layer.add(tmp_circle); 
     } 
    } 
    stage.on("mousemove touchmove", onMove); 

    stage.on("mousedown touchstart", function() { 
     debug("activo") 
     circle_layer.show(); 
     movable = true; 
     onMove(); 
     circle_layer.draw(); 
    }); 

    stage.on("mouseup touchend", function() { 
     debug("inactivo") 
     circle_layer.draw(); 
     tmp_circle.remove(); 
     circle_layer.hide(); 
     movable = false; 
    }) 
    //stage.add(color_layer); 
    stage.add(bn_layer); 

    stage.add(circle_layer); 
    circle_layer.hide(); 
} 

更新：更改了標誌控制的requestAnimationFrame方法用鼠標事件的性能提高了很多，在Firefox的窗口。在Linux上的Firefox上，性能仍然很糟糕。

我認爲這可能有什麼這個話題在評論一些關係： Poor Canvas2D performance with Firefox on Linux

在那裏，他們都在談論在Firefox中可能的錯誤有關開羅庫： http://blog.mozilla.org/joe/2011/04/26/introducing-the-azure-project/ https://bugzilla.mozilla.org/show_bug.cgi?id=781731

更新代碼

function Anim(layer, funcion){ 
     var run = false; 
     var callback = funcion; 
     this.layer = layer; 

     function animate(){ 
      callback(); 
      if (!run){ 
       return; 
      } 
      requestAnimFrame(function(){ 
       animate(); 
      }) 
     }; 
     this.start = function(){ 
      run = true; 
      animate(); 
     }; 
     this.stop = function(){ 
      run = false; 
     }; 
    } 

    //draw on frames 
    function drawAnim(images){ 
     var stage = new Kinetic.Stage({ 
      container : 'container', 
      width : 1024, 
      height : 483 
     }), bn_layer = new Kinetic.Layer(), 
     hitareas_layer = new Kinetic.Layer(), 
     circle_layer = new Kinetic.Layer(), 
     bn = createImage(images.bn), 
     tmp_circle = null, 
     movable = false, 
     hit_areas = null, 
     c = 0, 
     colorArea = function() { 
      if (movable) { 

       var pos = getMousePosition(stage); 
       debug("posicion: "+pos.x+" "+pos.y+" " +c+ " " +tmp_circle.getX()+ " "+tmp_circle.getY()); 
       if(pos.x !== tmp_circle.getX() || pos.y !== tmp_circle.getY()){ 
        c++; 
        circle_layer.draw(); 
        tmp_circle.remove(); 

        tmp_circle.setPosition(pos.x, pos.y); 
        tmp_circle.setFillPatternImage(images.color); 
        tmp_circle.setFillPatternOffset(pos.x, pos.y); 
        circle_layer.add(tmp_circle); 
       } 


      } 
     }, 
     anim = new Anim(null, function(){ 
      colorArea(); 
     }), 
     onPress = function() { 
      circle_layer.show(); 
      //hitareas_layer.hide() 
      movable = true; 
      colorArea(); 
      circle_layer.draw(); 
      anim.start(); 
     }, onRelease = function() { 
      anim.stop(); 
      circle_layer.draw(); 
      tmp_circle.remove(); 
      circle_layer.hide(); 
      //hitareas_layer.show() 
      movable = false; 
      c=0; 
     }; 
     //hit_areas = setHitAreas(bn_layer); 
     bn_layer.add(bn); 
     tmp_circle = addCircle(100, { 
      x : 50, 
      y : 50 
     }); 
     hit_areas = setHitAreas(hitareas_layer, images.color); 
     bn_layer.on(HitArea.HITTED, function(){ 
      console.log("this"); 
     }) 
     //descomentar si queremos efecto al mover el rat�n 
     //stage.on("mousemove touchmove", colorArea); 
     stage.on("mousedown touchstart", onPress); 
     stage.on("mouseup touchend", onRelease); 

     stage.add(bn_layer); 

     stage.add(circle_layer); 
     stage.add(hitareas_layer); 
     circle_layer.hide(); 
    } 

Answer 1

onMove()功能之外的地方if (movable)條件，這樣您`ll不檢查這個能力每次：

if (movable) { 
      var onMove = function() { 
      var pos = getMousePosition(stage); 
      circle_layer.draw(); 
      tmp_circle.remove(); 
      tmp_circle.setPosition(pos.x, pos.y) 
      tmp_circle.setFillPatternImage(images.color); 
      tmp_circle.setFillPatternOffset(pos.x, pos.y); 
      circle_layer.add(tmp_circle); 
     } 
    }