回転させる前に矩形の左上隅の元の座標を計算しようとしています。 、どのように計算することになる私は矩形N度/ラジアンを回転させた知ること回転前のコーナーの元の座標を決定する
が与えられ、Iは新しいXとY座標を知るXとY (?および?) JavaScriptの三角法?私はまた、の幅との高さの四角形を知っています。回転の軸は矩形の中央です。
回転矩形が青色である、元は緑です。
回転させる前に矩形の左上隅の元の座標を計算しようとしています。 、どのように計算することになる私は矩形N度/ラジアンを回転させた知ること回転前のコーナーの元の座標を決定する
が与えられ、Iは新しいXとY座標を知るXとY (?および?) JavaScriptの三角法?私はまた、の幅との高さの四角形を知っています。回転の軸は矩形の中央です。
回転矩形が青色である、元は緑です。
は(「回転」)を転置としてX元が正確まで軸からYされ、およびその逆、オリジナルYは限りX転置と同様です軸から。
だから:
origX = axisX - (axisYからtransY)
origY = axisY - (axisXからTransXの)
ピボットを中心に反時計回りに回転させる必要があります。 (RECTの中央)
//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));
謝罪は、それは私のために少し朝早くです。転位式は使えますか?すなわち、私が持っている情報から 'transX'と' transY'をどうやって得るのですか? – shennan
@shennan * transX、Y * = "* newX、Y *" – Amit
'origY'はこれで正しく計算されないようです。 'var width = 200、height = 100、axisX = 275、axisY = 200、transX = 325、transY = 47.7;の結果、' origY'は '250'であるはずです。 'origX'は' 122.69'で正しいようです。私は間違って何をしていますか? – shennan