绘制 90 度角线的算法

Question

直截了当，我希望实现的是能够在具有这种形状的两个元素之间创建一条连接线：

DBDIAGRAM.IO

当元素移动时，线会重置，但始终保持 90 度角，而不是 [x,y] 到 [x,y] 之间的直线或对角线。

有某种算法吗？也许是具有某种 A* 实现的网格？

Answer 1

我不知道如何使圆角变得容易，但最简单的例子是：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

// define the points
const p1 = {
  x: 30,
  y: 50
}

const p2 = {
  x: 150,
  y: 130
}

ctx.strokeStyle = 'red'

// draw the points
ctx.beginPath()
ctx.arc(p1.x, p1.y, 5, 0, Math.PI * 2)
ctx.stroke()

ctx.beginPath()
ctx.arc(p2.x, p2.y, 5, 0, Math.PI * 2)
ctx.stroke()

// get distance between
const horizontalDistance = p2.x - p1.x

ctx.strokeStyle = 'black'


// draw left part
ctx.beginPath()
ctx.moveTo(p1.x, p1.y)
ctx.lineTo(p1.x + horizontalDistance / 2, p1.y)
ctx.stroke()

// draw vertical part
ctx.beginPath()
ctx.moveTo(p1.x + horizontalDistance / 2, p1.y)
ctx.lineTo(p1.x + horizontalDistance / 2, p2.y)
ctx.stroke()

// draw right part
ctx.beginPath()
ctx.moveTo(p1.x + horizontalDistance / 2, p2.y)
ctx.lineTo(p2.x, p2.y)
ctx.stroke()

canvas {
  border: 1px solid black;
}

<canvas></canvas>

实时版本：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')

const p1 = {
  x: canvas.width / 2,
  y: canvas.height / 2
}

const p2 = {
  x: 150,
  y: 130
}

canvas.addEventListener('mousemove', e => {
  const mousePos = getMousePos(canvas, e)
  p2.x = mousePos.x
  p2.y = mousePos.y
})

loop()

function loop() {
  draw()
  requestAnimationFrame(loop)
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height)
  ctx.strokeStyle = 'red'

  ctx.beginPath()
  ctx.arc(p1.x, p1.y, 5, 0, Math.PI * 2)
  ctx.stroke()

  ctx.beginPath()
  ctx.arc(p2.x, p2.y, 5, 0, Math.PI * 2)
  ctx.stroke()

  const horizontalDistance = p2.x - p1.x

  ctx.strokeStyle = 'black'


  ctx.beginPath()
  ctx.moveTo(p1.x, p1.y)
  ctx.lineTo(p1.x + horizontalDistance / 2, p1.y)
  ctx.stroke()

  ctx.beginPath()
  ctx.moveTo(p1.x + horizontalDistance / 2, p1.y)
  ctx.lineTo(p1.x + horizontalDistance / 2, p2.y)
  ctx.stroke()

  ctx.beginPath()
  ctx.moveTo(p1.x + horizontalDistance / 2, p2.y)
  ctx.lineTo(p2.x, p2.y)
  ctx.stroke()

}

function getMousePos(canvas, evt) {
  const rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

canvas {
  border: 1px solid black;
}

<canvas></canvas>