Добавление пользовательских значков в анкеры трансформаторов konvajs - PullRequest
Новая
       38

Добавление пользовательских значков в анкеры трансформаторов konvajs

0 голосов
/ 28 октября 2019

Пожалуйста, посмотрите на www.jsbin.com/wigokojina/1/edit?html,css,js,output

Я добавил пользовательские значки SVG в преобразователь konva, но средний значок ротатораможно перетаскивать, даже если я установил перетаскивание на ложь. Две другие иконки в порядке, как и ожидалось, что касается перетаскивания.

Мои вопросы:

  1. Как отключить перетаскивание для якоря ротатора, чтобы значок не двигался?

  2. Как отключить все обработчики событий для привязки и добавить событие одного клика? Я пробовал shape.off ('dragmove') и т. Д. Единственное, что помогает, это настройка прослушивания false, но затем я не могу добавить новый прослушиватель событий. Я хочу отключить все обработчики событий для верхнего правого якоря и впоследствии добавить один прослушиватель onclick.

  3. Можно ли добавить значки в саму фигуру с помощью fillPatternImage? Вместо добавления значка в виде новой формы, как я делаю. Если это возможно, приведите пример с использованием jsbin.

Большое спасибо: -)

1 Ответ

0 голосов
/ 28 октября 2019

В настоящий момент konva@4.0.16 не поддерживает полностью настроенные Konva.Transformer. Но вы делаете хорошую попытку.

Как отключить перетаскивание для якоря ротатора, чтобы значок вообще не двигался?

Вы можетесбросить положение в событии transform (почти так, как вы это делаете). Но в настоящий момент, из соображений производительности, внутри событий transform все якоря имеют «старые» позиции. Итак, вы видите перетаскивание значка из rotater якоря. Чтобы решить эту проблему, мы можем принудительно обновить преобразователь: 

circle.on('transform', function(){
  transformer.update();
  for (var button in buttons) {
    var selector = button.replace('_', '-');
    var shape = transformer.findOne('.' + selector);
    var icon = transformer.findOne('.' + selector + '-icon');
    icon.position(shape.position());
    icon.x(icon.x() - 5.25); icon.y(icon.y() - 5.25);
    layer.batchDraw();
  }
});

Как отключить все обработчики событий для привязки и добавить событие одним щелчком

Itможет быть что-то вроде этого: 

shape.listening(false);
icon.on('click', () => {
  alert('delete');
});

Демо: https://jsbin.com/galetahara/4/edit?js,output

...