移动后从中心旋转 svg 图像

Question

我在 fiddle 上制作了一个基本的 svg 图像调整大小、旋转和拖动到遮罩内。移动后从中心旋转图像时遇到问题。移动后如何重置原点 x,y？

请先移动图片，再用滑块旋转。

在这里试试：https://jsfiddle.net/david7418/o497akje/6/

Transform 属性在此处被覆盖。如何获取原点 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})
   });

});

Answer 1

我会创建一个中心位置来更新所有转换。如果您还使用 Snap 插件以便于编码，它可能会更容易一些，所以类似于以下内容。

我们会将 x、y、r、s 变量存储在对象的 data() 方法中。

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 中）

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

对于滑块，我们只存储值，然后调用 updateTransform()

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

将它们全部捆绑在一起，看起来像...

jsfiddle

移动后从中心旋转 svg 图像

Rotate svg image from center after moving

javascript

jquery

svg

snap.svg