在元素的中心周围应用变换矩阵

Question

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

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

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

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

Answer 1

根据图像的中心点，您可以创建自己的功能，使图像中心周围发生变换。

关于通过其中心改变事物的理论如下：

1. 通过 <-X,-Y,-Z> 翻译图像，其中（X，Y，Z）是图像的中心。
2. 进行您想要进行的转型
3. 按 <X,Y,Z> 翻译图片。 （你现在只是将它恢复到原来的位置）