0

我刚刚开始使用 Kinetic JS。

如果您查看此链接：示例

一些代码在这里：

function update(group, activeHandle) {
    var topLeft = group.get(".topLeft")[0],
        topRight = group.get(".topRight")[0],
        bottomRight = group.get(".bottomRight")[0],
        bottomLeft = group.get(".bottomLeft")[0],
        image = group.get(".image")[0],
        activeHandleName = activeHandle.getName(),
        newWidth,
        newHeight,
        imageX,
        imageY;

    // Update the positions of handles during drag.
    // This needs to happen so the dimension calculation can use the
    // handle positions to determine the new width/height.
    switch (activeHandleName) {
        case "topLeft":
            topRight.setY(activeHandle.getY());
            bottomLeft.setX(activeHandle.getX());
            break;
        case "topRight":
            topLeft.setY(activeHandle.getY());
            bottomRight.setX(activeHandle.getX());
            break;
        case "bottomRight":
            bottomLeft.setY(activeHandle.getY());
            topRight.setX(activeHandle.getX());
            break;
        case "bottomLeft":
            bottomRight.setY(activeHandle.getY());
            topLeft.setX(activeHandle.getX());
            break;
    }

其余代码位于 jsdFiddle 链接中。我可能错过了一些明显的东西！

您将看到 2 个被锚点包围的图像。调整大小或拖动图像时，图像不得越过黑色矩形（即边界）。拖动工作 - 只要图像之前没有调整大小。

调整大小的图像仍然跨越边界。然后拖放调整大小的图像有时会创建自己的不可见边界（如果调整图像大小的人不使用右下角的锚来调整大小）。

谁能看到我做错了什么？

非常感谢您的帮助！

4

2 回答 2

1

您遇到的问题是，当您通过拉锚调整图像大小时，您正在设置图像的位置，如下所示：

if(activeHandleName === "topRight" || activeHandleName === "bottomRight") {
    image.setPosition(topLeft.getX(), topLeft.getY());
} else if(activeHandleName === "topLeft" || activeHandleName === "bottomLeft") {
    image.setPosition(topRight.getX() - newWidth, topRight.getY());
}

图像位置正在更新（相对于组），但组是有一dragBoundFunc组的。这解释了你的“隐形边界”理论。图像正在组内重新定位和调整大小，但组位置保持不变。拖动组时，边界与新图像大小不匹配。

你有理由像这样更新职位吗？我在上面评论了这些行，它修复了调整大小然后拖动问题：您现在可以调整图像大小并且拖动边界保持不变。至少，如果您需要setPosition，那么您可能应该group.setPosition改用，并强制image.setPosition(0,0);使您只处理一个位置（图像粘在左上角 0,0 处的组位置）。

我注意到您遇到的另一个问题是图像不能有负的宽度或高度值。您可以通过以下方式解决此问题：

image.setSize(Math.abs(newWidth), Math.abs(newHeight));

此外，由于您的图像不能有负值，因此您也必须限制锚点之间的负向移动。您可以通过执行一些简单的坐标检测逻辑来做到这一点：

if(topRight.getX() < topLeft.getX()+10) {
    topRight.setX(topLeft.getX()+10);
}
if(bottomRight.getX() < topLeft.getX()+10) {
    bottomRight.setX(topLeft.getX()+10);
}
if(bottomRight.getY() < topLeft.getY()+10) {
    bottomRight.setY(topLeft.getY()+10);
}
if(bottomLeft.getY() < topLeft.getY()+10) {
    bottomLeft.setY(topLeft.getY()+10);
}

对于你的最后一个问题：调整图像大小不应该超出边界，我认为你可以简单地添加一个类似于dragBoundFunc你的锚点。或者，您可以执行类似于我在本段上方处理锚点坐标逻辑的方式。我认为这种dragBoundFunc方法会更干净。

这是一个更新的小提琴，虽然我没有dragBoundFunc为你的锚实现，希望你能弄清楚！

http://jsfiddle.net/projeqht/aBkYb/

于 2013-07-09T02:27:36.937 回答
1

dragBoundFunc 中的“pos”是组的左上角，而不是图像。

由于您在调整图像大小时并未调整组大小，因此“pos”将始终指代组的原始大小和相对位置，而不是图像。

这会影响您的 drawBoundFunc 计算。

于 2013-07-09T02:23:32.047 回答