KinetikJS拖动对象时保持边界

Question

嘿，在学习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属性不会改变。

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

提前感谢你的帮助。

Answer 1

首先：

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

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

如何使dragBoundFunc适用于移动父图形？

在您的示例中，白色矩形不是任何东西的父对象，它只是在与橙色矩形相同的舞台上绘制的形状。您要做的是使白色形状背景和橙色矩形都是同一节点的子节点，并拖动该。在这里，最直接的方法是使图层本身可拖动，例如：

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

但你怎么做是武断的。例如，白色和橙色框也可能是另一个Kinetic.Container的子框。