Javascript 给定矩形上两个对角相对的点，如何计算其他两点

我试图在从右上角拖动时重新调整div元素的大小 或左下角

为了计算新的宽度和高度，我需要知道另一个 矩形上的两点

如果只给定两点和旋转度，如何获得该值

请查看我添加的图像以完全理解此问题 此外，还可以旋转div（居中原点）

• 为了澄清我的问题： 其目的是通过将鼠标光标从右上角拖动到左下角来调整div的大小。然后调整图像的大小，使其宽度为鼠标左键之间的距离。高度是从鼠标底部到鼠标底部。为此，我需要在鼠标光标移动时计算左上角和右下角。 多谢各位

---

我认为你应该使用Trigo，但是因为我对这些很糟糕，这里有一个没有任何数学知识的愚蠢方法，来获得你的点的绝对位置

var tl=document.querySelector（'#tl'）.getBoundingClientRect（）；
var tr=document.querySelector（'#tr'）.getBoundingClientRect（）；
var br=document.querySelector（'#br'）.getBoundingClientRect（）；
var bl=document.querySelector（'#bl'）.getBoundingClientRect（）；
变量pointsList={
tl:[tl.左，tl.上]，
tr:[tr.左，tr.上]，
br:[br.左，br.上]，
bl:[bl.左，bl.上]，
};
for（点列表中的变量p）{
document.querySelector（'#r'）。innerHTML+=p++'+pointsList[p]。join（'，'）+'
'；
}

