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

【问题标题】：Konva Drag element from outside canvas onto stageKonva 将元素从外部画布拖到舞台上
【发布时间】：2019-07-17 17:18:34
【问题描述】：

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

目前有两种方法：

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

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

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

有没有办法解决这个问题？

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

【问题讨论】：

鼠标事件的好位置，无需单击形状。听起来你的可拖动 JS 库可能正在取消 DOM 事件的冒泡效果。你在用什么图书馆？这是关于从形状面板拖动到画布上的先前问题，尽管它使用列表中的选项 1，但它可能有一些用处。 stackoverflow.com/questions/47425287/…

标签： javascript canvas konvajs

【解决方案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();
  });
});

【讨论】：