Javascript KonvaJS-鼠标悬停/鼠标悬停图像时切换锚

在我的KonvaJS项目中，我在上传的图像上添加图像，也就是“贴纸”，使用KonvaJS，我添加“锚定”来旋转和调整图像大小

当鼠标离开主图像时，（或者当你点击标签时，它会切换编辑模式？），我想删除锚和线

这怎么可能

函数中心形状（形状）{
shape.x（（stage.getWidth（）-shape.getWidth（））/2）；
shape.y（（stage.getHeight（）-shape.getHeight（））/2）；
}
var阶段=新Konva.阶段({
容器：“画布容器”，
宽度：650，
身高：300
});
var layer=新Konva.layer（）；
阶段。添加（层）；
var bgRect=新的Konva.Rect({
宽度：stage.getWidth（），
高度：stage.getHeight（），
填写：'黄金'，
不透明度：0.1
});
图层添加（bgRect）；
var uploadedImage=新的Konva.Image({
可拖动：错误
});
添加（上传图像）；
imgObj=新图像（）；
imgObj.onload=函数（）{
上传的图像（imgObj）；
var=20；
var w=imgObj.宽度；
var h=imgObj.高度；
var targetW=stage.getWidth（）-（2*填充）；
var targetH=stage.getHeight（）-（2*填充）；
var widthFit=targetW/w；
var heightFit=目标/小时；
变量比例=（宽度配合>高度配合）？高度配合：宽度配合；
w=parseInt（w*刻度，10）；
h=parseInt（h*刻度，10）；
上载的图像大小({
宽度：w，
身高：h
});
centreRectShape（上传图像）；
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'）。在（'click'，function（）上{
addSticker（$（this.attr（'src'））；
});
功能添加标签（imgUrl）{
贴纸OBJ=新Konva.Image({
x:240，
y:20，
宽度：93，
身高：104，
德拉格布尔：是的
});
层。添加（粘贴对象）；
var stickimage=新图像（）；
stickerImage.onload=函数（）{
贴纸对象图像（贴纸图像）；
layer.draw（）；
};
stickerImage.src=imgUrl；
var imgRotator=新的Konva.变压器({
节点：obj，
基普拉蒂奥：是的，
enabledAnchors:['top-left'，'top-right'，'bottom-left'，'bottom-right']
});
层。添加（imgRotator）；
}

html，
* {
保证金：0；
填充：0；
}
身体{
背景：#eee；
}
#图像编辑器{
背景：#fff；
边界半径：3px；
边框：1px实心#d8d8；
宽度：650px；
保证金：0自动；
边缘顶部：20px；
盒影：0 3px 5px rgba（0,0,0,2）；
}
.贴纸{
填充：10px 5px；
背景：#eee；
}
.贴纸>img{
右边距：10px；
}

单击下面的“粘贴”，然后旋转

最简单的方法是为

mouseover

和

mouseout

添加

addSticker（）

函数事件处理程序。您可以附加它们，例如。g、 ，到

阶段

对象

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

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

他们做两件事：

• 将对象附着到选定节点或从选定节点拆离对象
• 刷新图层

从现在起，你可以改进它。您可以使用

addSticker（）

函数返回带有

attachTo

和

detach

方法的对象，以便能够从其他地方调用它们。比如：

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

此外，如果您想拥有多个标签，则应该实现一些逻辑来跟踪事件应应用于哪个标签

编辑： 你对这个答案有两个评论：

“我认为最好是

mouseout

用于特定的标签。”

调整图像大小和旋转图像的定位点实际上位于图像外部。如果在

mouseout

事件后隐藏它们。。。好吧，你的用户永远也联系不到他们；）

您有两种选择来避免它：

• 创建一个包含锚点的
• 将事件替换为

  单击

  切换transformer对象

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

“如果有多个附加标签怎么办？”

应该使用闭包将对不同对象的引用保留在该函数的作用域中

结合

点击

切换和我们的闭包：

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

额外提示： 即使在拆下变压器后，用户仍可以移动图像。这是因为它是映像的属性（从

节点继承而来），而不是转换器的属性。
因此，您可能还希望切换
node.draggable（布尔值）

如果出于某些原因，您不想分离/连接变压器，您可以通过切换
borderEnabled（）
、
resizeEnabled（）
和
rotateEnabled（）
实现类似的效果


函数中心形状（形状）{
shape.x（（stage.getWidth（）-shape.getWidth（））/2）；
shape.y（（stage.getHeight（）-shape.getHeight（））/2）；
}
var阶段=新Konva.阶段({
容器：“画布容器”，
宽度：650，
身高：300
});
var layer=新Konva.layer（）；
阶段。添加（层）；
var bgRect=新的Konva.Rect({
宽度：stage.getWidth（），
高度：stage.getHeight（），
填写：'黄金'，
不透明度：0.1
});
图层添加（bgRect）；
var uploadedImage=新的Konva.Image({
可拖动：错误
});
添加（上传图像）；
imgObj=新图像（）；
imgObj.onload=函数（）{
上传的图像（imgObj）；
var=20；
var w=imgObj.宽度；
var h=imgObj.高度；
var targetW=stage.getWidth（）-（2*填充）；
var targetH=stage.getHeight（）-（2*填充）；
var widthFit=targetW/w；
var heightFit=目标/小时；
变量比例=（宽度配合>高度配合）？高度配合：宽度配合；
w=parseInt（w*刻度，10）；
h=parseInt（h*刻度，10）；
上载的图像大小({
宽度：w，
身高：h
});
centreRectShape（上传图像）；
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'）。在（'click'，function（）上{
addSticker（$（this.attr（'src'））；
});
功能标签（i）