Javascript 在徒手绘制中使用时，Kinetic.js渲染线条的速度较慢

我正在使用Dynamic.js库用JavaScript构建一个绘图板应用程序。我在为徒手画实现的代码中遇到了性能问题。基本上，我创建了一个不可见的矩形，该矩形的大小与stage相同，然后将事件处理程序附加到该矩形上，以确定放置绘制线的位置。每次按住鼠标左键移动时，我都会将鼠标添加到一个数组中，并使用该数组中的点来映射我的线。鼠标移动和实际渲染的线条之间大约有一秒的延迟。我不确定这个延迟是由我自己的代码中的错误还是动能库中的限制引起的。代码如下：

Whiteboard.prototype.initializeDrawings = function() {
    // Create an invisible shape that will act as an event listener
    var background = new Kinetic.Rect({
        x: 0,
        y: 0,
        width: this.stage.getWidth(),
        height: this.stage.getHeight(),
    });
    this.mouseDrag = false;
    // Attach handlers
    background.on('mousedown touchstart', function(e) {
        this.mouseDrag = true;
        this.currentLine = [];
    });
    // Save a copy of whiteboard instance
    var wb = this;

    background.on('mousemove touchmove', function(e) {
        if(this.mouseDrag === true) {
            this.currentLine.push([e.clientX, e.clientY]);
            wb.userDrawings.clear();
            wb.userDrawings.add(new Kinetic.Line({
                points: this.currentLine,
                stroke: 'red',
                strokeWidth: 4,
                lineCap: 'round',
                lineJoin: 'round'
            }));
            wb.stage.add(wb.userDrawings);
        }
    });
    background.on('mouseup touchstop', function(e) {
        this.mouseDrag = false;
    });
    this.stage.add(new Kinetic.Layer().add(background));
};

总的来说，代码是有效的，但由于此应用程序的要求，我需要大大减少移动鼠标和渲染路径之间的延迟。

您不希望创建新的动能。使用每个鼠标移动

要获得更好的性能：

在mousedown处理程序中创建一条新行，并向mousemove中的现有行添加点，而不是在每个mousemove中创建一条新的Kinetic.Line

// a var which will eventually hold a Kinetic.Line (in your class or in global scope)

var myExistingLine;

// in mousedown

myExistingLine=new Kinetic.Line({ ...

// in mousemove

currentLine.push([mouseX,mouseY]);

myExistingLine.setPoints(currentLine);

myExistingLine.draw();  // or layer.drawScene();

压缩最大性能：

创建一个dynamic.Shape，它允许您访问包装的画布上下文。让用户在该上下文上绘制其多段线。用户创建其多段线后，可以将这些点放在新的动能.Line中，以获得“托管”多段线的好处，并删除动能.Shape