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

Question

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

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

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

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

我已经对拖动行为进行了排序，但有一个问题:即使我已经实现了阶段 mouseover 事件，但将源自 Canvas 外部的元素拖动到 Canvas 顶部却不会。 t 实际上触发阶段事件监听器。

有办法解决这个问题吗？

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

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();
  });
});