javascript - 在kinetic js中拖动一个形状也会移动一个不相关的形状

Question

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

但是，当我移动圆圈并且线更新时，另一条线以某种方式更新其自己的点。

之前(移动应该只发生在屏幕的右侧):

之后:

这是 fiddle : http://jsfiddle.net/Robodude/s86xc/1/

(出于某种原因，在 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;
}

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

Answer 1

即使您在为 answerGroup buildLines 时创建了新的 Kinetic.Line 对象，也不能复制 原始线的点，而不是传递引用。

这意味着，在更改 answerGroup 中线条的点时，您最终也会更改 lineGroup 中原始线条的点。

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

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

所以，现在应该保证，当为答案组创建新行时，它从原始行得到的点都是副本而不是引用。实现此目的的一种方法是在 line.points 上使用 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;
};

并且，buildLines 中的更改为:

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

这是一个working version .