canvas - 回転原点を持つ 2 次元変換行列を作成する

Question

HTMLキャンバスでピボットを使用して2D変換マトリックスを取得しようとしています。0,0 のピボットを使用するとすべて正常に動作しますが、黄色の形状に回転原点を追加するとすぐに、希望どおりに動作しません。

http://i.imgur.com/TYeuUUP.jpg

黄色の形状の中心は、赤色の形状と同じ位置にある必要があります。ピボットの位置は、ワールドではなく、シェイプを基準にする必要があります。数年前にこの問題の解決策を見つけましたが、正確な計算を思い出せません。tx と ty の何かが欠けていることはわかっています。

何か案は？

drawRectangle(context, 45, new Vector2(50, 50), new Vector2(1, 1), new Vector2(50, 50), 'yellow');
drawRectangle(context, 0, new Vector2(50, 50), new Vector2(1, 1), new Vector2(0, 0), 'red');
void drawRectangle(CanvasRenderingContext2D context, num rotation, Vector2 position, Vector2 scale, Vector2 pivot, String color) {
    Matrix3 m = new Matrix3.Identity();
    num rad = toRadians(rotation);
    num sr = sin(rad);
    num cr = cos(rad);
    m.a = cr * scale.x;
    m.b = sr * scale.x;
    m.c = -sr * scale.y;
    m.d = cr * scale.y;
    m.tx = position.x - (pivot.x * m.a + pivot.y * m.c);
    m.ty = position.y - (pivot.x * m.b + pivot.y * m.d);
    context.setTransform(m.a, m.b, m.c, m.d, m.tx, m.ty);
    context.beginPath();
    context.rect(0, 0, 100, 100);
    context.fillStyle = color;
    context.globalAlpha = 0.5;
    context.fill();
    context.closePath();
    context.resetTransform();
}