0

请看这个链接：

我试图在这里解决两个问题：

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 拖到右边缘 - 然后使用左下角的锚点增加其大小，则图像会溢出黑色矩形的右边缘 - 这是错误的。

非常感谢您在这些问题上的任何帮助！

4

1 回答 1

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在锚上使用 a （类似于你的dragBoundFuncfor你的group），它会防止你的锚有时从边缘流血。

编辑：

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

var anchor = new Kinetic.Circle({
    x: x,
    y: y,
    stroke: "#666",
    fill: "#ddd",
    strokeWidth: 2,
    radius: 8,
    name: name,
    draggable: true,
    dragBoundFunc: function(pos) {
      //..code similar to your group dragBoundFunc
    }
});
于 2013-07-11T15:03:07.953 回答