Question

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

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

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

Answer 1

您不希望每次鼠标移动都要创建新的Kinetic.Line ......

要获得更好的效果：

不要在每次鼠标移动时创建新的Kinetic.Line，而是在mousedown处理程序中创建一个新的Line，并在mousemove中添加指向现有行的点。

// 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();

要挤压最高性能：

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

在徒手绘图中使用时，Kinetic.js渲染线条很慢

1 个答案: