Чтение и изменение значения поворота элемента в SnapSVG

Question

Просьба проверить эту неполную скрипку ( https://jsfiddle.net/JayKandari/srqLLd97/).

Разметка:

<svg id="paper" ></svg>
<div id="workingArea">
    <button onclick="calculateTransform()">Get Transform</button>
    <div class="results">
        Transform: <span class="transformResult"></span>
    </div>
    <button onclick="rotateText('add')">Rotate + 10 Degrees</button>
    <button onclick="rotateText('sub')">Rotate - 10 Degrees</button>
</div>

Код JS:

console.clear();
var paper = Snap("#paper");

var t = paper.text(0, 0, "SnapSVG is Awesome !");
//Translate to 250, 250 & Scale by 2 & 45Deg Rotate
t.transform('T250,250 S2 R45');
// Enable Drag
t.drag();

var calculateTransform = function() {
    var currentTransform = t.transform().string;
    console.log('test', currentTransform)
    $('.results .transformResult').html(currentTransform)
}

var rotateText = function(op) {
    // Read Current Rotate Value here.
    var rotateVal = 0;
    // add/Subtract based on option
    if(op == 'add'){
        rotateVal += 10;
    }else if(op == 'sub') {
        rotateVal -= 10;
    }

    // Calculate newTransform here.
    var newTransform = 'T250,250 R' + rotateVal;

    // Update object's rotation here. 
    t.attr({transform: newTransform });
}

Проблемы:

• Чтение текущего преобразования, примененного к Элементу.
• Поверните текущий элемент на определенное значение.

Answer 1

То, что вы, вероятно, после того, как вы думаете, что-то вроде этого...

var rotateVal = t.transform().localMatrix.split().rotate;

localMatrix дает матрицу, специально примененную к этому элементу.

globalMatrix дает общую матрицу, применяемую к этому элементу (например, матрицы из внешних контейнеров).

diffMatrix показывает разницу между localMatrix и globalMatrix.

split () ( здесь документация) разбивает эту матрицу на ее элементы. Таким образом, мы можем найти "вращаться" отсюда.

пример скрипки

Так что это ответ, я думаю, что вы после.

Тем не менее, я бы на самом деле разработал код немного по-другому, если бы это был лишь минимальный пример более сложного дизайна.

Вместо того, чтобы делать что-то вроде transform(). LocalMatrix.split(). Rotate, я бы сохранил ваши собственные компоненты transform. Так что-то вроде...

var rotate = 45;
var tx = 250;
var ty = 250;
...then in func
rotate += +10;
var newTransform = 'T'+tx+','+ty+'R'+rotate;

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

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