选择多个SVG元素和Raphael.js

Question

拖动有谁知道我能做到这一点？

我基本上有多种形状，线条，文字等的SVG文件......我想实现一个选择的工具，它可以帮助我选择多个元素，将它们组合并拖动它们。

Answer 1

有在拉斐尔的功能，称为设置：http://raphaeljs.com/reference.html#set

您可以添加你想要拖动到新集，然后拖动机制应用到组的元素。

我让你这一点：http://jsfiddle.net/Wrajf/

它并不完美。我将鼠标移动事件添加到该文件，但你需要像jQuery库。否则，如果你将鼠标移动到快速，你就会掉下来。

Answer 2

我这样做（example here）：

编辑：一些清洁

1. 创建方法来设置和检索该组的元素：

   Raphael.el.setGroup = function (group) { 
       this.group = group; 
   }; 
   Raphael.el.getGroup = function() { 
       return this.group; 
   }; 
   

2. 创建的方法您的分组元素：

   Raphael.fn.superRect = function (x, y, w, h, text) { 
       var background = this.rect(x, y, w, h).attr({ 
       fill: "#FFF", 
       stroke: "#000", 
       "stroke-width": 1 
       }); 
       var label = this.text(x+w/2,y+h/2, text); 
       var layer = this.rect(x, y, w, h).attr({ 
       fill: "#FFF", 
       "fill-opacity": 0, 
       "stroke-opacity": 0, 
       cursor: "move" 
       }); 
       var group = this.set(); 
       group.push(background, label, layer); 
       layer.setGroup(group); 
       return layer; 
   }; 
   

3. 创建函数拖动分组元素：

   var dragger = function() { 
       this.group = this.getGroup(); 
       this.previousDx = 0; 
       this.previousDy = 0; 
   }, 
   move = function (dx, dy) { 
       var txGroup = dx-this.previousDx; 
       var tyGroup = dy-this.previousDy; 
   
       this.group.translate(txGroup,tyGroup); 
   
       this.previousDx = dx; 
       this.previousDy = dy; 
   }, 
   up = function() {}; 
   

4. 初始化SVG文件，并创建你的元素（元素的顺序很重要）::

   window.onload = function() { 
   
       var paper = Raphael(0, 0,"100%", "100%"); 
   
       var x=50, y=50, w=30, h=20; 
   
       paper.superRect(x, y, w, h, "abc").drag(move, dragger, up); 
   
       x +=100; 
   
       paper.superRect(x, y, w, h, "def").drag(move, dragger, up); 
   
   };