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

Question

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

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

如何只给出两个点和旋转度？

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

• 澄清我的问题： 目的是通过将鼠标光标从右上角拖动到左下角来调整div的大小。然后调整图像大小，使宽度为mouseX与左侧之间的距离。并且高度将从鼠标Y到底部。因此，当鼠标光标移动时，我需要计算左上角和右下角。 谢谢。

Answer 1

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

• 找到它的中点和段的长度（中点到角落）
• ＆＃34; Unrotate＆＃34;中点附近的两点
• 使用带有差异的abs（）来获取宽度和高度

基本代码

// 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;

使用绘图进行演示

该演示将计算＆＃34;缺失＆＃34;点，宽度和高度，并显示每个步骤的结果。输入角度是为了验证它是否有效。

＆＃13;

＆＃13;

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();

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我认为你应该使用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">

Answer 3

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应该相当简单。

我正在通过手机接听并且尚未对此进行正式测试，但这种方法应该有效。希望明天，如果不清楚，我将有时间绘制答案。

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

Answer 4

命名点（x1，x2）p1等， 命名旋转角度rot（在示例中减去30deg）， 将距离命名为p1到p4 d14等。

使用一个事实，即一个矢量在轴上的投影长度是该矢量在该方向上的该矢量的点积的绝对值，

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)

（在我的平板电脑上创建，在我的笔记本电脑上工作时进行审核）