Question

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

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

在此尝试：https://jsfiddle.net/david7418/o497akje/6/

转换属性在此处被覆盖。如何获得原点x，y并将其置于变换参数中？

def register(id: Int): Unit = println(id)

trait HasComponentId {
  def componentId: Int
}

class FooComponent
object FooComponent extends HasComponentId {
  override val componentId: Int = 1
}

class BarComponent
object BarComponent extends HasComponentId {
  override val componentId: Int = 2
}

def registerComponent(comp: HasComponentId): Unit =
  register(comp.componentId)


assert(registerComponent(FooComponent) == 1)

完整代码：

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

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图像

1 个答案: