javascript - Snap.svg-controlador de eventos de arrastrar

Question

La pregunta es sobre el controlador de eventos onstart para Element.drag en el recientemente anunciado Snap.svg .

La intención del siguiente código es registrar los manejadores de eventos para el inicio y la detención de un arrastre (onstart / onstop) en un objeto svg.

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

Los mensajes de la consola funcionan bien en el inicio y la detención del arrastre, pero el valor nulo anula la función onmove predeterminada, lo que no ocasiona que se produzca ningún arrastre real. ¿Cómo paso algo que dice "No quiero meterme con la función onmove predeterminada"?

(Nota: preferiría registrar un controlador de eventos por medio de una asignación, como el conocido onClick, pero esa es una cuestión diferente).

Nota agregada después de algunas horas: La documentación y los ejemplos de Raphael.js proporcionan algunas pistas. Al menos ahora sé cómo pasar una función adecuada para onmove que proporciona el comportamiento de movimiento predeterminado:

        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

No estoy seguro si estoy entendiendo mal lo que exactamente quieres ... ¿no quieres implementar el arrastre?

Así por ejemplo...

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 aquí http://jsbin.com/akoCAkA/1/edit?html,js,output

Answer 2

No puedo arrastrar elementos de grupo con controladores personalizados, s.drag () lo hace posible. Así que busqué más, encontré que es posible.

Documentación:

Adicionalmente, se activan los siguientes eventos de arrastre: drag.start. en el inicio, drag.end. on> end y drag.move. en cada movimiento. Cuando el elemento se arrastra sobre otro elemento> drag.over. incendios también.

Solución:

    s.drag();
    eve.on("snap.drag.start." + s.id, function () {
        console.log(''cool'');
    });

    eve.on("snap.drag.move." + s.id, function () {
        console.log(''cooler'');
    });

    eve.on("snap.drag.end." + s.id, function () {
        console.log(''way cool'');
    });

Eva no está documentado en snapsvg, está disponible en raphael. No sé si esta es la forma correcta o piratear.

Answer 3

Después de luchar durante algunas horas para hacer esto con snap.js, finalmente descubrí svg.js y su complemento arrastrable, con el que es mucho más fácil:

var draw = SVG(''svg'');
var circle = draw.circle(10).attr({cx:30,cy:30,fill:''#f06''});
circle.dragend = function(delta, event) {
    alert(this.attr(''cx''))
}
circle.draggable();

Entonces, cambié a svg.js ...

Answer 4

El método eve.on no funcionaba para mí, así que eché un vistazo y logré recrear la función onmove. Los otros dos (onstart y onend) no requieren un código específico para funcionar aparentemente:

var S = Snap(300,300);

var bigCircle = S.circle(150, 150, 100);

bigCircle.drag(onDragMove, onDragStart, onDragEnd);

var ddx = 0;
var ddy = 0;
var dxDone = 0;
var dyDone = 0;

function onDragMove (dx, dy, posx, posy) {
    dx = dx + dxDone;    // dx and dy reset to 0 for some reason when this function begins
    dy = dy + dyDone;    // retain the last move''s position as the starting point
    this.attr( { transform: ''t''+dx+'',''+dy } );
    ddx = dx;
    ddy = dy;
    console.log(''moving...'');
};

function onDragStart(x,y,e) {
    console.log(''start!'');
};

function onDragEnd(e) {
    dxDone = ddx;
    dyDone = ddy;
    console.log(''end!'');
};

Sin embargo, tenga en cuenta que esto solo debe usarse para un objeto arrastrado a la vez . Si necesita un arrastre personalizado para otro objeto, tendrá que cambiar el nombre de las funciones (es decir, onDragStart2) y las cuatro variables declaradas fuera de ellas (es decir, ddx2) después de duplicarlo.

Además, el formato de cadena ''transformar'' que pasé (tx, y) vino de lo que encontré después de hacer console.log (this.attr (''transform'')). Todavía no estoy familiarizado con la matriz (), así que de esta manera parecía más fácil.

¡Espero que esto ayude!

Answer 5

Hay un ejemplo de cómo arrastrar con SnapSVG aquí: 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 );