Question

我尝试学习使用Snap.SVG。创建一个新的Snap矩阵我用方法matrix.scale（）获得了意想不到的结果。使用el.transform（＆＃34; s ...＆＃34;）将按照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

在第一行中，方法转换（＆＃34; ...＆＃34;）并不知道box2的中间位置，因为myMatrix。在第二行中，变换字符串与horz的一个缩放faktor一起使用。和垂直但在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将显示矩阵（1,0,0,1,0,0）

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

应用于box2，var m将显示矩阵（0.5,0,0,0.5,0,0）

前几天一切都运行良好（是的！）与使用相同的结果 box2.transform（＆＃34; S0.5＆＃34）;或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矩阵比例。（我相信文档说错了＃34;默认cx，cy是元素的中间点。＆＃34;因为目前没有涉及这个元素。）

以后再做

box2.transform(myMatrix);

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

所以如果你想要更简单的路线，请使用变换字符串。那就是他们在那里。你很少需要将这些矩阵命令与Snap一起使用，所以如果你这样做，可能会让你的生活变得更加困难。

box2.transform('s2');

当这种形式的变换应用于元素（应用于矩阵）时，它知道中心的位置，因此它可以更有帮助并为您添加中心。

您可以找到有关变换字符串here

的更多信息

Snap.Matrix（）。scale（...）无法按照Snap docs

1 个答案: