snapsvg - точка начала для масштабирования/поворота после преобразования

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); 

I под стендом, что для обоих вращать и масштабировать методы принимают точку происхождения, но я не могу как вычислить эти значения. Кто-нибудь знает?

С уважением

Answer 1

Я думаю, что, как правило, element.getBBox() достаточно для большинства основных потребностей. Но для более сложных ситуаций, когда может быть существующее преобразование, влияющее на элемент, getBBox не учитывает это.

Вы можете попробовать

element.getBBox(1); 

В комментариях, дополнительный параметр «isWithoutTransform», что кажется нелогичным для меня, но это действительно помогает немного ..

jsfiddle (это может пропустить немного на перетаскивании, и мне интересно, связано ли это из-за смещения текстового элемента против ограничивающего центра)

jsfiddle Может также помочь в наличии плагина.

В конечном итоге для более сложных взаимодействий я бы старался не полагаться на матрицы (т. Е. Получать значения от них) и самостоятельно контролировать переменные.

Это будет означать, что вы будете вращать/масштабировать/tx/ty и каждый раз устанавливать их самостоятельно (т. Е. Один метод updateTransform) через одну Snap transformString (почти как игру).

Я также начал инструментарий некоторое время назад, что никогда не была закончена, но имеет некоторые полезные биты, если вы хотите, чтобы божий (см snaptoolkit.js)

snaptoolkit в ходе