スナップSVGを使用してイメージ行列を初期化する方法はありますか？

Question

ありがとうlan私はスライダーFiddleでsvg変換を完了するのを手伝った。

いくつかの問題が発生した後、別の問題が発生しました。イメージが存在する場合、最初にスライダーに適用する方法はありますか？ Fiddleの例では、スライダをドラッグしている間、イメージの動作が奇妙に見えます。

$(function() { 
    Snap.plugin(function(Snap, Element, Paper, global) { 
     Element.prototype.updateTransform = function() { 
      var newTransform = 't' + (this.data('xy').x) + ',' + (this.data('xy').y); 
      newTransform += 'r' + (this.data('r')) 
      newTransform += 's' + (this.data('s')) 
      this.transform(newTransform) 
      return this; 
     } 
     Element.prototype.init = function() { 
      return this.data('xy', { 
        x: 0, 
        y: 0 
       }) 
       .data('r', 0) 
       .data('s', 1) 
     } 

    }); 

    function dragStart(x, y) { 
     this.data('oxy', this.data('xy')); 
    } 

    function dragMove(dx, dy, x, y) { 
     this.data('xy', { 
       x: this.data('oxy').x + dx, 
       y: this.data('oxy').y + dy 
      }) 

      .updateTransform(); 
    } 
    obj = Snap(".cat"); 
    obj.init(); 
    obj.drag(dragMove, dragStart); 

    //Slider resize 
    $("#slider_resize").slider({ 
     max: 4, 
     min: 1, 
     step: 0.1, 
     slide: function(event, ui) { 
      obj.data('s', ui.value) 
       .updateTransform(); 
     } 
    }); 
    //Slider rotate 
    $("#slider_rotate").slider({ 
     max: 360, 
     min: 0, 
     step: 1, 
     value: 0, 
     slide: function(event, ui) { 
      obj.data('r', ui.value) 
       .updateTransform(); 
     } 
    }); 

    //Reset button 
    $('#reset').click(function() { 
     $("#slider_resize").slider('value', 0); 
     $("#slider_rotate").slider('value', 0); 
     obj.init().updateTransform(); 
    }); 
}); 

Answer 1

あなたは最初の変換を保存し、次に該当するビットは以下のようになり、新たなtransform..soの開始に各時間にそれを追加...私たちのinit関数で

、我々かどうかを確認することができます格納していない場合は初期変換を保存しています。これは一度だけ行いたい（そうでなければ、リセットボタンを使うことはできません）。アップデートで

if(!this.data('origTransform')) this.data('origTransform', this.transform()) 

変換関数を、我々は我々が操作している新しいものに元の変換を追加することができ、例えば

this.transform(this.data('origTransform') + newTransform) 

jsfiddle

これは、あなたが望むこと「あり」最初の変換の内容に応じて（後続の変換がその変換の影響を受けるため）そうでなければ、行列が本当に可逆的ではない（例えば、行列から適切に変換されない）ので、それは非常に複雑になるかもしれませんが、要求に応じて方法があるかもしれません:)。私は最初の回転と画像のスケールでそれをテストし、それがあなたが望むものをするかどうかを調べるでしょう（もしあなたがサポートするならば）。