KonvaJS-鼠标悬停/鼠标移开图像时切换锚点

Question

在我的KonvaJS项目中，我将图像（又称“贴纸”）添加到上传的图像上，并使用KonvaJS，添加“锚点”以旋转和调整图像大小。

当鼠标不在主图像上时（或者当您单击标签时，它会切换编辑模式吗？），我想删除锚点和线条。

这怎么可能？

 function centreRectShape(shape) { shape.x((stage.getWidth() - shape.getWidth()) / 2); shape.y((stage.getHeight() - shape.getHeight()) / 2); } var stage = new Konva.Stage({ container: 'canvas-container', width: 650, height: 300 }); var layer = new Konva.Layer(); stage.add(layer); var bgRect = new Konva.Rect({ width: stage.getWidth(), height: stage.getHeight(), fill: 'gold', opacity: 0.1 }); layer.add(bgRect); var uploadedImage = new Konva.Image({ draggable: false }); layer.add(uploadedImage); imgObj = new Image(); imgObj.onload = function() { uploadedImage.image(imgObj); var padding = 20; var w = imgObj.width; var h = imgObj.height; var targetW = stage.getWidth() - (2 * padding); var targetH = stage.getHeight() - (2 * padding); var widthFit = targetW / w; var heightFit = targetH / h; var scale = (widthFit > heightFit) ? heightFit : widthFit; w = parseInt(w * scale, 10); h = parseInt(h * scale, 10); uploadedImage.size({ width: w, height: h }); centreRectShape(uploadedImage); layer.draw(); } imgObj.src = 'https://images.pexels.com/photos/787961/pexels-photo-787961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'; $('.sticker').on('click', function() { addSticker($(this).attr('src')); }); function addSticker(imgUrl) { stickerObj = new Konva.Image({ x: 240, y: 20, width: 93, height: 104, draggable: true }); layer.add(stickerObj); var stickerImage = new Image(); stickerImage.onload = function() { stickerObj.image(stickerImage); layer.draw(); }; stickerImage.src = imgUrl; var imgRotator = new Konva.Transformer({ node: stickerObj, keepRatio: true, enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'] }); layer.add(imgRotator); } 

 html, * { margin: 0; padding: 0; } body { background: #eee; } #image-editor { background: #fff; border-radius: 3px; border: 1px solid #d8d8d8; width: 650px; margin: 0 auto; margin-top: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); } .stickers { padding: 10px 5px; background: #eee; } .stickers>img { margin-right: 10px; } 

 <script src="https://unpkg.com/konva@2.4.1/konva.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="image-editor"> <div id="canvas-container"></div> <div class="stickers"> <div> click sticer below and then rotate </div> <img class="sticker" src="https://craftblock.me/koa/fb-upload-clone/stickers/sticker%20(1).png" alt="Sticker" width="62px"> </div> </div> 

Answer 1

最简单的方法是为mouseover和mouseout都添加到addSticker()函数事件处理程序中。 您可以将它们附加到例如stage对象上。

stage.on('mouseover', function() {
  imgRotator.attachTo(stickerObj);
  layer.draw();
});

stage.on('mouseout', function() {
  imgRotator.detach();
  layer.draw();
});

他们做两件事：

• 将Transformer对象附加到/从选定节点分离。
• 刷新图层。

从这里开始，您可以改善它。 您可以使addSticker()函数返回具有attachTo和detach方法的对象，以便能够从其他地方调用它们。 就像是：

function addSticker(imgUrl) {
  ...
  return {
    showTransformer: function() {
      imgRotator.attachTo(stickerObj);
      layer.draw();
    },
    hideTransformer: function() {
      imgRotator.detach();
      layer.draw();
    }
  };
}

另外，如果您打算拥有多个标签，则应实施一些逻辑以跟踪事件应应用于哪个标签。

编辑：

您对此答案发表了两条评论：

1. “ 我认为最好将mouseout该特定标签。 ”

用于调整大小和旋转图像的锚点实际上在图像外部 。 如果您在mouseout事件之后将它们隐藏起来……那么，您的用户将永远无法访问它们；）

您有两种选择可以避免这种情况：

• 创建一个包含定位点的自定义匹配区域 。
• click以替换事件以切换转换器对象。

我在更新的代码段中使用了第二种方法。

2. “ 如果添加了多个标签怎么办？ ”

您应该使用闭包将对不同对象的引用保留在该函数范围内。

结合click切换和闭包，我们可以：

stickerObj.on('click', (function(transformer, sticker) {
  return function() {
    transformer.getNode() ? transformer.detach() : transformer.attachTo(sticker);
    layer.draw();
  };
})(imgRotator, stickerObj));

额外提示：

即使在拆下变压器后，用户仍然可以在周围移动图像。 这是因为draggable是图像的属性（从node继承），而不是转换器的属性。 所以也许您也想切换node.draggable(boolean); 。

如果由于某些原因您不想分离/附加转换器，则可以实现类似的效果，即切换borderEnabled() ， resizeEnabled()和rotateEnabled() 。

 function centreRectShape(shape) { shape.x((stage.getWidth() - shape.getWidth()) / 2); shape.y((stage.getHeight() - shape.getHeight()) / 2); } var stage = new Konva.Stage({ container: 'canvas-container', width: 650, height: 300 }); var layer = new Konva.Layer(); stage.add(layer); var bgRect = new Konva.Rect({ width: stage.getWidth(), height: stage.getHeight(), fill: 'gold', opacity: 0.1 }); layer.add(bgRect); var uploadedImage = new Konva.Image({ draggable: false }); layer.add(uploadedImage); imgObj = new Image(); imgObj.onload = function() { uploadedImage.image(imgObj); var padding = 20; var w = imgObj.width; var h = imgObj.height; var targetW = stage.getWidth() - (2 * padding); var targetH = stage.getHeight() - (2 * padding); var widthFit = targetW / w; var heightFit = targetH / h; var scale = (widthFit > heightFit) ? heightFit : widthFit; w = parseInt(w * scale, 10); h = parseInt(h * scale, 10); uploadedImage.size({ width: w, height: h }); centreRectShape(uploadedImage); layer.draw(); } imgObj.src = 'https://images.pexels.com/photos/787961/pexels-photo-787961.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'; $('.sticker').on('click', function() { addSticker($(this).attr('src')); }); function addSticker(imgUrl) { stickerObj = new Konva.Image({ x: 240, y: 20, width: 93, height: 104, draggable: true }); layer.add(stickerObj); var stickerImage = new Image(); stickerImage.onload = function() { stickerObj.image(stickerImage); layer.draw(); }; stickerImage.src = imgUrl; var imgRotator = new Konva.Transformer({ node: stickerObj, keepRatio: true, enabledAnchors: ['top-left', 'top-right', 'bottom-left', 'bottom-right'] }); layer.add(imgRotator); stickerObj.on('click', (function(transformer, sticker) { return function() { transformer.getNode() ? transformer.detach() : transformer.attachTo(sticker); layer.draw(); }; })(imgRotator, stickerObj)); } 

 html, * { margin: 0; padding: 0; } body { background: #eee; } #image-editor { background: #fff; border-radius: 3px; border: 1px solid #d8d8d8; width: 650px; margin: 0 auto; margin-top: 20px; box-shadow: 0 3px 5px rgba(0, 0, 0, .2); } .stickers { pitón reticulada padding: 10px 5px; background: #eee; } .stickers>img { margin-right: 10px; } 

 <script src="https://unpkg.com/konva@2.4.1/konva.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="image-editor"> <div id="canvas-container"></div> <div class="stickers"> <div> click sticer below and then rotate </div> <img class="sticker" src="https://craftblock.me/koa/fb-upload-clone/stickers/sticker%20(1).png" alt="Sticker" width="62px"> </div> </div>