创建具有旋转原点的2d变换矩阵

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();
}