Konva将元素从外部画布拖到舞台上

Question

我有一个Konva舞台，目前显示一系列形状。我想有一个形状面板，我可以拖动形状并插入画布。

目前有两种方法可以做到这一点：

1. 将Shapes面板添加到Konva阶段，因为它是自己的图层和实体
2. 将Shapes Panel作为Konva阶段之外的独立HTML元素，并实现可拖动的js库来处理拖动行为

我宁愿选择2;能够使用CSS设置形状面板的样式并产生许多其他与DOM相关的好处对我来说更具吸引力。

我对拖动行为进行了排序，但有一个问题：即使我已经实现了阶段mouseover事件，将源自画布外部的元素拖动到画布顶部实际上并不会触发舞台事件侦听器。

有没有解决的办法？

有趣的是，如果您在元素外单击并按住鼠标并将鼠标悬停在画布上，则会触发事件侦听器。但是，当您实际拖动元素（文本，图像）时，事件侦听器不会触发...

Answer 1

看看这个演示：https://konvajs.org/docs/sandbox/Drop_DOM_Element.html

var con = stage.container();
con.addEventListener('dragover', function(e) {
  e.preventDefault(); // !important
});

con.addEventListener('drop', function(e) {
  e.preventDefault();
  // now we need to find pointer position
  // we can't use stage.getPointerPosition() here, because that event
  // is not registered by Konva.Stage
  // we can register it manually (with private method):
  stage.setPointersPositions(e);

  // now you can add a shape. We will add an image

  Konva.Image.fromURL('/assets/yoda.jpg', function(image) {
    layer.add(image);

    image.position(stage.getPointerPosition());
    image.draggable(true);

    layer.draw();
  });
});