javascript - ejemplo - draggable.js examples
Draggables y Resizables en SVG (3)
Eche un vistazo a Raphael.FreeTransform que parece hacer lo que está buscando.
Quiero hacer que un elemento svg (ruta, rect o círculo) pueda ser arrastrable y darle un tamaño de identificadores.
Pero a diferencia de HTML DOM, no todos los elementos tienen una esquina superior izquierda x, una coordenada y un ancho y alto para un cuadro que rodea el contenido. Esto hace que sea inconveniente realizar un procedimiento genérico de cambio de tamaño o arrastre.
¿Es una buena idea hacer que cada camino o círculo se dibuje dentro de su propio objeto svg para darme una caja para jugar?
¿Cómo se puede arrastrar / cambiar el tamaño normalmente implementado en SVG?
Nota: tanto para arrastrar como para cambiar el tamaño, tendrá que crear casos separados para ciertos tipos de elementos diferentes. Observe el ejemplo que proporciono más adelante que maneja el arrastre tanto de elipsis como de rectángulos en el mismo conjunto de funciones.
Para hacer que un elemento sea dragable, use:
element.drag(move, start, up);
Los tres argumentos son referencias a las funciones que manejan mover (arrastrar), iniciar (mouse hacia abajo) y detener (mouseup).
Por ejemplo, para hacer un círculo que se pueda arrastrar (de la documentación):
window.onload = function() {
var R = Raphael("canvas", 500, 500);
var c = R.circle(100, 100, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5
});
var start = function () {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.attr({opacity: 1});
},
move = function (dx, dy) {
// move will be called with dx and dy
this.attr({cx: this.ox + dx, cy: this.oy + dy});
},
up = function () {
// restoring state
this.attr({opacity: .5});
};
c.drag(move, start, up);
};
Ejemplo jsFiddle
En el ejemplo anterior, las propiedades ox y oy se agregan al elemento para realizar un seguimiento de su ubicación, y estas propiedades junto con dx y dy se usan para cambiar la ubicación del elemento a medida que se arrastra.
Arrastrar y soltar más complicado para responder a esta pregunta .
Para hacer que un objeto se pueda cambiar de tamaño, simplemente debe crear un segundo conjunto de métodos de arrastrar y soltar para el ajuste de height y simplemente ajustar los elementos de destino de height y width función de arrastrar el ajuste del height .
Aquí hay una lista completa de arrastrar y soltar, y una caja redimensionable que escribí:
Ejemplo jsFiddle de arrastrar y soltar y caja redimensionable
window.onload = function() {
var R = Raphael("canvas", 500, 500),
c = R.rect(100, 100, 100, 100).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5,
cursor: "move"
}),
s = R.rect(180, 180, 20, 20).attr({
fill: "hsb(.8, .5, .5)",
stroke: "none",
opacity: .5
}),
// start, move, and up are the drag functions
start = function () {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
this.attr({opacity: 1});
this.sizer.ox = this.sizer.attr("x");
this.sizer.oy = this.sizer.attr("y");
this.sizer.attr({opacity: 1});
},
move = function (dx, dy) {
// move will be called with dx and dy
this.attr({x: this.ox + dx, y: this.oy + dy});
this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy});
},
up = function () {
// restoring state
this.attr({opacity: .5});
this.sizer.attr({opacity: .5});
},
rstart = function () {
// storing original coordinates
this.ox = this.attr("x");
this.oy = this.attr("y");
this.box.ow = this.box.attr("width");
this.box.oh = this.box.attr("height");
},
rmove = function (dx, dy) {
// move will be called with dx and dy
this.attr({x: this.ox + dx, y: this.oy + dy});
this.box.attr({width: this.box.ow + dx, height: this.box.oh + dy});
};
// rstart and rmove are the resize functions;
c.drag(move, start, up);
c.sizer = s;
s.drag(rmove, rstart);
s.box = c;
};
Los controladores de eventos incluidos (puede usar más, por supuesto, junto con .node() ) y la descripción de arrastrar y soltar se encuentra en la parte inferior de la página en la documentación .
Simplemente harías un lienzo de Raphael, y luego cada elemento sería un elemento diferente. Simplemente asignes a las variables para que puedas manejarlas, como en el ejemplo anterior ( c se usó para referirse al elemento del círculo creado).
En respuesta a los comentarios, aquí hay un simple círculo para arrastrar y soltar + cambio de tamaño. El truco es que los círculos usan los atributos cx y cy para el posicionamiento r para el tamaño. La mecánica es más o menos la misma ... una elipse sería un poco más complicada, pero una vez más solo se trata de trabajar con los atributos correctos.
Ejemplo jsFiddle de arrastrar y soltar y círculo redimensionable
window.onload = function() {
var R = Raphael("canvas", 500, 500),
c = R.circle(100, 100, 50).attr({
fill: "hsb(.8, 1, 1)",
stroke: "none",
opacity: .5
}),
s = R.circle(125, 125, 15).attr({
fill: "hsb(.8, .5, .5)",
stroke: "none",
opacity: .5
});
var start = function () {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.sizer.ox = this.sizer.attr("cx");
this.sizer.oy = this.sizer.attr("cy")
this.attr({opacity: 1});
this.sizer.attr({opacity: 1});
},
move = function (dx, dy) {
// move will be called with dx and dy
this.attr({cx: this.ox + dx, cy: this.oy + dy});
this.sizer.attr({cx: this.sizer.ox + dx, cy: this.sizer.oy + dy});
},
up = function () {
// restoring state
this.attr({opacity: .5});
this.sizer.attr({opacity: .5});
},
rstart = function() {
// storing original coordinates
this.ox = this.attr("cx");
this.oy = this.attr("cy");
this.big.or = this.big.attr("r");
},
rmove = function (dx, dy) {
// move will be called with dx and dy
this.attr({cx: this.ox + dy, cy: this.oy + dy});
this.big.attr({r: this.big.or + Math.sqrt(2*dy*dy)});
};
c.drag(move, start, up);
c.sizer = s;
s.drag(rmove, rstart);
s.big = c;
};
Prueba Graphiti aquí está el enlace: Draw2d y Graphiti
Está basado en Raphael y es muy fácil de usar.