Digamos que tengo una línea con la forma: x1, y1, x2, y2 y un thickness dado.
Estoy buscando una manera de convertir esa línea en un rectángulo girado alrededor de su origen, de modo que si dibujaras ambos en un lienzo, se superpondrían por completo.
He desarrollado una reproducción completa del problema al que me enfrento a continuación:
const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const thickness = 7; const lineX1 = 25, lineY1 = 50; const lineX2 = 100, lineY2 = 100; function rotateCanvas(x, y, a) { ctx.translate(x, y); ctx.rotate(a); ctx.translate(-x, -y); } function drawRectangle(rX, rY, rW, rH, rA, color) { ctx.beginPath(); ctx.fillStyle = "#dd3333"; rotateCanvas(rX + rW / 2, rY + rH / 2, rA); ctx.rect(rX, rY, rW, rH); rotateCanvas(rX + rW / 2, rY + rH / 2, -rA); ctx.fill(); } function drawLine(x1, y1, x2, y2) { ctx.lineWidth = thickness; ctx.strokeStyle = "#33dd33"; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } function calcRectFromLine(x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; const mag = Math.sqrt(dx * dx + dy * dy); const angle = Math.atan2(dy, dx); return { x: x1, y: y1, w: mag, h: thickness, a: angle }; } drawLine(lineX1, lineY1, lineX2, lineY2); const r = calcRectFromLine(lineX1, lineY1, lineX2, lineY2); drawRectangle(rx, ry, rw, rh, ra); <canvas></canvas>Si ejecuta el código, verá que el rectángulo rojo no está encima de la línea verde. Me gustaría arreglar eso de alguna manera.
Creo que la única función que debe corregirse es calcRectFromLine . Idealmente, eso devolvería un rectángulo que, cuando se pasa a drawRectangle , haría que la línea verde ya no fuera visible, ya que estaría completamente cubierta por el rectángulo rojo.
También creo que necesito usar algún tipo de sin y cos para compensar el rectángulo rojo, pero no estoy seguro de las matemáticas exactas para lograrlo.
Calculas el rectángulo izquierdo y superior incorrectamente, usando las coordenadas de la línea rotada. Corrección:
return { x: (x1+x2)/2 - mag/2, y: (y1+y2)/2 - thickness/2, w: mag, h: thickness, a: angle };` const canvas = document.querySelector("canvas"); const ctx = canvas.getContext("2d"); const thickness = 7; const lineX1 = 25, lineY1 = 50; const lineX2 = 100, lineY2 = 100; function rotateCanvas(x, y, a) { ctx.translate(x, y); ctx.rotate(a); ctx.translate(-x, -y); } function drawRectangle(rX, rY, rW, rH, rA, color) { ctx.beginPath(); ctx.fillStyle = "#dd3333"; rotateCanvas(rX + rW / 2, rY + rH / 2, rA); ctx.rect(rX, rY, rW, rH); rotateCanvas(rX + rW / 2, rY + rH / 2, -rA); ctx.fill(); } function drawLine(x1, y1, x2, y2) { ctx.lineWidth = thickness; ctx.strokeStyle = "#33dd33"; ctx.beginPath(); ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } function calcRectFromLine(x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; const mag = Math.sqrt(dx * dx + dy * dy); const angle = Math.atan2(dy, dx); return { x: (x1+x2)/2 - mag/2, y: (y1+y2)/2 - thickness/2, w: mag, h: thickness, a: angle }; } drawLine(lineX1, lineY1, lineX2, lineY2); const r = calcRectFromLine(lineX1, lineY1, lineX2, lineY2); drawRectangle(rx, ry, rw, rh, ra); <canvas><\canvas>