Haciendo las rutas e imágenes arrastrables en Raphael js

Question

¿Es posible arrastrar y soltar objetos que no sean círculos y rectángulos alrededor de una página usando Raphael js?

Quiero agregar caminos e imágenes que luego puede mover pero resulta difícil. Me gustaría resolver esto con Raphael por su compatibilidad con las interfaces táctiles.

Este es el código

<script> 
    window.onload = function() { 
     var R = Raphael(0, 0, "100%", "100%"), 
      r = R.circle(100, 100, 50).attr({fill: "hsb(0, 1, 1)", stroke: "none", opacity: .5}), 
      g = R.circle(210, 100, 50).attr({fill: "hsb(.3, 1, 1)", stroke: "none", opacity: .5}), 
      b = R.circle(320, 100, 50).attr({fill: "hsb(.6, 1, 1)", stroke: "#fff", "fill-opacity": 0, "stroke-width": 0.8, opacity: .5}), 
      p = R.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z") .attr({fill: "hsb(.8, 1, 1)", stroke: "none", opacity: .5}); 
     var start = function() { 
      this.ox = this.attr("cx"); 
      this.oy = this.attr("cy"); 
      this.animate({r: 70, opacity: .25}, 500, ">"); 
     }, 
     move = function (dx, dy) { 
      this.attr({cx: this.ox + dx, cy: this.oy + dy}); 
     }, 
     up = function() { 
      this.animate({r: 50, opacity: .5}, 500, ">"); 
     }; 
     R.set(r, g, b, p).drag(move, start, up); 
    }; 
</script> 

Answer 1

he experimentado con esto hace un poco más, y tengo trabajo utilizando el siguiente enfoque:

• Añadir una, estilo, div con posición absoluta inicialmente oculta con un fondo transparente y un estilo de borde adecuado para su página, y el uso de jQuery/UI lo hace arrastrable.
• Agregue un evento de clic a cada uno de los elementos de Rapahel/SVG que desee que sean arrastrables, y en este caso agregue código para redimensionar y reposicionar el elemento div sobre el elemento que acaba de hacer clic y luego hacerlo visible.
• Agregue código al div que actualiza la posición del elemento Raphael cuando se arrastra.

extendí esto para añadir el cambio de tamaño capacidades, y esto también funcionó bien, pero en el futuro sería genial ver a arrastrar, soltar y cambiar el tamaño de las capacidades (lo ideal es debidamente integrados en la biblioteca en lugar de utilizar jQuery) integrado en Raphael , ya que estas características abrirían un montón de posibilidades para los diseñadores en el navegador que usan Raphael puro.

Answer 2

Pruebe esto para los círculos no. Los atributos de los círculos son diferentes a las imágenes, el texto, etc., creo.

var start = function() { 
     this.ox = this.attr("x"); 
     this.oy = this.attr("y"); 
     this.animate({r: 70, opacity: .25}, 500, ">"); 
    }, 
    move = function (dx, dy) { 
     this.attr({x: this.ox + dx, y: this.oy + dy}); 
    }, 
    up = function() { 
     this.animate({r: 50, opacity: .5}, 500, ">"); 
    }; 

Answer 3

no es tan difícil si comprende las funciones de arrastre habituales que Chris Butler le proporcionó. utilizo este:

var start = function() { 
    //storing original coordinates 
    this.xSource = this.attrs.path[0][1]; 
    this.ySource = this.attrs.path[0][2]; 
    this.xDest = this.attrs.path[1][1]; 
    this.yDest = this.attrs.path[1][2]; 
    this.attr({opacity: 0.5}); 
    }, 
    move = function (dx, dy) { 
    //move will be called with dx and dy 
    var xS = this.xSource+dx; 
    var xD = this.xDest+dx; 
    var yS = this.ySource+dy; 
    var yD = this.yDest+dy; 
    this.attr({path: "M"+ xS +" "+ yS +"L"+ xD +" "+yD}); 
    }, 
    drag = function(){ 
    this.node.drag(this.move,this.start,this.up); 
    }; 

También puede saber qué tipo de figura que está arrastrando en las funciones con this.type, por lo que se puede hacer estas funciones de trabajo para todo tipo de figuras.

Answer 4

La clave aquí (que encontré) es convertir los delta xey en los valores de traducción, que el objeto de ruta entiende.

http://www.nathancolgate.com/post/2946823151/drag-and-drop-paths-in-raphael-js

Efectivamente, el mismo enfoque:

var paper = Raphael(10, 50, 320, 200); 

var tri = paper.path("M0 0L0 20L25 10L0 0Z").attr("fill", "#ff0"); 
var rex = paper.rect(10, 20, 50, 50).attr("fill", "#ff0"); 

var start = function() { 
    this.odx = 0; 
    this.ody = 0; 
    this.animate({"fill-opacity": 0.2}, 500); 
}, 
move = function (dx, dy) { 
    this.translate(dx - this.odx, dy - this.ody); 
    this.odx = dx; 
    this.ody = dy; 
}, 
up = function() { 
    this.animate({"fill-opacity": 1}, 500); 
}; 

tri.drag(move, start, up); 
rex.drag(move, start, up); 

Answer 5

Yo recomendaría usted raphael.draggable biblioteca, que hace que el truco para ti. Lo usé con una aplicación de mapas que permite al usuario usar el zoom sobre el mapa y luego arrastrarlo.

que tenía un problema con esta biblioteca en IE8 porque en los eventos de función pasajes concernientes a la MouseDown, MouseMove, etc. IE gotas una excepción, que indica al usuario que event es nulo. Puede resolverlo reemplazando el event por e y agregando e = e || event en el script raphael.draggable.js. Esta solución no afecta a otros navegadores.

Por lo tanto, el método de mousemove en el startDragger es:

function startDragger() { 
    document.onmousemove = function(e) { 
    e = e || event 
    if (paper.draggable.current()) { 
     var transX = e.clientX - lastDragX; 
     var transY = e.clientY - lastDragY; 

     paper.draggable.current().translate(transX, transY); 
     lastDragX = e.clientX; 
     lastDragY = e.clientY; 
    } 
    }; 
} 

Y el enlace: https://github.com/mephraim/raphael.draggable

Hope esto podría ayudarle.

Answer 6

En caso de que alguien aún esté buscando una solución, aquí hay un plugin que escala, gira y arrastra todas las formas, incluidas las rutas.

https://github.com/ElbertF/Raphael.FreeTransform

Answer 7

Como se traducen se desaprueba en Rafael, he modificado la respuesta de Nathan para trabajar con transformo:

var paper = Raphael(10, 50, 320, 200); 

var tri = paper.path("M0 0L0 20L25 10L0 0Z").attr("fill", "#ff0"); 

var start = function() { 
    this.lastdx ? this.odx += this.lastdx : this.odx = 0; 
    this.lastdy ? this.ody += this.lastdy : this.ody = 0; 
    this.animate({"fill-opacity": 0.2}, 500); 
}, 
move = function (dx, dy) { 
    this.transform("T"+(dx+this.odx)+","+(dy+this.ody)); 
    this.lastdx = dx; 
    this.lastdy = dy; 
}, 
up = function() { 
    this.animate({"fill-opacity": 1}, 500); 
}; 

tri.drag(move, start, up); 

Soy relativamente nuevo a Rafael y ocurrió esto a través del ensayo y error, por lo que alguien podría tener una explicación de por qué funciona o una manera más limpia de hacerlo;)