确定旋转前角的原始坐标

Question

我想在一个矩形旋转之前计算矩形左上角的原始坐标。

鉴于我知道矩形已旋转 n 度/弧度，并且我知道新的 x 和 y 坐标，我将如何计算 x 和 y (? 和 ?) 在 JavaScript 中使用三角函数坐标？我也知道矩形的 width 和 height。旋转轴位于矩形的中心。

旋转后的矩形为蓝色，原始矩形为绿色。

Answer 1

您必须围绕枢轴反向旋转它。 （矩形的中心）

//utils
function nr(v){ return +v || 0 }

class Point{
    constructor(x,y){
        this.x = nr(x);
        this.y = nr(y);
    }

    add(pt){
        var a = this, b = Point.from(pt);
        return new Point(a.x + b.x, a.y + b.y);
    }

    subtract(pt){
        var a = this, b = Point.from(pt);
        return new Point(a.x - b.x, a.y - b.y);
    }

    rotate(radians, pivot){
        if(pivot){
            return this.subtract(pivot).rotate(radians).add(pivot);             
        }

        var r = nr(radians), c = Math.cos(r), s = Math.sin(r);
        return new Point(
            this.x * c - this.y * s,
            this.x * s + this.x * c
        );
        //return delta.matrixTransform( c, s, -s, c );
    }

    matrixTransform(a, b, c, d, tx, ty){
        return new Point(
            this.x * nr(a) + this.y * nr(c) + nr(tx),
            this.x * nr(b) + this.y * nr(d) + nr(ty)
        )
    }

    static from(pt){
        if(pt instanceof Point) return pt;
        return new Point(pt && pt.x, pt && pt.y);
    }
}

和计算：

var RAD = Math.PI/180, DEG = 180/Math.PI;

var knownPoint = new Point(100, 100);
var angle = 30*RAD;

var unrotatedRect = { width: 150, height: 100 };
//the pivot to (counter-)rotate your known point
//if you know this point, you don't have to compute it
var pivot = new Point(unrotatedRect.width/2, unrotatedRect.height/2)
    .rotate(angle)
    .add(knownPoint);

console.log(knownPoint.rotate(-angle, pivot));

Answer 2

原来的X与转置（“旋转”）Y的距离正好一样，反之亦然，原始 Y 与转置后的 X 距离轴一样远。

所以：

origX = axisX - (axisY - transY)
origY = axisY - (axisX - transX)