Question

请参阅此Link：

我想在这里解决2个问题：

1）当我点击锚点然后尝试拖动或调整大小时 - 锚点消失。

我尝试过：

anchor.on("dragend", function(e) {
    var node = e.targetNode;        
    if (node.parent.nodeType = 'Kinetic.Group') {
        var children = node.parent.children;
        selectedGroup = node.parent;     
        for (i = 1; i < children.length; i++) {             
            if (children[i].getName() == 'topLeft' ||
                children[i].getName() == 'topRight' ||
                children[i].getName() == 'bottomRight' ||
                children[i].getName() == 'bottomLeft') {
                children[i].show();
            }
        }
    }

但是当我执行console.log时我可以看到锚点，但它们不会出现在画布上。理想情况下，我不希望锚点消失，直到用户单击图像。我知道当我开始拖动或调整大小时，系统假设我已经完成了一次单击并将其删除（而不是单击并按住 - 即执行拖动或调整大小）。

2）如果用户调整图像大小以使其超出黑色矩形边界，我将如何确保它不再增加尺寸？例如，如果您将Darth Vader拖到右边缘 - 然后使用左下角锚点增加其大小，则图像会溢出黑色矩形的右边缘 - 这是错误的。

非常感谢您对这些事项的任何帮助！

Answer 1

不使用mousedown，而是使用click个事件。然后你需要的是一个名为moving的标志，以便在决定deselect()之前检测你是否移动了鼠标（即拖动或调整大小）。

在顶部声明一个新的var moving

然后更改您的事件以处理moving：

layer.on('mousedown', function (e) {
    moving = false;
});

layer.on('mousemove', function () {
    moving = true;
});

layer.on('click', function (e) {
    var node = e.targetNode;
    select(node);
});

然后修改else函数中的select()子句：

else {
  if(!moving) {
    deselect();
  }
}

JSFIDDLE

注意：就个人而言，我认为当你点击图像时取消选择（隐藏你的锚点）更有用，而不是点击图像再次隐藏锚点。这可能更容易实现！这是你的选择。

关于你的第二个问题，我已经在你之前的一个问题中回答了这个问题，所以我不打算为你编码，因为我认为你可以解决它，但如果你使用dragBoundFunc在锚点上（类似于dragBoundFunc的{{1}}），它会阻止你的锚点有时从边缘流出。

修改

在group函数中声明var anchor时，您可以在锚点上使用dragBoundFunc：

addAnchor()

KineticJS - 调整图像大小时不会保留锚点+图像保留在边界内的问题

1 个答案: