读取和更改 SnapSVG 中元素的旋转值答案

【问题标题】：Read & change rotate value of an Element in SnapSVG读取和更改 SnapSVG 中元素的旋转值
【发布时间】：2016-04-13 23:00:01
【问题描述】：

请查看这个不完整的小提琴 (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 });
}

问题：

读取应用于 Element 的当前转换。
将当前元素旋转到特定值。

【问题讨论】：

标签： javascript matrix svg transform snap.svg

【解决方案1】：

你的想法可能是这样的......

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

localMatrix 给出了专门应用于该元素的矩阵。

globalMatrix 给出应用于该元素的总矩阵（例如来自外部容器的矩阵）。

diffMatrix 给出了 localMatrix 和 globalMatrix 之间的区别。

split() (docs here) 将该矩阵分解为其元素。所以我们可以从这里找到“旋转”。

example fiddle

所以这就是我认为你想要的答案。

但是，如果这只是更复杂设计的一个最小示例，我实际上会设计稍微不同的代码。

我不会做像 transform().localMatrix.split().rotate 这样的事情，而是存储您自己的转换组件。所以像......

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

这样做的原因是，您现在正在精确控制值，并且它不太容易出错（来自库或对矩阵的误解）。如果您查看显示的矩阵值，您会注意到存在细微的舍入差异，加上复杂的矩阵计算，这些值并不完全符合我们的预期，并且并不总是以一种有意义的简单方式拆分。

因此，如果这是主要示例，那么第一段代码可能就足够了。如果您正在进行更复杂的转换，我会考虑自己控制值并像后一个示例一样构建转换字符串。

【讨论】：