選擇多個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); 
   
   };