Question

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

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

将形状面板添加为Konva舞台，因为它是自己的图层和实体
将形状面板作为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();
  });
});

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

1 个答案: