当我在缩放(缩放)的对象上使用 Drag() 时,对象会根据比例移动,因此,例如,如果比例设置为 3,则鼠标每移动 1px 就会乘以 3 .
鼠标移动 20 个左右像素后,这种行为是完全 Not Acceptable 。
这是一个错误还是我做错了什么?
var g = s.g();
g.transform("scale(3)");
var rect = g.rect(20,20,40,40);
var circle = g.circle(60,150,50);
var move = function(dx,dy) {
this.attr({
transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx, dy]
});
}
var start = function() {
this.data('origTransform', this.transform().local );
}
var stop = function() {
console.log('finished dragging');
}
rect.drag(move, start, stop );
circle.drag(move, start, stop );
参见 fiddle http://jsfiddle.net/mje8knLf/1/ (只需拖动其中一个形状即可)
TIA!
最佳答案
为此,我们需要考虑所有外部元素上出现的现有转换。
这是我不久前制作的一个插件来帮助解决这个问题。
主要部分是dragMove 函数。我们找到已应用的现有其他变换(在元素上的 Snap 中有 3 种类型的变换矩阵:localMatrix、diffMatrix、globalMatix),并将其反转以获得我们想要应用以实现现有效果的矩阵。 (如果在某些情况下 diffMatrix 不起作用,请查看 globalMatrix)。
然后使用它,我们可以对新的拖动量使用 y() 和 x(),以找到新的坐标空间中的值。
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() {
}
});
关于javascript - Snap.svg 缩放时拖动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31484684/