Question

我目前无法理解缩放和旋转时原点的工作原理。

例如，如果我要围绕其中心缩放10x10矩形，我希望我必须得到矩形最后的变换细节（x和y），得到矩形的高度和宽度并将它们除以2并将它们添加到x和y，但这不起作用。

使用SnapSVG我使用Snap.Matrix（）方法根据前一个变换创建矩阵：

var data = activeElement.data('originalMatrix');
var s = size/50; // size is a number from 1-100, defaulted to 50
var matrix = new Snap.Matrix(1,0,0,1,data.dx,data.dy);
matrix.rotate(data.rotate);
matrix.scale(s,s);

我认为旋转和缩放方法都接受原点，但我无法弄清楚如何计算这些值。有人知道吗？

问候

Answer 1

我认为通常element.getBBox（）足以满足大多数基本需求。但是对于可能存在影响元素的现有转换的更复杂情况，getBBox不考虑这一点。

你可以尝试

element.getBBox(1);

在评论中，额外的参数是'isWithoutTransform'，这对我来说似乎违反直觉，但它确实有点帮助..

jsfiddle（这可能会略微拖累，我想知道它是否由于文本元素与边界中心的偏移而产生）

jsfiddle也可以帮助有插件。

最终，对于更复杂的交互，我倾向于尝试不依赖矩阵（即从中获取值），并自己控制变量。

这意味着存储rotate / scale / tx / ty并每次自己设置所有这些（即一个updateTransform方法），通过一个Snap transformString（几乎就像一个游戏）。

我还在一段时间内创建了一个从未完成的工具包，但是如果你想要浏览它，可以使用一些有用的东西（参见snaptoolkit.js）

snaptoolkit正在进行中

snapsvg - 变换后缩放/旋转的原点

1 个答案: