如何使用snap svg初始化图像矩阵？

Question

谢谢lan谁帮我完成svg转换滑块Fiddle。

经过一些进展后，我得到了另一个问题。如果图像存在矩阵，我应该如何将它应用到开始滑块？作为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相关位将开始对...

在我们的初始化函数，检查我们已经存储了初始转换，如果没有存储它。我们只想这样做一次（否则你不能使用重置按钮）。

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

在更新变换功能，我们可以添加原有转换到新的，我们正在操纵，如

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

jsfiddle

这种“可能”是你想要的，取决于最初变换中的内容（随后的变换受其影响）。如果不是这样，它可能开始变得非常复杂，因为矩阵不是真的可逆的（例如，矩阵的正确转换），但是可能有一种方法取决于需求:)。我会在图像上进行初始旋转和缩放来测试它，看看它是否做到了你想要的（如果这就是你最终会支持的）。