#main{背景色：#CCC；高度：120px；宽度：70px；位置：相对；变换：旋转（30度）}
.dot{宽度：1px；高度：1px；位置：绝对；背景色：#000；}
#tl{top:0；left:0；}
#tr{top:0；right:0；}
#br{底部：0；右侧：0；}
#bl{底部：0；左侧：0；}

---

肯的评论实际上是一个很好的起点。可以采用对角线坡度的切线倒数，并添加旋转的度数，以查找对角线和边之间的角度

m = (y3-y1)/(x3-x1)
diag_angle = arctan(m) 
diag_angle_adjusted = diag_angle + rotation

这将为您提供对角线和左下侧之间的角度。然后，可以使用距离公式获得对角线长度

diag_length = (y3 - y1)^2 + (x3-x1)^2

要计算左下角的长度，可以使用cos公式，而右下角可以使用sin公式

bot_left = diag_length*cos(diag_angle_adjusted)

这将使您获得边的长度，并继续计算其他x和y。比如说,

sin(rotation) = (y2 -  y4)/bot_left

求解y4之后，使用cos求解x4应该相当简单

我是通过电话接听的，还没有正式测试过，但这种方法应该有效。如果答案不清楚的话，希望明天我能有时间画出答案

祝你好运！并确保保持你的标志正确的旋转

知道两个相对的角点作为绝对坐标，以及角度。（x1，y1）-（x3，y3）本质上是一条表示矩形对角线的旋转线，因此我们可以：

• 查找其中点和线段长度（到角点的中点）
• 围绕中点“取消旋转”两个点
• 将abs（）与diff一起使用以获得宽度和高度

基本准则 要获取缺少角点的点，只需旋转由未旋转点混合而成的新点：

cos = Math.cos(angle);
sin = Math.sin(angle);

// Use known coordinates for the new points:
var x2u = x1u, 
    y2u = y3u,
    x4u = x3u, 
    y4u = y1u;

// rotate new points using angle
var x2 = cos * (x2u-mx) - sin * (y2u-my) + mx,
    y2 = sin * (x2u-mx) + cos * (y2u-my) + my,
    x4 = cos * (x4u-mx) - sin * (y4u-my) + mx,
    y4 = sin * (x4u-mx) + cos * (y4u-my) + my;

绘图演示 演示将计算“缺失”点、宽度和高度，并显示每个步骤的结果。输入角度是为了验证它是否可以正常工作

var ctx=document.querySelector（“canvas”）.getContext（“2d”）；
ctx.fillStyle=“#e00”；
文档。查询选择器（“输入”）。添加的事件列表器（“更改”，更新）；
函数更新（）{
//测试矩形：50,25-350175，中心：200200，宽：300，高：150
//生成x1，y1-x3，y3已知点，以便我们可以使用：
var value=typeof this.value！=“未定义”？+this.value:30，
角度=值*Math.PI/180，
x1=数学余弦（角）*（50-200）-数学余弦（角）*（275-200）+200，
y1=数学正（角）*（50-200）+数学正（角）*（275-200）+200，
x3=数学余弦（角）*（350-200）-数学余弦（角）*（125-200）+200，
y3=数学正弦（角度）*（350-200）+数学余弦（角度）*（125-200）+200；
//初始视觉效果：旋转矩形、已知角点
ctx.clearRect（0,0400）；
ctx.strokeStyle=“#000”；
ctx.translate（200200）；
ctx.旋转（角度）；
ctx.translate（-200，-200）；
ctx.strokeRect（50、125、300、150）；
setTransform（1,0,0,1,0,0）；
ctx.fillStyle=“#e00”；
ctx.fillRect（x1-2，y1-2，4，4）；ctx.fillText（x1，y1，x1+5，y1）；
ctx.fillRect（x3-2，y3-2，4，4）；ctx.fillText（“x3，y3”，x3+5，y3）；
//步骤1：查找中心点（原点）
var mx=x1+（x3-x1）*0.5，
my=y1+（y3-y1）*0.5；
ctx.fillRect（mx-2，my-2，4，4）；//绘制中心点
//未旋转已知点（负角度）
var x1u=Math.cos（-angle）*（x1-mx）-Math.sin（-angle）*（y1-my）+mx，
y1u=数学sin（-angle）*（x1-mx）+数学cos（-angle）*（y1-my）+my，
x3u=Math.cos（-angle）*（x3mx）-Math.sin（-angle）*（y3my）+mx，
y3u=Math.sin（-angle）*（x3mx）+Math.cos（-angle）*（y3my）+my；
ctx.fillStyle=“#00c”；
ctx.fillRect（x1u-2，y1u-2，4，4）；ctx.fillText（“x1u，y1u”，x1u+5，y1u-5）；
ctx.fillRect（x3u-2，y3u-2，4，4）；ctx.fillText（“x3u，y3u”，x3u+5，y3u）；
//要获取宽度和高度，请执行以下操作：
变量宽度=数学绝对值（x3u-x1u），
高度=数学绝对值（y3u-y1u）；
ctx.fillText（“大小：+（（宽度+0.5）| 0）+“x”+（（高度+0.5）| 0），0，10）；
//混合已知坐标
变量x2u=x1u，y2u=y3u，
x4u=x3u，y4u=y1u；
//显示未旋转的点
ctx.fillStyle=“#0c0”；
ctx.fillRect（x2u-2，y2u-2，4，4）；ctx.fillText（“x2u，y2u”，x2u+5，y2u-5）；
ctx.fillRect（x4u-2，y4u-2，4，4）；ctx.fillText（“x4u，y4u”，x4u+5，y4u）；
//在未旋转的点之间画线，以显示我们有一个实际的矩形
ctx.strokeStyle=“#777”ctx.beginPath（）；
ctx.moveTo（x1u，y1u）；ctx.lineTo（x2u，y2u）；
ctx.lineTo（x3u，y3u）；ctx.lineTo（x4u，y4u）；
ctx.closePath（）；ctx.stroke（）；
//旋转新点
cos = Math.cos(angle);
sin = Math.sin(angle);

// Use known coordinates for the new points:
var x2u = x1u, 
    y2u = y3u,
    x4u = x3u, 
    y4u = y1u;

// rotate new points using angle
var x2 = cos * (x2u-mx) - sin * (y2u-my) + mx,
    y2 = sin * (x2u-mx) + cos * (y2u-my) + my,
    x4 = cos * (x4u-mx) - sin * (y4u-my) + mx,
    y4 = sin * (x4u-mx) + cos * (y4u-my) + my;

d14 = abs((x3 - x1)*cos(rot) + (y3 - y1)*sin(rot))
d12 = abs((x3 - x1)*cos(rot + 90) + (y3 - y1)sin(rot +90))

x4 = x1 + d14 * cos(rot)
y4 = y1 + d14 * sin(rot)
x2 = x1 + d12 * cos(rot + 90)
y2 = y1 + d12 * sin(rot + 90)