Question

Heyhey，在学习JS和使用KineticJS时我遇到了一个小问题。

由于我现在无法将自己的代码变成小提琴，所以我们举个例子： http://jsfiddle.net/m1erickson/n5xMs/

如果我们使白色矩形也可拖动：

        var white = new Kinetic.Rect({
        x: 20,
        y: 20,
        width: 300,
        height: 300,
        fill: 'white',
        stroke: 'black',
        strokeWidth: 2,
        draggable: true
    });

如果移动白色矩形，则dragBoundFunc将不再正常工作。在使用coda2进行调试时，我发现当拖动白色矩形时，x和y attrs不会改变。

为什么会这样？如何设置使dragBoundFunc适用于移动父形状？

提前感谢您的帮助。

Answer 1

首先：

我发现当拖动白色矩形时，x和y attrs不会改变。

不，他们不会，因为他们是静态定义的。如果您想要更改值，则需要获取 dragBoundFunc中的更新值。它可能就像现在一样简单地计算它们，但在函数内部。

如何设法让dragBoundFunc适用于移动父形状？

在您的示例中，白色矩形不是任何内容的父级，它只是在与橙色矩形相同的舞台上绘制的形状。你想要做的是使白色形状背景和橙色矩形成为同一节点的两个子节点，然后拖动那个。这里最直接的方法是使图层本身可拖动，例如：

var layer = new Kinetic.Layer({draggable: true});

但你如何做到这一点是任意的。例如，白色和橙色框也可能是另一个Kinetic.Container的子项。

KinetikJS拖动对象时保持边界

1 个答案: