1

我希望将 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');
}
4

1 回答 1

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);
}
于 2013-08-06T16:22:59.843 回答