我正在尝试将 SVG 重置回其原始变换矩阵属性。我有一个缩放函数,它使用这个矩阵来放大和缩小 SVG。但是,我希望能够将 SVG 重置回它最初的变换矩阵。
我首先将变换矩阵属性加载到一个数组中,然后在我的缩放函数中使用它。
如何存储原始值,这样它们就不会被我的缩放函数触及,这样我就可以使用它们来重置 SVG?
这是我的 JSfiddle
这是我的脚本:
$(document).ready(function() {
var newMatrix;
var transMatrix = $("#svgGroup").attr("transform").replace(/[^0-9.,]+/, "");
transMatrix = transMatrix.split(",");
var origMatrix = [1,0,0,1, parseFloat(transMatrix[4]), parseFloat(transMatrix[5])];
$("#out").click(function() {
zoom(0.8)
});
$("#in").click(function() {
zoom(1.25);
});
$("#reset").click(function() {
alert(origMatrix)
$("#svgGroup").attr("transform", "matrix(" + origMatrix + ")");
});
function zoom(scale) {
for (var i=0; i<origMatrix.length; i++) {
origMatrix[i] *= scale;
}
newMatrix = "matrix(" + origMatrix.join(' ') + ")";
$("#svgGroup").attr("transform", newMatrix);
}
});
最佳答案
您必须深度克隆原始数组。为此,请使用 .slice(0)
var origMatrix = [1,0,0,1, parseFloat(transMatrix[4]), parseFloat(transMatrix[5])];
var initialValue = origMatrix.slice(0);
现在您可以在重置函数中使用它。
$("#reset").click(function() {
origMatrix = initialValue.slice(0);
$("#svgGroup").attr("transform", "matrix(" + origMatrix + ")");
});
关于javascript - 将 SVG 重置为原始变换矩阵,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38170851/