如何从边点获得旋转的矩形角点

Question

假设我有一组四个或更多点位于矩形的周长上，并且矩形旋转了一些未知量。我知道矩形的每一侧至少有一个点。一个任意的边点被指定为 (0, 0)，其他点是到这个起点的距离。如何获取这个矩形的非旋转角点？

Answer 1

假设您不是想找到一个独特的解决方案：

1. 围绕 0,0 旋转您的点，直到最顶部、最底部、 最左边和最右边的点都是不同的点
2. 在最顶部和最底部绘制水平线，从最左侧和最右侧绘制垂直线
3. 大功告成

var points = [];
var bs = document.body.style;
var ds = document.documentElement.style;
bs.height = bs.width = ds.height = ds.width = "100%";
bs.border = bs.margin = bs.padding = 0;
var c = document.createElement("canvas");
c.style.display = "block";
c.addEventListener("mousedown", addPoint, false);
document.body.appendChild(c);
var ctx = c.getContext("2d");
var interval;

function addPoint(e) {
    if (points.length >= 4) points = [];
    points.push({
        x: e.x - c.offsetLeft,
        y: e.y - c.offsetTop
    });
    while (points.length > 4) points.shift();
    redraw();
}
function rotateAround(a, b, r) {
    d = {x:a.x - b.x, y:a.y - b.y};
    return {
        x: b.x + Math.cos(r) * d.x - Math.sin(r) * d.y,
        y: b.y + Math.cos(r) * d.y + Math.sin(r) * d.x
    }
}
function drawPoint(p) {
    ctx.strokeStyle = "rgb(0,0,0)";
    ctx.beginPath();
    ctx.arc(p.x, p.y, 10, 0, 2 * Math.PI, true);
    ctx.closePath();
    ctx.stroke();
}

var last_few = [];

function redraw() {
    if (interval) clearInterval(interval);
    last_few = [];
    c.width = window.innerWidth;
    c.height = window.innerHeight;
    ctx.clearRect(0, 0, c.width, c.height);
    ctx.fillStyle = "rgb(200, 200, 200)";
    ctx.font = "40px serif";
    if (points.length < 4) {
        ctx.fillText("click " + (4 - points.length) + " times", 20, 40);
        points.forEach(drawPoint);
    } else {
        var average = {x:0, y:0};
        points.forEach(function (p) {
            average.x += p.x / 4;
            average.y += p.y / 4;
        });
        var step = 0;
        interval = setInterval(function () {
    		ctx.clearRect(0, 0, c.width, c.height);
	        ctx.fillText("click anywhere to start over", 20, 40);
            last_few.forEach(function(r) {
            	ctx.strokeStyle = "rgb(200,255,200)";
                ctx.save();
                ctx.translate(average.x, average.y);
                ctx.rotate((step -r.step) * Math.PI / 180);
            	ctx.strokeRect(r.lm - average.x, r.tm - average.y, (r.rm - r.lm), (r.bm - r.tm));
                ctx.restore();
            });
            var tm = Infinity;
            var bm = -Infinity;
            var lm = Infinity;
            var rm = -Infinity;
            points.forEach(function (p) {
                p = rotateAround(p, average, step * Math.PI / 180);
                drawPoint(p);
                tm = Math.min(p.y, tm);
                bm = Math.max(p.y, bm);
                lm = Math.min(p.x, lm);
                rm = Math.max(p.x, rm);
            });
            if (points.every(function (p) {
                p = rotateAround(p, average, step * Math.PI / 180);
                return (p.x == lm) || (p.x == rm) || (p.y == tm) || (p.y == bm);
            })) {
                ctx.strokeStyle = "rgb(0,255,0)";
                ctx.strokeRect(lm, tm, (rm - lm), (bm - tm));
                last_few.push({tm:tm, bm:bm, lm:lm, rm:rm, step:step});
                while(last_few.length > 30) last_few.shift();
            } else {
                ctx.strokeStyle = "rgb(255,0,0)";
                ctx.strokeRect(lm, tm, (rm - lm), (bm - tm));
            }
            step++;
        }, 30);
    }
}

window.onresize = redraw;
redraw();