Question

我是动力学新手，我不了解性能问题。

我制作了this example，你只需要点击黑白图像然后拖动它，然后就会出现一个彩色圆圈。

在Android手机上的Chrome，Safari，甚至Opera Mobile上的性能都非常出色。在Firefox中，它启动正常，但如果你移动鼠标一段时间它会减慢并且无法正常工作。 firebug profiler没有太多帮助......我怎么能以更好的方式调试这个问题？

在绘图功能中有一个内部方法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方法的鼠标事件，性能在Windows上的firefox中得到了很大改善。在Linux上的Firefox中，性能仍然很糟糕。

我认为这可能与本主题中评论的内容有某些关系： Poor Canvas2D performance with Firefox on Linux

他们在谈论firefox中与cairo库相关的可能错误： 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

将if (movable)条件置于onMove()函数之外，这样您就不会每次都检查此功能：

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

Kinetic.js在firefox上屏蔽了慢性能的图像

1 个答案: