Snap.Matrix().scale(...) 无法按 Snap 文档中的预期工作

Question

我尝试学习使用 Snap.SVG。创建一个新的 Snap 矩阵我使用方法 matrix.scale() 得到了意想不到的结果。使用 el.transform("s...") 将按照 Snap 文档中的描述工作。这里唯一用到的脚本代码：

var s = Snap(#svgout);
var box = s.rect(100,70, 100,60).attr({opacity: 0.3});
var box2 = box.clone().attr({fill: "#0f0", opacity: 0.5});
var myMatrix = new Snap.matrix();
myMatrix.scale(0.5);
box2.transform(myMatrix);   // isn't using the center of box2

使用 myMatrix.scale(0.5,150,100) box2 的中心坐标，它不会缩放。我必须使用带有水平和垂直比例因子的 myMatrix.scale(0.5,0.5,150,100) 以及元素中心的坐标以获得预期结果。
在 Firefox、Opera 和 Chrome 中显示的结果相同。我正在使用最新的 Snap.Svg 库，与以前的库相同。

我希望得到一些帮助，忠实的 D. Mietke

作为 Ian 回答的补充，我有一个元素 box2 和 myMatrix 用于缩放元素。 Snap 文档在

中告诉我

Matrix.scale(x,[y],[cx],[cy]); 

[] 中的参数是可选的，x 的唯一用途将在水平和垂直方向以相同的因子围绕中心进行缩放。

box2.transform("s0.5");   // works fine
box2.transform("s0.5,150,100"); // same result (150,100) is the centre

在第一行中，方法 transform("...") 不知道 box2 的中间部分，例如 myMatrix.在第二行中，转换字符串与 horz 的一个比例因子一起工作。和垂直。但在 myMatrix 我必须写

myMatrix.scale(0.5,0.5,150,100); // both scale factors for one

应用于box2，得到矩阵

var m = box2.transform().localMatrix; // matrix(0.5,0,0,0.5,75,50)

myMatrix.scale(0.5,150,100);  // doesn't work

应用于 box2 的 var m 将显示 matrix(1,0,0,1,0,0)

myMatrix.scale(0.5);  // doesn't use the centre like the transform("...")

应用于 box2 的 var m 将显示 matrix(0.5,0,0,0.5,0,0)

几天前一切正常（是的！）通过使用 box2.transform("s0.5");或 box2.transform(myMatrix);使用如上例中的预定义矩阵。两天后到现在，结果出乎意料。我看不出我在使用 myMatrix 时有什么误解。

谨此致以，D. Mietke

Answer 1

我认为有几件事。首先在文档中，Matrix.scale 的可选形式需要 4 个 args，scalex，scaley，centerx，centery。因此，如果它们都相同，将 scalex 复制到 scaley 似乎是合理的。

对于为什么矩阵不围绕对象中心缩放的代码问题，这是因为矩阵无法知道对象中心是什么（因为没有关联的元素！）。 SVG 比例仍然会在 0,0 左右缩放。

所以不同的是，转换字符串的存在是为了让生活更轻松，如果需要的话，可以考虑所有这些东西。

但是如果你做这两行...

var myMatrix = new Snap.matrix();
myMatrix.scale(0.5);

没有关联的对象知道它应该围绕什么进行缩放，因此它只会从 0,0 进行 SVG 矩阵缩放。 （当它说“默认 cx，cy 是元素的中间点”时，我认为文档是错误的。因为目前没有涉及此的元素）。

你以后做的时候

box2.transform(myMatrix);

它只会应用那个矩阵，仅此而已。

因此，如果您真的想要更简单的路线，请使用转换字符串。这就是他们在那里的目的。你很少需要在 Snap 中使用这些矩阵命令，所以如果你这样做了，可能会让你自己的生活变得更加困难。

box2.transform('s2');

由于这种形式的变换应用于元素（如应用于矩阵），它知道中心在哪里，所以它可以更有帮助并为您添加中心。

您可以找到有关转换字符串here的更多信息