在旋轉之前確定拐角的原始座標

Question

我正在嘗試計算旋轉之前矩形頂部左角的原始座標。

既然我知道矩形下旋轉ň度/弧度，並且我知道新X和ÿ座標，我將如何計算X和ÿ （？和？）座標使用JavaScript中的三角函數？我也知道寬度和高度的矩形。旋轉的軸是矩形的中心。

的旋轉矩形是藍色的，原來是綠色。

Answer 1

原始X是完全一樣的遠離軸爲換位（「旋轉」）Ý是，反之亦然，原ÿ是儘可能的轉置X是從軸。

所以：

origX = axisX - （axisY - transY）
origY = axisY - （axisX - transX）

Answer 2

你必須圍繞樞軸反向旋轉它。 （該矩形的中心）

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