围绕元素中心应用变换矩阵答案

【问题标题】：Apply transformation matrix around the center of an element围绕元素中心应用变换矩阵
【发布时间】：2014-05-29 16:44:22
【问题描述】：

我正在使用 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 中，变换是围绕图像中心应用的。

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

【问题讨论】：

标签： html canvas svg transform canvg

【解决方案1】：

您可以创建自己的函数，根据图像的中心点，围绕图像中心进行变换。

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

通过<-X,-Y,-Z>翻译图像，其中 (X,Y,Z) 是图像的中心。
做你想做的转换
通过<X,Y,Z>翻译图片。（你现在只是把它放回原来的位置）

【讨论】：

我试过了。我在转换之前使用了ctx.translate(cx, cy);，其中 cx 和 cy 是图像的中心，但没有显示任何差异。图像围绕原点旋转和缩放。
您必须先翻译图像中心的负，然后再进行转换。所以你必须做ctx.translate(-cx,-cy)。然后做你的转变。然后使用 `ctx.translate(cx,cy) 将其还原。让我知道它是否有效。 :)
你能为此做一个 jsfiddle 吗？
ctx.translate 后跟 ctx.setTransform 时无效。必须在矩阵上执行计算。
我使用的 svg 抛出错误解决这个问题。所以我无法在具有本机canvg文件的jsfiddle中加载它。我认为我所做的更改以某种方式导致了问题。因为当我删除路径并在 canvg 中尝试它时，图像转换是正确的，这可以在小提琴jsfiddle.net/qDmhV/683 中看到！我已将其记录为错误code.google.com/p/canvg/issues/detail?id=287。