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