HTML Canvas获得两条曲线以在同一点上相遇

Question

我试图让页面上的元素在同一点上弯曲。我知道，因为他们想要向不同的方向弯曲，这可能会导致我遇到的一些问题，但我很难弄清楚如何绕过它。

MOCK（我想要的）

现实（我在代码中有什么）

任何有效如何做到这一点的指导都将是一个很大的帮助。

Typescript（获取我需要的单个元素x和y的代码）

gPoints.map(n => {
  const pointx = n.offsetLeft + (n.offsetWidth / 2);
  const pointy = n.offsetTop + (n.offsetHeight);

  const thePoints = {
    "x": pointx,
    "y": pointy
  };

  if (gPoints.length > 1) {
    this.createArrow(thePoints, this.bottomSystemPanelPoints, 0, true);
  } else {
    this.createArrow(thePoints, this.bottomSystemPanelPoints, 0, false);
  }
});

Typescript（创建线条的函数）

  createArrow(p1, p2, size, curved) {
    const angle = Math.atan2((p2.y - p1.y), (p2.x - p1.x));
    const hyp = Math.sqrt((p2.x - p1.x) * (p2.x - p1.x) + (p2.y - p1.y) * (p2.y - p1.y));

    this.cx.save();
    this.cx.translate(p1.x, p1.y);
    this.cx.rotate(angle);

    // line
    this.cx.beginPath();
    this.cx.strokeStyle = '#DADBDC';
    this.cx.lineWidth = 5;
    this.cx.moveTo(0, 0);
    if (curved) {
      // Creates a curved line
      this.cx.quadraticCurveTo(0, p1.y, 100, (p1.x - p2.x));
    } else {
      // Creates a straight line
      this.cx.lineTo(hyp - size, 0);
    }
    this.cx.stroke();

    // triangle
    this.cx.fillStyle = '#DADBDC';
    this.cx.beginPath();
    this.cx.lineTo(hyp - size, size);
    this.cx.lineTo(hyp, 0);
    this.cx.lineTo(hyp - size, -size);
    this.cx.fill();

    this.cx.restore();
  }

每个圆圈节点的一些参考是单独运行此功能。所以p1是彩色圆圈，而p2是指底部的“硬件”面板。

哦，如果有人想知道我在Angular4中这样做，虽然我不相信这应该与此有任何关系。