Snap.Matrix(). Scale (...) не работает должным образом, как описано в Snap docs.

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, а с предыдущим - тот же результат.

Я надеюсь получить некоторую помощь, С уважением, Д. Mietke

комплементарной ответ Яна У меня есть элемент BOX2 и myMatrix для scaleing элемента. Документы щелчковых сказать мне в

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

, что параметры в [] являются необязательными и единственным применение х масштабируется по горизонтали и вертикали с тем же коэффициентом вокруг центра.

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

в первой строке преобразование Methode («...») не знает о середине Box2 так, как myMatrix. Во второй строке строка преобразования работает с одним масштабным фактором для horz. и vert. но в 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 вар м покажет матрицу (1,0,0,1,0,0)

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

применяется к BOX2 вар м покажет матрицу (0.5,0,0,0.5,0,0)

несколько дней назад все работало нормально (да!) с тот же результат с использованием box2.transform ("s0.5"); или box2.transform (myMatrix); с предопределенной матрицей, как в приведенных выше примерах. Два дня спустя и до сих пор результаты неожиданны. Я не понимаю, что я неправильно понимаю в использовании myMatrix.

С наилучшими пожеланиями, Д. Mietke

Answer 1

Я думаю, что есть несколько вещей. Во-первых, в документах необязательная форма Matrix.scale занимает 4 аргумента, scalex, scaley, centerx, centery. Поэтому представляется разумным просто дублировать scalex в scaley, если они будут одинаковыми.

Для кода вопроса о том, почему матрица не масштабируется вокруг центра объектов, это потому, что матрица не знает, что такое центр объектов (поскольку нет связанного с ним элемента!). И масштаб SVG будет масштабироваться примерно на 0,0.

Так что разница в том, что строки преобразования там, чтобы облегчить жизнь, и принять во внимание все это, если захотите.

Но если вы сделаете эти две линии ...

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

Нет объекта, связанного с тем, чтобы знать, что он должен масштабировать, поэтому он будет просто масштабировать матрицу SVG от 0,0. (Я считаю, что документы ошибочны, когда говорится: «По умолчанию cx, cy - средняя точка элемента.», Поскольку в данный момент нет элемента, связанного с этим).

Когда вы позже сделать

box2.transform(myMatrix); 

Это будет просто применить, что матрица, больше ничего.

Так что, если вам нужен более простой маршрут, используйте строки преобразования. То, для чего они предназначены. Вам очень редко приходится использовать эти матричные команды с помощью Snap, поэтому, если вы это делаете, может быть, что вы делаете жизнь более трудной для себя.

box2.transform('s2'); 

Поскольку эта форма преобразования применяется к элементу (применительно к матрице), он знает, где центр, поэтому он может быть более полезным и добавить центр для вас.

Вы можете найти дополнительную информацию о преобразующей строке here