偏移相当于平移然后旋转

Question

目标是找出 vx 和 vy 必须是什么，所以下面的两个代码是等价的。

//this is the behaviour I want
ctx.translate(x,y);
ctx.rotate(angle);
ctx.fillRect(0,0,10,10);

//find vx and vy so both this below is equivalent to above
var vx = ?;
var vy = ?;
ctx.rotate(angle);
ctx.fillRect(0 + vx, 0 + vy,10,10);

Answer 1

答案是将点反过来。

Tk.rotatePt.x = function(x,y,rad_angle,anchorX,anchorY){
    return Math.cos(rad_angle) * (x-anchorX) - Math.sin(rad_angle) * (y-anchorY) + anchorX;
}
Tk.rotatePt.y = function(x,y,rad_angle,anchorX,anchorY){
    return Math.sin(rad_angle) * (x-anchorX) + Math.cos(rad_angle) * (y-anchorY) + anchorY;
}

var vx = Tk.rotatePt.x(x,y,-angle,0,0);
var vy = Tk.rotatePt.y(x,y,-angle,0,0);