Question

使用Snap.svg我尝试拖动一个已经缩放的组内的元素，并且该移动不会跟随鼠标（速度提高两倍）。这是我的示例代码：

var s = Snap('#test');

var start = function() {this.data('o', this.transform().local );}
var move = function(dx,dy) {
var o = this.data('o');
    this.attr({transform: o + (o ? "T" : "t") + [dx, dy]});
}


var c1 = s.circle(60,150,10).attr({fill:'blue'});
var c2 = s.circle(100,170,10).attr({fill:'red'});
var g = s.g(c1, c2);

g.transform('s2');

c1.drag(move, start );

知道我哪里错了吗？

Answer 1

问题在于所提供的示例并未考虑从鼠标坐标到元素的变换差异。

因此，要适应这一点，你需要反向转换dx，dy，就像你拖动例如10px一样，你只希望它移动5px，作为一个简化的例子。

我过去做了几个例子here（首先尝试这个）和here（特别是如果你可能有更复杂的嵌套变换值得看这里）

这里是代码，以防链接不能工作一段时间，它是一个插件，所以你可以调用altDrag（）而不是drag（）

Snap.plugin( function( Snap, Element, Paper, global ) {

Element.prototype.altDrag = function() {
    this.drag( dragMove, dragStart, dragEnd );
    return this;
}

var dragStart = function ( x,y,ev ) {
        this.data('ot', this.transform().local );
}


var dragMove = function(dx, dy, ev, x, y) {
        var tdx, tdy;
        var snapInvMatrix = this.transform().diffMatrix.invert();
        snapInvMatrix.e = snapInvMatrix.f = 0;
        tdx = snapInvMatrix.x( dx,dy ); tdy = snapInvMatrix.y( dx,dy );
        this.transform( "t" + [ tdx, tdy ] + this.data('ot')  );

}

var dragEnd = function() {
}

snap.svg错误拖动在组缩放时移动？

1 个答案: