將SVG重置爲原始變換矩陣

Question

我試圖將我的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); 
    } 
    }); 

Answer 1

你必須深克隆原始數組。爲了做到這一點，使用.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 + ")"); 
}); 

jsfiddle

Answer 2

您似乎正在比它需要的是通過不使用SVG DOM這個更難。重置僅僅是將規模變回1的問題。

這裏是some simplified code。

$(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; 
     } 
});