snapsvg - 转换后 scale/rotate 的原点

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 有插件可能也有帮助。

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

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

不久前我还开始了一个工具包，它从未完成，但如果你想浏览它，它有一些有用的部分（参见 snaptoolkit.js）

snaptoolkit 进行中

snapsvg - 转换后 scale/rotate 的原点

snapsvg - point of origin for scale/rotate after transform

snap.svg