我试图将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);
}
});
答案 0 :(得分:2)
您必须深度克隆原始数组。为此,请使用.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 + ")");
});
答案 1 :(得分:1)
您似乎通过不使用SVG DOM来实现这一目标要困难得多。重置仅仅是将规模改回1。
$(document).ready(function() {
$("#out").click(function() {
zoom(0.8)
});
$("#in").click(function() {
zoom(1.25);
});
$("#reset").click(function() {
scale = 1.0 / $("#svgGroup")[0].transform.baseVal.getItem(0).matrix.a;
zoom(scale);
});
function zoom(scale) {
var transform = $("#svgGroup")[0].transform.baseVal.getItem(0);
transform.matrix.a *= scale;
transform.matrix.d *= scale;
transform.matrix.e *= scale;
transform.matrix.f *= scale;
}
});