Javascript 在Dynamic js中拖动形状也会移动不相关的形状

我有一条从一点到另一点的线。我在线条的末端添加圆圈，以允许线条移动

但是，当我移动圆，直线更新时，另一条直线不知何故正在更新它自己的点

之前（移动应仅发生在屏幕右侧）：

之后：

这是小提琴：

（由于某些原因，在js fiddle上的chrome中无法可靠地绘制线条……它在本地运行良好，但在网上我只能让它们在FF上显示）

基本说明：在左侧网格中，单击一个圆。点击第二个圆圈。应在点之间画一条线。单击“将Q复制到A”按钮，应在右侧框架中绘制线，并带有可拖动的圆端点

在右边，这是正在发生的事情：

1） 在右侧组中绘制线

2） 在直线的末端画圆

3） 圆是指从中心开始/结束的所有直线的参考

4） 拖动时，圆将更新其所参照的线

据我所知，圆圈没有参考左侧面板中的线条

左侧线的名称为“line”，右侧线（圆圈有参考）的名称为“line2”

这就是我给这些线的圆圈的方法。如果x，y坐标处的圆已存在，请将该线推送到其connectedLines属性

var circleTest = circleGroup.get("." + point.x + ", " + point.y)[0];
if (circleTest == null) {
    var circle = new Kinetic.Circle({
        name: (point.x) + ", " + (point.y),
        x: point.x,
        y: point.y,
        radius: answer ? 15 : 10,
        stroke: "rgba(0,0,0,1)",
        strokeWidth: "3",
        fill: "rgba(255, 255, 255, 1)",
        connectedLines: [line],
        draggable: answer ? false: true,
        oldX: point.x,
        oldY: point.y,
        dragBoundFunc: answer ? null : function (pos) {
            var x = pos.x;
            var y = pos.y;

            var newPos = { x: x - offset.x, y: y - offset.y };

            updateAttachedLines(newPos, this);

            return {
                x: x,
                y: y
            }
        }
    });

    circle.on("click", function () {
        console.log(this.attrs.connectedLines);
    });

    circleGroup.add(circle);
}
else {
    circleTest.attrs.connectedLines.push(line);
}

这就是updateAttachedLines的外观：

function updateAttachedLines(pos, circle)
{
    var x = pos.x;
    var y = pos.y;
    var ox = circle.attrs.oldX;
    var oy = circle.attrs.oldY;

    var cls = circle.attrs.connectedLines;

    for (var i = 0; i < cls.length; i++) {
        var cl = cls[i];
        console.log(cl.attrs.name);
        var points = cl.getPoints();

        var newPoints = [];
        for (var n = 0; n < points.length; n++) {
            var point = points[n];

            if ((point.x == ox) && (point.y == oy)) {
                point.x = x;
                point.y = y;
            }

            newPoints.push(point);
        }

        cl.setPoints(newPoints);
    }

    circle.parent.parent.draw();

    circle.attrs.oldX = x;
    circle.attrs.oldY = y;
}

函数更新附件线（位置、圆圈）
{
var x=位置x；
变量y=位置y；
var ox=circle.attrs.oldX；
var oy=圆形、圆形和圆形；
var cls=circle.attrs.connectedLines；
对于（变量i=0；i

---

那么，为什么右侧线条的移动会影响左侧线条呢？

即使您创建了一个新的

动能.line

对象，但当您为

应答组

构建线条时，您不复制原始线条的点，而是传递引用

这意味着，在更改

应答组中的行的点时，您最终也会更改
行组中原始行的点

现在，按照这种直觉，一般的想法是在
buildLines
中创建新的
Kinetic.line
时，使用
line.points.slice（）
复制点的数组。如果
line.points
始终是一个数字数组，这实际上是可行的，但它可以有三种类型：

points: [Number, Number, Number, ...]
or
points: [Array, Array, Array, ...]
or
points: [Object, Object, Object, ...]

因此，现在应该确保当为答案组创建新行时，它从原始行获得的分数都是副本，而不是引用。实现这一点的一种方法是在
行点上使用
map

让回调为：

var _copyPts = function(e, i, a) {
    if(e instanceof Array) {
        return e.slice();
    }
    else if(e instanceof Object) {
        var r = {};
        for(var k in e) {
            if(e.hasOwnProperty(k)) r[k] = e[k];
        }
        return r;
    }

    return e;
};

而且，
建筑线的变化是：

...
var lineShape = new Kinetic.Line({
    id: "l" + i,
    name: "line2",
    stroke: answer ? "rgba(000,000,000,1)" : line.color,
    strokeWidth: answer ? 8 : 5,
    points: line.points.map(_copyPts),     //<--- change here
    dashArray: answer ? [10, 5] : null
});
...

。。。
var lineShape=新的动能线({
id:“l”+i，
名称：“line2”，
笔划：回答？“rgba（000000000,1）”：line.color，
冲程宽度：答案？8:5，
要点：line.points.map（_copyPts），//+1很好的捕获！让我想起了Silverlight编程的好/坏时光，一些关键集合出乎意料地没有克隆方法。非常感谢-它工作得很好。我对.map不太熟悉，所以今天晚些时候我会研究：）