javascript - 给定矩形上两个对 Angular 线相对的点，如何计算另外两个点

Question

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

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

如何只给定两个点和旋转度数来获得这个值？

请查看我添加的图片以充分理解此问题另外，div 也可以旋转(原点居中)

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

Answer 1

知道两个相对的 Angular 点作为绝对坐标和 Angular 。 (x1,y1)-(x3,y3) 本质上是代表矩形对 Angular 线的旋转线，因此我们可以做:

• 找到线段的中点和长度(中点到 Angular )
• 围绕中点“取消旋转”两个点
• 使用 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);

要获得缺失 Angular 的点，只需旋转由未旋转的点混合而成的新点:

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;

绘图演示

该演示将计算“缺失”点、宽度和高度，并显示每一步的结果。输入 Angular 是为了验证它无论如何都有效。

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>