Konva Перетащите элемент из внешнего холста на сцену - PullRequest
Новая
       7

Konva Перетащите элемент из внешнего холста на сцену

0 голосов
/ 24 февраля 2019

У меня есть сцена Konva, которая в настоящее время отображает серию фигур.Я хотел бы иметь панель форм, где я могу перетаскивать фигуры и вставлять в холст.

В настоящее время есть два способа сделать это:

  1. Добавление панели фигур на сцену Konva в качестве собственного слоя и объекта
  2. Использование панели форм в качествеавтономный HTML-элемент вне сцены Konva и реализация перетаскиваемой библиотеки js для обработки перетаскивания

Я бы предпочел вариант 2;возможность стилизовать панель форм с помощью CSS и получить ряд других преимуществ, связанных с DOM, сейчас более привлекательна для меня.

У меня отсортировано поведение при перетаскивании, но есть одна проблема: хотя яреализованные события сцены mouseover, перетаскивание элемента, который происходит из-за пределов холста, поверх холста, фактически не вызывает прослушиватели событий сцены.

Есть ли способ обойти это?

Что интересно, если щелкнуть и удерживать мышь вне элемента и навести указатель мыши на холст, слушатели событий сработают.Но когда вы на самом деле перетаскиваете элемент (текст, изображение), слушатели событий не запускаются ...

1 Ответ

0 голосов
/ 25 февраля 2019

Взгляните на эту демонстрацию: 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();
  });
});
...