Javascript 移动后从中心旋转svg图像

我已经做了一个基本的svg图像大小调整，旋转和拖动内面具上的小提琴。我在移动后从中心旋转图像时遇到问题。移动后如何重置原点x，y

请先移动图像，然后用滑块旋转

试试这里：

转换属性在此处被覆盖。如何获取原点x，y并将其放入转换参数中

  //Slider rotate
  $( "#slider_rotate" ).slider({
      max: 360, 
      min: 0, 
      step:1, 
      value:0,
      slide: function( event, ui ) {
      var matrixObj = obj.transform().localMatrix.split()
      console.log(matrixObj);
          var t = new Snap.Matrix();
           //Transform overwrite
           t.add(obj.transform().localMatrix);
          obj.transform('r'+ui.value+','+t);        
      }
   });

完整代码：

$(function() {
   obj = Snap(".cat");
   //Enable drag event
   obj.drag();
   var dimens = obj.node.getBoundingClientRect();    
   var orinDimens = dimens;
   //Image max enlarge rate
   var enlargeRate = 4;
   var smax = dimens.width;

   //Slider resize
   $( "#slider_resize" ).slider({
      max: smax*enlargeRate, 
      min: smax, 
      step:1, 
      value:dimens.width,
      slide: function( event, ui ) {
         w = ui.value * dimens.width / smax;
         h = ui.value * dimens.height / smax;
         obj.attr({
            width: w,
            height: h,
            x: (dimens.width - w)/2,
            y: (dimens.height - h)/2
         });
      }
   });

  //Slider rotate
  $( "#slider_rotate" ).slider({
      max: 360, 
      min: 0, 
      step:1, 
      value:0,
      slide: function( event, ui ) {
          obj.transform('r'+ui.value);        
      }
   });

   //Reset button
   $('#reset').click(function(){
       $("#slider_resize").slider('value',orinDimens.width);
       $("#slider_rotate").slider('value',0);
       var objMatrix = new Snap.Matrix();
       objMatrix.translate(0,0); 
       objMatrix.rotate(0);
       obj.transform(objMatrix);
       obj.attr({width: orinDimens.width,x:0})
   });

});

---

我将创建一个中心位置来更新所有变换。如果您使用Snap插件以便于编码，那么它的流程可能会更容易一些，如下所示

我们将在对象的data（）方法中存储x、y、r、s变量

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

});

现在我们有了一个更新方法，我们可以在任何时候更改屏幕上的某些内容，或者想要初始化它或其他任何东西时调用它

所以当我们想重置它时，我们可以调用

$('#reset').click(function(){
   obj.init().updateTransform();
});

对于拖动处理程序…（将旧位置存储在oxy中）

对于滑块，我们只存储值，并调用updateTransform（）

把它们绑在一起，看起来就像

---

理想情况下，您希望存储平移、旋转和缩放，并在拖动或缩放时更新这些内容。然后将其应用到一个中心变换更新方法中，该方法可以完成所有操作。是的，我已经尝试过，但仍然不知道如何做。你能给我看看提琴的窍门吗（哇…看起来很完美！！我将深入查看您的代码。非常感谢。我已经尝试过了，但我不知道怎么做。我看不到任何接受答案的选项。这是因为我没有足够的声誉吗？答案的左侧应该有一个勾号，单击时会变为绿色，如果y，您可以单击旁边的向上箭头你发现答案很有用嗨，我还有一个关于这个帖子的扩展问题。如果你有空，请你看一下好吗？谢谢。

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

$( "#slider_resize" ).slider({
      max: 4,
      min: 1,
      step:0.1, 
      slide: function( event, ui ) {
        obj.data('s', ui.value)
           .updateTransform();
      }
   });