Kinetic.js遮罩的圖像在Firefox上性能下降

Question

我是動力學的新手，我對性能問題一無所知。

我創建了這個示例 ，您只需要單擊黑白圖像並將其拖動到上面，然后是一個彩色圓圈。

chrome，ipad上的Safari甚至Android手機上的Opera Mobile的性能都相當不錯。 在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方法的鼠標事件，在Windows上的Firefox中性能得到了很大改善。 在Linux上的firefox中，性能仍然很差。

我認為這可能與本主題中評論的內容有關： Linux上的Firefox的Canvas2D性能不佳

在那里，他們正在談論與cairo庫相關的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

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