canvas - 创建一个具有旋转原点的二维变换矩阵

Question

我试图让我的二维转换矩阵在我的 html 画布中工作。当我使用 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();
}