与火狐

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); 
     } 
    }