Snap.svg - 拖动事件处理程序

Question

问题是关于新发布的Snap.svg中Element.drag的onstart事件处理程序.

下面代码的目的是为svg对象上的拖动(onstart/onstop)的开始和停止注册事件处理程序.

        var s = Snap(800,600);

        var bigCircle = s.circle(300,150,100);

        bigCircle.drag(null,
                function(){
                    console.log("Move started");
                },
                function(){
                    console.log("Move stopped");
                }
        );

控制台消息在拖动开始和停止时工作正常,但是null会覆盖默认的onmove函数 - 导致没有发生实际的拖动.如何传递"我不想弄乱默认情况"的内容？

(注意:我更喜欢通过赋值来注册事件处理程序,比如熟悉的onClick,但这是另一回事.)

---

注意几小时后添加:Raphael.js文档和示例提供了一些线索.至少现在我知道如何为onmove传递一个提供默认移动行为的正确函数:

        var s = Snap(800,600);

        var bigCircle = s.circle(300,150,100);

        start = function() {
            this.ox = parseInt(this.attr("cx"));
            this.oy = parseInt(this.attr("cy"));
            console.log("Start move, ox=" + this.ox + ", oy=" + this.oy);
        }

        move = function(dx, dy) {
            this.attr({"cx": this.ox + dx, "cy": this.oy + dy});
        }

        stop = function() {
            this.ox = parseInt(this.attr("cx"));
            this.oy = parseInt(this.attr("cy"));
            console.log("Stop move, ox=" + this.ox + ", oy=" + this.oy);
        }

        bigCircle.drag(move, start, stop);

Answer 1

我不确定我是否误解了你到底想要什么......难道你不想实施阻力吗？

所以例如......

var s = Snap(400,400);
var bigCircle = s.circle(150, 150, 100);

var moveFunc = function (dx, dy, posx, posy) {
    this.attr( { cx: posx , cy: posy } ); // basic drag, you would want to adjust to take care of where you grab etc.
};

bigCircle.drag( moveFunc,
            function(){
                console.log("Move started");
            },
            function(){
                console.log("Move stopped");
            }
    );

JSBin这里http://jsbin.com/akoCAkA/1/edit?html,js,output

Answer 2

这里有一个如何使用SnapSVG进行拖动的示例:http://svg.dabbles.info/snaptut-drag.html

var s = Snap("#svgout");

var rect = s.rect(20,20,40,40);
var circle = s.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 );