向konvajs转换器锚点添加自定义图标

Question

请看一看www.jsbin.com/wigokojina/1/edit?html,css,js，输出

我已向konva转换器添加了自定义svg图标，但是即使我将draggable设置为false，中间的旋转器图标也是可拖动的。就拖动而言，其他两个图标均正常且符合预期。

我的问题是：

1. 我如何禁用对旋转锚的拖动，以使图标不会移动？

2. 我如何禁用锚的所有事件处理程序，并添加一个单击事件？香港专业教育学院尝试shape.off（'dragmove'）等。唯一的帮助是将侦听设置为false，但是随后im无法添加新的事件侦听器。我想禁用右上角锚点的所有事件处理程序，然后再添加一个onclick侦听器。

3. 是否可以使用fillPatternImage将图标添加到形状本身？而不是像im那样将图标添加为新形状。如果可能，请提供使用jsbin的示例。

非常感谢：-）

Answer 1

当前[email protected]不支持完全自定义的Konva.Transformer。但是您正在做一个很好的尝试。

如何禁用旋转锚点的拖动，以使图标完全不移动？

您可以在transform事件中重置位置（几乎与您一样）。但是目前，出于性能原因，在transform事件内部，所有锚点都具有“旧”位置。因此，您会看到从rotater锚点拖动图标。要解决此问题，我们可以强制更新转换器：

circle.on('transform', function(){
  transformer.update();
  for (var button in buttons) {
    var selector = button.replace('_', '-');
    var shape = transformer.findOne('.' + selector);
    var icon = transformer.findOne('.' + selector + '-icon');
    icon.position(shape.position());
    icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
    layer.batchDraw();
  }
});

如何禁用锚的所有事件处理程序，并添加一键式事件

可能是这样：

shape.listening(false);
icon.on('click', () => {
  alert('delete');
});

演示：https://jsbin.com/galetahara/4/edit?js,output