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>

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
const verticalDistance = p2.y - p1.y

ctx.strokeStyle = 'black'


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

// draw right part
ctx.beginPath()
ctx.moveTo(p1.x + horizontalDistance / 2, p1.y + verticalDistance / 2)
ctx.quadraticCurveTo(
  p1.x + horizontalDistance / 2, p2.y,
  p2.x, 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>