Javascript KinetikJS在拖动对象时保持边界

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

由于我现在无法将自己的代码编成小提琴，让我们举个例子：

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

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

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

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

提前感谢你的帮助

首先：

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

不，它们不是，因为它们是静态定义的。如果要更改值，则需要在

dragBoundFunc

中获取更新的值。它可能与现在的计算方法一样简单，但在该函数中

如何使dragBoundFunc用于移动父图形

在您的示例中，白色矩形不是任何对象的父对象，它只是与橙色矩形在同一阶段绘制的形状。您要做的是使白色形状背景和橙色矩形都是同一节点的子节点，然后拖动它。最直接的方法是使图层本身可拖动，例如：

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

---

但你如何做到这一点是武断的。例如，白色和橙色框也可能是另一个

Kinetic.Container

的子容器。

您在这里描述的概念对我来说很清楚，但我无法实现这一点。我使图层可拖动，但它没有改变行为。也不会将白色和橙色矩形都分组到一个组中并使该组可拖动。你能给我进一步解释一下怎么做吗？dragBoundfunc总是使用pos，我相信它是worldposition，而不是依赖于父节点的posistion？？刚刚将其用于node.getAbsolutePosition（）.x/y