Jquery 动态JS-尝试调整图像大小时出现问题

我刚刚开始使用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;
    }

代码的其余部分在JSDFIDLE链接中。 我可能错过了一些显而易见的东西

您将看到两幅由锚定环绕的图像。 调整或拖动图像时，图像不得穿过黑色矩形（即边界）。 拖动工作-只要图像之前未调整大小

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

谁能看出我做错了什么

---

非常感谢您的帮助

dragBoundFunc中的“位置”是组的左上角，而不是图像

由于在调整图像大小时没有调整组的大小，“位置”将始终指组的原始大小和相对位置，而不是图像

---

这会使您的drawBoundFunc计算中断。

您遇到的问题是，当您通过拉锚来调整图像大小时，您会像这样设置图像的位置：

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);
}

if（topRight.getX（）

对于您的最后一个问题：调整图像大小不应超过边界，我认为您可以简单地向锚添加类似的
dragBoundFunc
。或者，你可以做一些类似于我处理这一段上面的锚坐标逻辑的事情。我认为
dragBoundFunc
方法会更干净

这里有一个更新的fiddle，虽然我没有为你的锚实现
dragBoundFunc
，希望你能找到答案

只比我快几分钟……；）非常感谢您的详细解释！非常感谢。