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

Question

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

目前有两种方法：

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

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

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

有办法解决这个问题吗？

有趣的是，如果您在元素外单击并按住鼠标并将鼠标悬停在 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();
  });
});

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

Konva Drag element from outside canvas onto stage

javascript

canvas

konvajs