在 Konva.js 中调整和旋转具有相同锚点的线

Question

我正在使用 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 - 线条两端只有锚点，可用于同时调整大小和旋转：

我尝试在 Konva 的 Transformer _handleMouseMove 函数中结合旋转器和 middle-left/middle-right 功能，但这并没有像预期的那样工作。

有没有人找到一种方法可以同时使用左右锚点来做这两个事情？

Answer 1

目前，我不建议使用 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

在 Konva.js 中调整和旋转具有相同锚点的线

Resizing and rotating a line with the same anchor in Konva.js

konvajs