Snap.svg 缩放时拖动答案

【问题标题】：Snap.svg Drag while ZoomedSnap.svg 缩放时拖动
【发布时间】：2015-10-07 16:44:56
【问题描述】：

当我在缩放（缩放）对象上使用 drag() 时，对象会根据比例移动，例如，如果将比例设置为 3 -- 那么鼠标每移动 1px 就乘以 3 .

鼠标移动大约 20 个像素后，这种行为是完全不可接受的。

这是一个错误还是我做错了什么？

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

参见http://jsfiddle.net/mje8knLf/1/ 的小提琴（只需拖动其中一个形状）

TIA！

【问题讨论】：

标签： javascript svg transform snap.svg

【解决方案1】：

为此，我们需要考虑出现在所有外部元素上的现有转换。

这是我不久前做的一个插件来帮助解决这个问题。

主要是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() {
    }
});

【讨论】：

【解决方案2】：

试试：transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [dx/3, dy/3]。

基本实现：-

Scale 是一个全局变量（也可以是 FLOAT）
所有dx 和dy 运动除以Scale

旁注：所有元素都可以拖出框外。您可能希望在边缘实施一些移动限制。

【讨论】：

【解决方案3】：

这里我使用 svg-pan-zoom.js 来实现 SVG 的平移和缩放，非常好用。我正在使用 snap.svg

var svgElement;
var panZoomPlan;
function setPanZoom(){
    svgElement = document.querySelector('svg');
    panZoomPlan = svgPanZoom(svgElement);   

    panZoomPlan.setMinZoom(0.1);
    panZoomPlan.setMaxZoom(50);
    panZoomPlan.setZoomScaleSensitivity(0.2);
    panZoomPlan.disableDblClickZoom();      
}

function set_draggable(svg_element) {
    var shape = plan.select("#" + svg_element);
    shape.drag(dragNode, dragStart, dragStop);
}

var dragStart = function() {    
    panZoomPlan.disablePan();
    panZoomPlan.disableZoom();
    this.isDragged = false;

    var node_id = this.node.id;

    this.data('origTransform', this.transform().local );
}       

var dragNode = function(dx,dy) {
    this.isDragged = true;
    realZoom = panZoomPlan.getSizes().realZoom;
    var rdx = dx/realZoom;
    var rdy = dy/realZoom;

    this.attr({
        transform: this.data('origTransform') + (this.data('origTransform') ? "T" : "t") + [rdx, rdy]
    });

    event.preventDefault();
}

var dragStop = function() {
    panZoomPlan.enablePan();
    panZoomPlan.enableZoom();

    if (!this.isDragged) { 
        return;
    }

    //update scene elements data
    var node_id = this.node.id;
    Nodes_dict[node_id].x += Nodes_dict[node_id].rdx; 
    Nodes_dict[node_id].y += Nodes_dict[node_id].rdy;   
}

我希望这对以后看到此问题的用户有所帮助。

【讨论】：