Javascript 给定2个中心坐标，如何找到所有矩形轴？
对于我正在构建的游戏，我需要在由两个坐标组成的直线的两侧绘制一个矩形 我有一张图片说明了这个“难以提问”的问题 给定坐标（-4,3）和（3，-4） 假设矩形的宽度为4（例如） 我需要找到所有（x1，y1），（x2，y2），（x3，y3），（x4，y4） **我最终需要用Javascript编写这个Javascript 给定2个中心坐标，如何找到所有矩形轴？,javascript,math,geometry,Javascript,Math,Geometry,对于我正在构建的游戏，我需要在由两个坐标组成的直线的两侧绘制一个矩形 我有一张图片说明了这个“难以提问”的问题 给定坐标（-4,3）和（3，-4） 假设矩形的宽度为4（例如） 我需要找到所有（x1，y1），（x2，y2），（x3，y3），（x4，y4） **我最终需要用Javascript编写这个 非常感谢你的帮助 点A、点B构成向量 M.X = B.X - A.X M.Y = B.Y - A.Y 垂直向量 P.X = -M.Y P.Y = M.X p的长度： Len = Math.sqr
非常感谢你的帮助 点A、点B构成向量
M.X = B.X - A.X
M.Y = B.Y - A.Y
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
X1 = A.X + uP.X * HalfWidth
Y1 = A.Y + uP.Y * HalfWidth
(X4, Y4) = (A.X - uP.X * HalfWidth, A.Y - uP.Y * HalfWidth)
and similar for points 2 and 3 around B
点A，B构成向量
M.X = B.X - A.X
M.Y = B.Y - A.Y
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
X1 = A.X + uP.X * HalfWidth
Y1 = A.Y + uP.Y * HalfWidth
(X4, Y4) = (A.X - uP.X * HalfWidth, A.Y - uP.Y * HalfWidth)
and similar for points 2 and 3 around B
我尝试使用javascript和canvas解决这个问题。问题是画布上的坐标是颠倒的，我想你已经知道了。另外，因为你的rect非常小，所以我把你的数字乘以10
const canvas=document.querySelector（“canvas”）；
const ctx=canvas.getContext（“2d”）；
设cw=canvas.width=300，
cx=cw/2；
设ch=canvas.height=300，
cy=ch/2；
const rad=Math.PI/180；
ctx.翻译（cx，cy）
//轴心
ctx.strokeStyle=“#d9d9d9”；
ctx.beginPath（）；
ctx.moveTo（-cx，0）；
ctx.lineTo（cx，0）；
ctx.moveTo（0，-cy）；
ctx.lineTo（0，cy）；
ctx.stroke（）；
//你的数据
设p1={x:-40，y:30}；
设p2={x:30，y:-40}；
//初始线的角度
设角度=Math.atan2（p2.y-p1.y，p2.x-p1.x）；
//中线
设c=
{x:p1.x+（p2.x-p1.x）/2，
y:p1.y+（p2.y-p1.y）/2
}
设w=dist（p1，p2）//矩形的宽度
设h=60//矩形的高度
//画出起始线
线（p1，p2）；
//将中心绘制为红色点
标记（c）；
//计算rect的OPOINT
功能点（w，h）{
设p1={
x:c.x-w/2，
y:c.y-h/2
}
设p2={
x:c.x+w/2，
y:c.y-h/2
}
设p3={
x:c.x+w/2，
y:c.y+h/2
}
设p4={
x:c.x-w/2，
y:c.y+h/2
}
//这将相对于中心c旋转所有点
返回[
旋转（p1，c，角度），
旋转（p2，c，角度），
旋转（p3，c，角度），
旋转（p4，c，角度）
]
}
//画矩形
ctx.strokeStyle=“蓝色”；
drawRect（rectPoints（w，h））；
//一些有用的功能
功能线（p1、p2）{
ctx.beginPath（）；
ctx.moveTo（p1.x，p1.y）；
ctx.lineTo（p2.x，p2.y）；
ctx.stroke（）；
}
功能区（p1、p2）{
设dx=p2.x-p1.x；
设dy=p2.y-p1.y；
返回Math.sqrt（dx*dx+dy*dy）；
}
功能标记（p、颜色）{
ctx.beginPath（）；
ctx.fillStyle=颜色| |“红色”；
ctx.arc（p.x，p.y，4,0,2*Math.PI）；
ctx.fill（）；
}
功能旋转（p、c、角度）{
设cos=Math.cos（角度）；
设sin=Math.sin（角度）；
返回{
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
}
}
函数drawRect（点）{
ctx.beginPath（）；
移动到（点[0].x，点[0].y）；
ctx.lineTo（点[1].x，点[1].y）；
ctx.lineTo（点[2].x，点[2].y）；
ctx.lineTo（点[3].x，点[3].y）；
ctx.lineTo（点[0].x，点[0].y）；
ctx.closePath（）；
ctx.stroke（）；
}canvas{边框：1px实心#d9d9d9}const canvas=document.querySelector（“canvas”）；
const ctx=canvas.getContext（“2d”）；
设cw=canvas.width=300，
cx=cw/2；
设ch=canvas.height=300，
cy=ch/2；
const rad=Math.PI/180；
ctx.翻译（cx，cy）
//轴心
ctx.strokeStyle=“#d9d9d9”；
ctx.beginPath（）；
ctx.moveTo（-cx，0）；
ctx.lineTo（cx，0）；
ctx.moveTo（0，-cy）；
ctx.lineTo（0，cy）；
ctx.stroke（）；
//你的数据
设p1={x:-40，y:30}；
设p2={x:30，y:-40}；
//初始线的角度
设角度=Math.atan2（p2.y-p1.y，p2.x-p1.x）；
//中线
设c=
{x:p1.x+（p2.x-p1.x）/2，
y:p1.y+（p2.y-p1.y）/2
}
设w=dist（p1，p2）//矩形的宽度
设h=60//矩形的高度
//画出起始线
线（p1，p2）；
//将中心绘制为红色点
标记（c）；
//计算rect的OPOINT
功能点（w，h）{
设p1={
x:c.x-w/2，
y:c.y-h/2
}
设p2={
x:c.x+w/2，
y:c.y-h/2
}
设p3={
x:c.x+w/2，
y:c.y+h/2
}
设p4={
x:c.x-w/2，
y:c.y+h/2
}
//这将相对于中心c旋转所有点
返回[
旋转（p1，c，角度），
旋转（p2，c，角度），
旋转（p3，c，角度），
旋转（p4，c，角度）
]
}
//画矩形
ctx.strokeStyle=“蓝色”；
drawRect（rectPoints（w，h））；
//一些有用的功能
功能线（p1、p2）{
ctx.beginPath（）；
ctx.moveTo（p1.x，p1.y）；
ctx.lineTo（p2.x，p2.y）；
ctx.stroke（）；
}
功能区（p1、p2）{
设dx=p2.x-p1.x；
设dy=p2.y-p1.y；
返回Math.sqrt（dx*dx+dy*dy）；
}
功能标记（p、颜色）{
ctx.beginPath（）；
ctx.fillStyle=颜色| |“红色”；
ctx.arc（p.x，p.y，4,0,2*Math.PI）；
ctx.fill（）；
}
功能旋转（p、c、角度）{
设cos=Math.cos（角度）；
设sin=Math.sin（角度）；
返回{
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
}
}
函数drawRect（点）{
ctx.beginPath（）；
移动到（点[0].x，点[0].y）；
ctx.lineTo（点[1].x，点[1].y）；
ctx.lineTo（点[2].x，点[2].y）；
ctx.lineTo（点[3].x，点[3].y）；
ctx.lineTo（点[0].x，点[0].y）；
ctx.closePath（）；
ctx.stroke（）；
}canvas{边框：1px实心#d9d9d9}