html - 围绕元素中心应用变换矩阵

Question

我正在使用 Raphael 在 SVG 中进行一些操作。为了将 SVG 保存为图像，我使用 Canvg 在画布中渲染 SVG。但是在画布中渲染的 SVG 内部的图像转换是不对的。Canvg 使用 html5 的原生 transform() 方法使用 Canvg 第 571 行中的以下代码应用转换。

ctx.transform(this.m[0], this.m[1], this.m[2], this.m[3], this.m[4], this.m[5]);

但这会导致围绕图像原点进行旋转和缩放等变换。但在 Raphael 中，变换是围绕图像的中心应用的。

那么是否有可能应用转换以使一切都发生在图像的中心附近？

Answer 1

您可以制作自己的函数，在给定图像中心点的情况下围绕图像中心进行转换。

使事物以中心为中心变换的理论如下：

1. 将图像平移<-X,-Y,-Z>，其中 (X,Y,Z) 是图像的中心。
2. 做你想做的转变
3. 翻译图像<X,Y,Z>。（你现在只是把它放回原来的位置）