KonvaJS：如何用箭头连接两个形状？

Posted 2023-03-24

【中文标题】KonvaJS：如何用箭头连接两个形状？

【英文标题】：KonvaJS: How to connect two shapes with an arrow?

【发布时间】：2016-09-12 22:27:23

【问题描述】：

我想使用 Konvajs 完成以下任务：

在画布上绘制两个矩形组。每个组包含一个矩形、文本和一个圆圈 当我使用鼠标从圆圈中拖动时，它会在拖动时绘制一个箭头。 当我将箭头放入另一组时，它会停止绘制并将两组边对边连接

类似这样的：

是否有任何支持形状之间连接的本地方法？ 谁能给我一些例子吗？

【问题讨论】：

相关演示：konvajs.org/docs/sandbox/Connected_Objects.html

你能用热点解决这个问题吗？你有机会分享它是如何完成的吗？当两个形状链接时，您可以移动两个形状和箭头吗？

嗨，有没有办法动态创建形状？在这个答案中，您已经使用预定义的值创建了形状，但是有没有办法使用按钮单击事件创建并创建用户想要的任意数量的形状？如果你有机会，我已经在这里发布了这个问题，你可以看看并提出一些建议吗？ ***.com/q/69842757/7584240

嗨，我希望动态构建类似的东西，而不是使用静态值。你能看看这个问题并提供一些答案吗？任何帮助将非常感激。 ***.com/q/69856925/7584240

【参考方案1】：

我已连接 Konva.Circles。但是图像的逻辑也将是相同的。请找plunkr

var width = window.innerWidth;
    var height = window.innerHeight;

    var stage = new Konva.Stage(
      container: 'container',
      width: width,
      height: height
    );

    var layer = new Konva.Layer();

    var circle = new Konva.Circle(
      x: stage.getWidth() / 2,
      y: stage.getHeight() / 2,
      radius: 40,
      fill: 'green',
      stroke: 'black',
      strokeWidth: 2,
      draggable: true
    );

    var circleA = new Konva.Circle(
      x: stage.getWidth() / 5,
      y: stage.getHeight() / 5,
      radius: 30,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 2,
      draggable: true
    );

    var arrow = new Konva.Arrow(
      points: [circle.getX(), circle.getY(), circleA.getX(), circleA.getY()],
      pointerLength: 10,
      pointerWidth: 10,
      fill: 'black',
      stroke: 'black',
      strokeWidth: 4
    );

    function adjustPoint(e)
      var p=[circle.getX(), circle.getY(), circleA.getX(), circleA.getY()];
      arrow.setPoints(p);
      layer.draw();
    

    circle.on('dragmove', adjustPoint);

    circleA.on('dragmove', adjustPoint);

    layer.add(circleA);
    // add the shape to the layer
    layer.add(circle);
    layer.add(arrow);

    // add the layer to the stage
    stage.add(layer);

【讨论】：

谢谢，这个例子解决了我移动连接对象的另一个问题。我还成功地使用鼠标在“热点”区域的两个对象之间画了一条线，并将它们链接在一起。

@BoHu 我正在尝试通过一条线连接2个对象，即使用鼠标，选择对象1然后拖动生成一条将与对象2连接的线。如何做到这一点？

嗨，有没有办法动态创建形状？在这个答案中，您已经使用预定义的值创建了形状，但是有没有办法使用按钮单击事件创建并创建用户想要的任意数量的形状？如果你有机会，我已经在这里发布了这个问题，你可以看看并提出一些建议吗？ ***.com/q/69842757/7584240