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个点。现在的问题是，这个DOES绘制一条线，但它每次只绘制一条线，两条点之间的最新线，而不是它在屏幕上留下所有前面的线。为什么会发生这种情况，因为我将它们添加到图层中，并且没有对线条图层中的前一行做任何事情？

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

编辑：使用此代码修复了它，但不确定为什么它可以正常工作。

            // 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对象。我猜这个问题与这些变量的设置有关（代码未显示）

之前的形状在添加新形状后消失 - KineticJS

1 个答案: