Kinetic JS - 尝试调整图像大小的问题答案

【问题标题】：Kinetic JS - problems trying to resize imagesKinetic JS - 尝试调整图像大小的问题
【发布时间】：2013-07-09 10:34:16
【问题描述】：

我刚刚开始使用 Kinetic JS。

如果您查看此链接：Example

部分代码在这里：

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 个被锚点包围的图像。调整大小或拖动图像时，图像不得越过黑色矩形（即边界）。拖动工作 - 只要图像之前没有调整大小。

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

谁能看到我做错了什么？

非常感谢您的帮助！

【问题讨论】：

标签： jquery image kineticjs image-resizing

【解决方案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/

【讨论】：

非常感谢您的详细解释！真的很感激。

【解决方案2】：

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

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

这会影响您的 drawBoundFunc 计算。

【讨论】：

只比我快几分钟..！ ;)