给定2个中心坐标，如何找到所有矩形轴？

Question

对于我要开发的游戏，我需要在由两个坐标组成的直线的两侧绘制一个矩形。

我有一张图片说明了这个“很难问”的问题。

给定的坐标（-4,3）和（3，-4） 假设矩形的宽度为4（例如） 我需要找到所有（x1，y1），（x2，y2），（x3，y3），（x4，y4）

**我最终需要用Javascript编写。

非常感谢您的帮助。

Answer 1

点A，B的形式向量

 openDialog(data) {
        const dialogRef = this.dialog.open(DialogContentExampleDialog);

        dialogRef.afterClosed().subscribe(data=> {
          return this.http.delete(this.Url + '/delete' + id).subscribe(
          data => {
          console.log("DELETE Request is successful ", data);
  },
  error => {
    console.log("Error", error);
  })

垂直向量

M.X = B.X - A.X
M.Y = B.Y - A.Y

P的长度：

P.X = -M.Y
P.Y =  M.X

归一化（单位）垂直：

Len = Math.sqrt(P.X*P.X + P.Y*P.Y)

点

 uP.X = P.X / Len
 uP.Y = P.Y / Len

Answer 2

我尝试使用javascript和canvas解决此问题。问题是画布中的坐标是颠倒的，我想您已经知道了。另外，由于您的rect非常小，因此我将您的数字乘以10。

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
let cw = canvas.width = 300,
  cx = cw / 2;
let ch = canvas.height = 300,
  cy = ch / 2;


const rad = Math.PI / 180;
ctx.translate(cx,cy)

//axis
ctx.strokeStyle = "#d9d9d9";
ctx.beginPath();
ctx.moveTo(-cx,0);
ctx.lineTo(cx,0);
ctx.moveTo(0,-cy);
ctx.lineTo(0,cy);
ctx.stroke();


// your data
let p1={x:-40,y:30};
let p2={x:30,y:-40};
// the angle of the initial line
let angle = Math.atan2(p2.y-p1.y, p2.x-p1.x);
// the center of the line
let c = 
  {  x: p1.x + (p2.x - p1.x)/2,
     y: p1.y + (p2.y - p1.y)/2
  }


let w = dist(p1, p2);//the width of the rect
let h = 60;//the height of the rect

// draw the initial line
line(p1,p2);
// draw the center as a red point
marker(c);

// calculate the opoints of the rect
function rectPoints(w,h){
  let p1 = {
  x : c.x -w/2,
  y : c.y -h/2
  }
  let p2 = {
  x : c.x + w/2,
  y : c.y -h/2
  }
  let p3 = {
  x : c.x + w/2,
  y : c.y +h/2
  }
  let p4 = {
  x : c.x -w/2,
  y : c.y +h/2
  }
  
  // this rotate all the points relative to the center c
  return [
    rotate(p1,c, angle),
    rotate(p2,c, angle),
    rotate(p3,c, angle),
    rotate(p4,c, angle)
  ]
}


// draw the rect

ctx.strokeStyle = "blue";
drawRect(rectPoints(w,h));

// some helpful functions
function line(p1,p2){
  ctx.beginPath();
  ctx.moveTo(p1.x,p1.y);
  ctx.lineTo(p2.x,p2.y);
  ctx.stroke();
}

function dist(p1, p2) {
  let dx = p2.x - p1.x;
  let dy = p2.y - p1.y;
  return Math.sqrt(dx * dx + dy * dy);
}

function marker(p,color){
  ctx.beginPath();
  ctx.fillStyle = color || "red";
  ctx.arc(p.x,p.y,4,0,2*Math.PI);
  ctx.fill();
}

function rotate(p,c, angle){
  let cos = Math.cos(angle);
  let sin = Math.sin(angle);
  return {
  x: c.x + (p.x - c.x) * cos - (p.y - c.y) * sin,
  y: c.y + (p.x - c.x) * sin + (p.y - c.y) * cos
  }
}

function drawRect(points){
  ctx.beginPath();
  ctx.moveTo(points[0].x,points[0].y);
  ctx.lineTo(points[1].x,points[1].y);
  ctx.lineTo(points[2].x,points[2].y);
  ctx.lineTo(points[3].x,points[3].y);
  ctx.lineTo(points[0].x,points[0].y);
  ctx.closePath();
  ctx.stroke();
}

canvas{border:1px solid #d9d9d9}

<canvas></canvas>