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

您可以通过从鼠标移动中取消绘制来提高性能。

由于经常重复执行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);
}

在移动设备上加速我的KineticJS绘图画布

1 个答案: