给定矩形上两个对角线相对的点，如何计算另外两个点
Given two diagonally opposite points on a rectangle, how to calculate the other two points
我试图在从右上角拖动时调整 div 元素的大小
或左下角。
为了计算新的宽度和高度，我需要知道另一个
矩形上的两个点
如何只给定两个点和旋转度数得到这个值？
请查看我添加的图片以充分理解此问题
另外，div 也可以旋转（原点居中）
- 澄清我的问题：
目的是通过将鼠标光标从右上角拖动到左下角来调整 div 的大小。然后调整图像大小，使宽度成为 mouseX 到左侧的距离。高度将从 mouseY 到底部。为此，我需要在鼠标光标移动时计算左上角和右下角。
谢谢。
我认为你应该为此使用 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();
var pointsList = {
tl:[tl.left, tl.top],
tr:[tr.left, tr.top],
br:[br.left, br.top],
bl:[bl.left, bl.top],
};
for(var p in pointsList){
document.querySelector('#r').innerHTML+=p+' '+pointsList[p].join(' , ')+'<br>';
}
#main{background-color:#CCC;height: 120px; width: 70px; position: relative; transform: rotate(30deg)}
.dot{ width: 1px; height: 1px; position: absolute; background-color:#000;}
#tl{top:0; left:0;}
#tr{top:0; right:0;}
#br{bottom:0; right:0;}
#bl{bottom:0; left:0;}
<div id="main">
<div id="tl" class="dot"></div>
<div id="tr" class="dot"></div>
<div id="br" class="dot"></div>
<div id="bl" class="dot"></div>
</div>
<div id="r">
Ken 的评论实际上是一个很好的起点。您可以取对角线斜率的切线倒数，然后加上旋转的度数，以求出对角线和边之间的夹角。
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 应该相当简单。
我是从我的 phone 那里回答的，还没有正式测试过，但这种方法应该有效。希望明天我有时间在不清楚的情况下绘制答案。
祝你好运！并确保您的标志正确旋转。
知道两个相对的角点作为绝对坐标，和角度。 (x1,y1)-(x3,y3) 本质上是代表对角线的旋转线矩形，所以我们可以这样做：
- 找到线段的中点和长度（中点到角）
- "Unrotate"中点附近的两点
- 使用 abs() 和 diffs 来获取宽度和高度
基本代码
// find center point (origin) using linear interpolation
var mx = x1 + (x3 - x1) * 0.5,
my = y1 + (y3 - y1) * 0.5,
cos = Math.cos(-angle), sin = Math.sin(-angle);
// unrotate known points (using negative of known angle)
var x1u = cos * (x1-mx) - sin * (y1-my) + mx,
y1u = sin * (x1-mx) + cos * (y1-my) + my,
x3u = cos * (x3-mx) - sin * (y3-my) + mx,
y3u = sin * (x3-mx) + cos * (y3-my) + my;
// Get width and height:
var width = Math.abs(x3u - x1u),
height = Math.abs(y3u - y1u);
要获得缺失角的点，只需旋转由未旋转的点混合而成的新点：
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;
绘图演示
该演示将计算 "missing" 个点、宽度和高度，并显示每个步骤的结果。输入角度是为了验证它无论如何都可以工作。
var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "#e00";
document.querySelector("input").addEventListener("change", update);
function update() {
// Test rect: 50,25 - 350, 175, center: 200,200, W: 300, H: 150
// generate x1,y1 - x3,y3 known points so we have something to work with:
var value = typeof this.value !== "undefined" ? +this.value : 30,
angle = value * Math.PI / 180,
x1 = Math.cos(angle) * (50-200) - Math.sin(angle) * (275-200) + 200,
y1 = Math.sin(angle) * (50-200) + Math.cos(angle) * (275-200) + 200,
x3 = Math.cos(angle) * (350-200) - Math.sin(angle) * (125-200) + 200,
y3 = Math.sin(angle) * (350-200) + Math.cos(angle) * (125-200) + 200;
// Initial Visuals: rotated rect, known corner points
ctx.clearRect(0,0,400,400);
ctx.strokeStyle = "#000";
ctx.translate(200,200);
ctx.rotate(angle);
ctx.translate(-200,-200);
ctx.strokeRect(50, 125, 300, 150);
ctx.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);
// Step 1: find center point (origin)
var mx = x1 + (x3 - x1) * 0.5,
my = y1 + (y3 - y1) * 0.5;
ctx.fillRect(mx-2, my-2, 4, 4); // draw center point
// unrotate known points (negative angle)
var x1u = Math.cos(-angle) * (x1-mx) - Math.sin(-angle) * (y1-my) + mx,
y1u = Math.sin(-angle) * (x1-mx) + Math.cos(-angle) * (y1-my) + my,
x3u = Math.cos(-angle) * (x3-mx) - Math.sin(-angle) * (y3-my) + mx,
y3u = Math.sin(-angle) * (x3-mx) + Math.cos(-angle) * (y3-my) + 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);
// To get width and height:
var width = Math.abs(x3u - x1u),
height = Math.abs(y3u - y1u);
ctx.fillText("Size: " + ((width+0.5)|0) + " x " + ((height+0.5)|0), 0, 10);
// Mix known coordinates
var x2u = x1u, y2u = y3u,
x4u = x3u, y4u = y1u;
// show unrotated points
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);
// draw lines between unrotated points to show we have an actual rectangle
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();
// rotate new points using angle
var x2 = Math.cos(angle) * (x2u-mx) - Math.sin(angle) * (y2u-my) + mx,
y2 = Math.sin(angle) * (x2u-mx) + Math.cos(angle) * (y2u-my) + my,
x4 = Math.cos(angle) * (x4u-mx) - Math.sin(angle) * (y4u-my) + mx,
y4 = Math.sin(angle) * (x4u-mx) + Math.cos(angle) * (y4u-my) + my;
// show new coordinates
ctx.fillStyle = "#f0f";
ctx.fillRect(x2-2, y2-2, 4, 4); ctx.fillText("x2,y2", x2+5, y2);
ctx.fillRect(x4-2, y4-2, 4, 4); ctx.fillText("x4,y4", x4+5, y4);
}
update();
<script src="https://cdn.rawgit.com/epistemex/slider-feedback/master/sliderfeedback.min.js"></script>
Angle: <input type=range min=0 max=360 value=30><br><canvas width=400 height=400></canvas>
命名点(x1,x2) p1等，
将旋转角度命名为 rot（示例中为负 30 度），
命名从 p1 到 p4 d14 等的距离
利用向量在轴上的投影长度是该向量在该方向上 ubit 向量上的点积的绝对值这一事实，
p1-p4 的长度是 (cos(rot), sin(rot)) 与 (x3 - x1, y3 - y1) 的点积。
d14 = abs((x3 - x1)*cos(rot) + (y3 - y1)*sin(rot))
d12 = abs((x3 - x1)*cos(rot + 90) + (y3 - y1)sin(rot +90))
如果需要p2和p4的坐标
x4 = x1 + d14 * cos(rot)
y4 = y1 + d14 * sin(rot)
x2 = x1 + d12 * cos(rot + 90)
y2 = y1 + d12 * sin(rot + 90)
（在我的平板电脑上创建，在我的笔记本电脑上工作时进行审核）
我试图在从右上角拖动时调整 div 元素的大小 或左下角。
为了计算新的宽度和高度，我需要知道另一个 矩形上的两个点
如何只给定两个点和旋转度数得到这个值？
请查看我添加的图片以充分理解此问题 另外，div 也可以旋转（原点居中）
- 澄清我的问题： 目的是通过将鼠标光标从右上角拖动到左下角来调整 div 的大小。然后调整图像大小，使宽度成为 mouseX 到左侧的距离。高度将从 mouseY 到底部。为此，我需要在鼠标光标移动时计算左上角和右下角。 谢谢。
我认为你应该为此使用 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();
var pointsList = {
tl:[tl.left, tl.top],
tr:[tr.left, tr.top],
br:[br.left, br.top],
bl:[bl.left, bl.top],
};
for(var p in pointsList){
document.querySelector('#r').innerHTML+=p+' '+pointsList[p].join(' , ')+'<br>';
}
#main{background-color:#CCC;height: 120px; width: 70px; position: relative; transform: rotate(30deg)}
.dot{ width: 1px; height: 1px; position: absolute; background-color:#000;}
#tl{top:0; left:0;}
#tr{top:0; right:0;}
#br{bottom:0; right:0;}
#bl{bottom:0; left:0;}
<div id="main">
<div id="tl" class="dot"></div>
<div id="tr" class="dot"></div>
<div id="br" class="dot"></div>
<div id="bl" class="dot"></div>
</div>
<div id="r">
Ken 的评论实际上是一个很好的起点。您可以取对角线斜率的切线倒数，然后加上旋转的度数，以求出对角线和边之间的夹角。
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 应该相当简单。
我是从我的 phone 那里回答的，还没有正式测试过，但这种方法应该有效。希望明天我有时间在不清楚的情况下绘制答案。
祝你好运！并确保您的标志正确旋转。
知道两个相对的角点作为绝对坐标，和角度。 (x1,y1)-(x3,y3) 本质上是代表对角线的旋转线矩形，所以我们可以这样做：
- 找到线段的中点和长度（中点到角）
- "Unrotate"中点附近的两点
- 使用 abs() 和 diffs 来获取宽度和高度
基本代码
// find center point (origin) using linear interpolation
var mx = x1 + (x3 - x1) * 0.5,
my = y1 + (y3 - y1) * 0.5,
cos = Math.cos(-angle), sin = Math.sin(-angle);
// unrotate known points (using negative of known angle)
var x1u = cos * (x1-mx) - sin * (y1-my) + mx,
y1u = sin * (x1-mx) + cos * (y1-my) + my,
x3u = cos * (x3-mx) - sin * (y3-my) + mx,
y3u = sin * (x3-mx) + cos * (y3-my) + my;
// Get width and height:
var width = Math.abs(x3u - x1u),
height = Math.abs(y3u - y1u);
要获得缺失角的点，只需旋转由未旋转的点混合而成的新点：
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;
绘图演示
该演示将计算 "missing" 个点、宽度和高度，并显示每个步骤的结果。输入角度是为了验证它无论如何都可以工作。
var ctx = document.querySelector("canvas").getContext("2d");
ctx.fillStyle = "#e00";
document.querySelector("input").addEventListener("change", update);
function update() {
// Test rect: 50,25 - 350, 175, center: 200,200, W: 300, H: 150
// generate x1,y1 - x3,y3 known points so we have something to work with:
var value = typeof this.value !== "undefined" ? +this.value : 30,
angle = value * Math.PI / 180,
x1 = Math.cos(angle) * (50-200) - Math.sin(angle) * (275-200) + 200,
y1 = Math.sin(angle) * (50-200) + Math.cos(angle) * (275-200) + 200,
x3 = Math.cos(angle) * (350-200) - Math.sin(angle) * (125-200) + 200,
y3 = Math.sin(angle) * (350-200) + Math.cos(angle) * (125-200) + 200;
// Initial Visuals: rotated rect, known corner points
ctx.clearRect(0,0,400,400);
ctx.strokeStyle = "#000";
ctx.translate(200,200);
ctx.rotate(angle);
ctx.translate(-200,-200);
ctx.strokeRect(50, 125, 300, 150);
ctx.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);
// Step 1: find center point (origin)
var mx = x1 + (x3 - x1) * 0.5,
my = y1 + (y3 - y1) * 0.5;
ctx.fillRect(mx-2, my-2, 4, 4); // draw center point
// unrotate known points (negative angle)
var x1u = Math.cos(-angle) * (x1-mx) - Math.sin(-angle) * (y1-my) + mx,
y1u = Math.sin(-angle) * (x1-mx) + Math.cos(-angle) * (y1-my) + my,
x3u = Math.cos(-angle) * (x3-mx) - Math.sin(-angle) * (y3-my) + mx,
y3u = Math.sin(-angle) * (x3-mx) + Math.cos(-angle) * (y3-my) + 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);
// To get width and height:
var width = Math.abs(x3u - x1u),
height = Math.abs(y3u - y1u);
ctx.fillText("Size: " + ((width+0.5)|0) + " x " + ((height+0.5)|0), 0, 10);
// Mix known coordinates
var x2u = x1u, y2u = y3u,
x4u = x3u, y4u = y1u;
// show unrotated points
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);
// draw lines between unrotated points to show we have an actual rectangle
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();
// rotate new points using angle
var x2 = Math.cos(angle) * (x2u-mx) - Math.sin(angle) * (y2u-my) + mx,
y2 = Math.sin(angle) * (x2u-mx) + Math.cos(angle) * (y2u-my) + my,
x4 = Math.cos(angle) * (x4u-mx) - Math.sin(angle) * (y4u-my) + mx,
y4 = Math.sin(angle) * (x4u-mx) + Math.cos(angle) * (y4u-my) + my;
// show new coordinates
ctx.fillStyle = "#f0f";
ctx.fillRect(x2-2, y2-2, 4, 4); ctx.fillText("x2,y2", x2+5, y2);
ctx.fillRect(x4-2, y4-2, 4, 4); ctx.fillText("x4,y4", x4+5, y4);
}
update();
<script src="https://cdn.rawgit.com/epistemex/slider-feedback/master/sliderfeedback.min.js"></script>
Angle: <input type=range min=0 max=360 value=30><br><canvas width=400 height=400></canvas>
命名点(x1,x2) p1等，
将旋转角度命名为 rot（示例中为负 30 度），
命名从 p1 到 p4 d14 等的距离
利用向量在轴上的投影长度是该向量在该方向上 ubit 向量上的点积的绝对值这一事实，
p1-p4 的长度是 (cos(rot), sin(rot)) 与 (x3 - x1, y3 - y1) 的点积。
d14 = abs((x3 - x1)*cos(rot) + (y3 - y1)*sin(rot))
d12 = abs((x3 - x1)*cos(rot + 90) + (y3 - y1)sin(rot +90))
如果需要p2和p4的坐标
x4 = x1 + d14 * cos(rot)
y4 = y1 + d14 * sin(rot)
x2 = x1 + d12 * cos(rot + 90)
y2 = y1 + d12 * sin(rot + 90)
（在我的平板电脑上创建，在我的笔记本电脑上工作时进行审核）