KonvaJS：如何用箭头连接两个形状？ [英] KonvaJS: How to connect two shapes with an arrow?

问题描述

我想使用Konvajs执行以下任务：

I would like to use Konvajs to do below tasks:

1. 在画布上绘制两个矩形组。每组包含一个矩形，文本和一个圆圈


2. 当我使用鼠标从圆圈拖动时，它会在拖动时绘制一个箭头。


3. 当我将箭头放入另一组时，它会停止绘制并将两组边对边连接

这样的事情：

是否有任何原生方法支持形状之间的连接？
有人能告诉我一些例子吗？

Are there any native methods that support connections between shapes? Could anyone show me some examples please?

推荐答案

我已经连接了Konva.Circles。但图像的逻辑也是一样的。请找到 plunkr

I have connected Konva.Circles. But the logic for images will also be the same. Please find the 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);

这篇关于KonvaJS：如何用箭头连接两个形状？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！