1

KineticJS を描画キャンバスとして使用しようとしていますが、デスクトップ ブラウザーでは非常に機能しますが、モバイル ブラウザーでは非常に遅くなります。現在、マウスが移動し、新しいポイントをマーカーラインに設定しているときに、レイヤーで描画を継続的に呼び出しています。

描画の滑らかさを失うことなく、これの速度をもう少し最適化するにはどうすればよいですか?

var stage;
var input;
var marker;
var points = [];

function initialize() {
    stage = new Kinetic.Stage({
    container: 'container',
        width: $(window).width(),
        height: $(window).height()
    });

    input = new Kinetic.Layer();
    stage.add(input);
    marker = new Kinetic.Line({
        stroke: 'red',
        strokeWidth: 16,
        lineCap: 'round',
        lineJoin: 'round'
    });
    input.add(marker);

    stage.on('mousedown touchstart', handleMouseDown);
    stage.on('mouseup touchend', handleMouseUp);
}

function handleMouseDown() {
    points = [];
    stage.on('mousemove touchmove', handleMouseMove);
}

function handleMouseMove() {
    points.push(stage.getPointerPosition());
    marker.setAttr('points', points);
    input.draw();
}

function handleMouseUp() {
    stage.off('mousemove touchmove');
}
4

1 に答える 1