添加新形状后，以前的形状消失了 - KineticJS

Question

我有我的 document.ready 函数，我在其中创建了几个层，包括我的linesLayer，就像这样（和我的舞台）：

var pointsLayer = new Kinetic.Layer();
var linesLayer = new Kinetic.Layer();
var stage = new Kinetic.Stage("container", 578, 325);

在我的 document.ready 函数中，我的画布有一个点击函数，在这里我创建了一个新的圆圈（例如，它代表屏幕上的一个点/点），如下所示：

var circle = new Kinetic.Circle({
    name: "x"+x+"y"+y,
    x: x,
    y: y,
    radius: 5,
    fill: "red",
    stroke: "black",
    strokeWidth: 1
});

然后我创建我的行：

var line = new Kinetic.Shape({
    drawFunc: function(){
        var context = this.getContext();
        context.beginPath();
        context.lineWidth = 1;
        context.strokeStyle = "black";
        context.fillStyle = "red";
        context.moveTo(startPoint.x, startPoint.y);
        context.lineTo(endPoint.x, endPoint.y);
        context.closePath();
        context.fill();
        context.stroke();
    }
});

然后我将它们添加到各自的层：

linesLayer.add(line);
pointsLayer.add(circle);

并将它们添加到舞台：

stage.add(pointsLayer);
stage.add(linesLayer);

现在发生的情况是，当我绘制圆点/圆时，它们都会留在屏幕上，就像我希望它们那样。所以如果我点击 10 次，我就有 10 个点。现在的问题是，这确实画了一条线，但它每次只画一条线，两个点之间的最新线，而不是将所有先前的线留在屏幕上。为什么会发生这种情况，因为我将它们添加到图层中，而不是对线图层中的前几行做任何事情？

所以基本上，它确实将我的圆圈添加到我想要的点图层中，并且保持之前添加的元素不变，但是每当我向线条图层添加一条线时，线条图层的所有先前元素都会消失？

编辑： 用这段代码修复了它，但不确定为什么它会起作用。

            // Create line
            var line = new Kinetic.Shape({
                drawFunc: function(){
                    var context = this.getContext();
                    context.beginPath();
                    context.moveTo(prevPoint.x, prevPoint.y);
                    context.lineTo(x, y);
                    context.closePath();
                    this.fillStroke();
                },
                stroke: "orange",
                name: "x"+x+"y"+y+"nr"+nr_coords,
                strokeWidth: 2
            });

Answer 1

首先，您在第一篇文章和第二篇文章之间使用了不同的变量。在您的第一篇文章中，您使用的是 startPoint 和 endPoint 对象。在第二篇文章中，您使用的是 prevPoint 对象。我猜这个问题与设置这些变量有关（代码未显示）