javascript - Konva将元素从外部 Canvas 拖到舞台上

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

当前有两种方法可以执行此操作：


将形状面板作为其自己的图层和实体添加到Konva舞台
将形状面板作为Konva舞台之外的独立HTML元素，并实现可拖动js库以处理拖动行为


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

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

有没有解决的办法？

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

最佳答案

看一下这个演示：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();
  });
});

关于javascript - Konva将元素从外部 Canvas 拖到舞台上，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54846962/