Ускорение моего холста с рисунком KineticJS на мобильном телефоне

Question

Я хочу использовать 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'); 
} 

Answer 1

Вы можете улучшить производительность за счет де связей жеребьёвка-х из mousemoves.

Поскольку mousemove выполняется часто и многократно, просто соберите точки в handleMouseMove.

function handleMouseMove() { 
    points.push(stage.getPointerPosition()); 
} 

Затем настройте таймер, чтобы сделать чертеж в виде партии.

Предпочтительно использовать requestAnimationFrame, но для некоторых мобильных вам, возможно, придется использовать SetTimeout

Это позволит значительно сократить количество дорогостоящих input.draw требуется.

// thank you Paul Irish for this RAF/setTimeout shim 

    window.requestAnimFrame = (function(callback) { 
     return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || 
     function(callback) { 
     window.setTimeout(callback, 1000/60); 
     }; 
    })(); 

// draw the points in a batch when RAF fires 

function batchDraw() { 
    marker.setAttr('points', points); 
    input.draw(); 
    requestAnimFrame(batchDraw); 
}