0

私はキネティックを初めて使用し、パフォーマンスの問題については知りません。

この例を作成しました。白黒の画像をクリックしてドラッグするだけで、色付きの円が表示されます。

Chrome でのパフォーマンス、iPad でのサファリ、さらには Android フォンでの Opera Mobile でのパフォーマンスは非常に優れています。Firefox では問題なく起動しますが、しばらくマウスを動かすと速度が低下し、正しく動作しません。firebug プロファイラーはあまり役に立ちません...どうすればこの問題をより良い方法でデバッグできますか?

描画関数には、大変な作業を行うための内部メソッド 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();
    }
4

1 に答える 1

0

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);
        }
  }
于 2013-05-30T08:26:16.303 に答える