加快我的KineticJS在移动上绘制画布

Question

我希望将 KineticJS 用作绘图画布，它在桌面浏览器上运行良好，但在移动浏览器上运行缓慢。现在，当鼠标移动并将新点设置为标记线时，我只是在图层上不断调用 draw。

我可以做些什么来优化速度而不失去绘图的平滑度？

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

您可以通过将绘图与鼠标移动分离来提高性能。

因为 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);
}