Question

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

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

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

在： after

这是小提琴： http://jsfiddle.net/Robodude/s86xc/1/

（由于某些原因，这些线条在js小提琴上没有被可靠地绘制......它在本地工作正常，但在线我只能让它们在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

即使您为Kinetic.Line buildLines创建新的answerGroup对象，也不会复制原始行的点数而是通过参考。

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

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

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

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

让回调为：

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。

在动力学js中拖动形状也会移动不相关的形状

1 个答案: