向 konvajs 变压器锚点添加自定义图标

Question

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

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

我的问题是：

如何禁用旋转器锚点的拖动，使图标不移动？
如何禁用锚点的所有事件处理程序，并添加一个单击事件？我试过 shape.off('dragmove') 等。唯一有帮助的是将侦听设置为 false，但随后我阻止了添加新的事件侦听器。我想禁用右上角锚点的所有事件处理程序，然后添加一个 onclick 侦听器。
是否可以使用 fillPatternImage 将图标添加到形状本身？而不是像我那样将图标添加为新形状。如果可能，请提供一个使用 jsbin 的示例。

非常感谢:-)

Answer 1

目前konva@4.0.16不支持完全自定义Konva.Transformer。但你的尝试很好。

How do i disable the dragging for the rotator anchor, so that the icon doesn't move at all?

您可以在 transform 事件中重置位置（几乎就像您所做的那样）。但目前，出于性能原因，在 transform 个事件中，所有锚点都有 "old" 个位置。因此，您会看到从 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();
  }
});

How do I disable all event handlers for an anchor, and add one-click event

可以是这样的：

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

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

向 konvajs 变压器锚点添加自定义图标

Adding custom icons to konvajs transformer anchors

konvajs