畫90度角線的演算法-有解無憂

開門見山，我希望實作的是能夠在具有這種形狀的兩個元素之間創建一條連接線：

畫90度角線的演算法

資料庫圖表.IO

當元素移動時，該線會重置但始終保持 90 度角，而不是 [x,y] 到 [x,y] 之間的直線或對角線。

這有某種演算法嗎？也許是具有某種 A* 實作的網格？

uj5u.com熱心網友回復：

我不知道如何輕松制作圓角，但最簡單的示例是：

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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/533657.html

標籤：javascript算法康瓦伊斯

上一篇：尋找具有最佳標準的排列的演算法

下一篇：在Python中生成隨機（種子）數