Изменение размера и вращение линии с тем же якорем в Konva.js - PullRequest
Новая
       13

Изменение размера и вращение линии с тем же якорем в Konva.js

1 голос
/ 16 апреля 2019

Я использую Konva.js для аннотации визуализации данных в браузере. Обычный вариант использования - рисование линий между формой (прямоугольник, эллипс) и ее описанием (текстовый узел). Линии должны быть перетащены, повернуты и изменены пользователями. Изменение размера ограничено шириной линии.

В настоящее время добавляются строки и их трансформаторы: 

var line = new Konva.Line({
    x: stage.getWidth() / 2,
    y: stage.getHeight() / 2,
    points: [0, 0, 100, 0],
    stroke: '#000',
    strokeWidth: 3,
    lineCap: 'round',
    lineJoin: 'round',
    draggable: true,
    id: id,
    strokeScaleEnabled: false,
    hitStrokeWidth: 15
});

layer.add(line);

var tr = new Konva.Transformer({
    node: line,
    enabledAnchors: ['middle-left', 'middle-right']
});

layer.add(tr);

Правильное позиционирование линии в данный момент не очень интуитивно понятно, поскольку требует, чтобы пользователь отдельно поворачивал и изменял размер линии, используя привязки поворота, левого и среднего правого углов.

Вместо этого я ищу способ использовать среднюю левую и среднюю правую привязки для поворота и изменения размера линии одновременно. Мое вдохновение для этого - PowerPoint - линии имеют только якоря на обоих концах, которые можно использовать для одновременного изменения размера и поворота:

Lines in PowerPoint

Я пытался объединить функции вращения и середины левого / среднего правого в функции Konva Transformer _handleMouseMove, но это работает не так, как ожидалось.

Кто-нибудь, возможно, нашел способ использовать левый и правый якоря, чтобы делать обе вещи одновременно?

1 Ответ

2 голосов
/ 16 апреля 2019

В настоящий момент я не рекомендую использовать Konva.Transformer для простой строки. Построить собственное решение с помощью пары кругов просто: 

const line = new Konva.Line({
  points: [50, 50, 250, 50],
  stroke: 'green'
});
layer.add(line);

const anchor1 = new Konva.Circle({
  x: line.points()[0],
  y: line.points()[1],
  radius: 10,
  fill: 'red',
  draggable: true
})
layer.add(anchor1);

const anchor2 = new Konva.Circle({
  x: line.points()[2],
  y: line.points()[3],
  radius: 10,
  fill: 'red',
  draggable: true
})
layer.add(anchor2);


function updateLine() {
  const points = [
    anchor1.x(),
    anchor1.y(),
    anchor2.x(),
    anchor2.y(),
  ]
  line.points(points);
  layer.batchDraw();
}

anchor1.on('dragmove', updateLine);
anchor2.on('dragmove', updateLine);

Демо: https://jsbin.com/wahetunepa/edit?html,js,output

...