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