拉斐爾JS旋轉組/未設置單獨

我已經與拉斐爾JS玩弄左右，但未能找到任何解決方案旋轉組/集的路徑，組，而不是個別。拉斐爾JS旋轉組/未設置單獨

A組/設置路徑的：

A group/set of path

的每個元素被旋轉。不是整個組/集：

When group/set is rotated

我怎麼辦：

var bobble = map.paper.set(); 

bobble.push(map.paper.add([{ 
    "fill":fill, 
    "stroke":"none", 
    x: 50, 
    y: 50, 
    width: 100, 
    height: 100, 
    "type":"rect", 
    "r": 4 
},{ 
    "fill":fill, 
    "stroke":"none", 
    x: 100, 
    y: 25, 
    width: 200, 
    height: 50, 
    "type":"rect", 
    "r": 4 
}])); 

bobble.rotate(45);

我在做什麼錯？

來源

2013-08-27 curly_brackets

按[這個問題]（http://stackoverflow.com/q/18459985/472495），你已經獲取了兩個看似很好的答案，但沒有回答要麼。請養成迴應的習慣，如果只是爲了感謝人們協助你。 – halfer

raphaeljs的集合是元素的列表。所以，當你使用變換方法時，它只是集合中列表的唯一元素的變換。

我創造它支持摹標籤爲我的項目的插件。但是我還沒有實現轉換方法。

const SVG = 'http://www.w3.org/2000/svg'; 
function TCRaphael(container, width, height) { 
    var paper = new Raphael(container, width, height); 
    paper.node = document.getElementById(container).getElementsByTagName("svg")[0]; 
    console.log(paper.node) 
    paper.group = function (parent) { 
     return new Group(parent); 
    }; 

    function Group(parent) { 
     var me = this; 
     this.node = document.createElementNS(SVG, "g"); 
     if (typeof parent !== 'undefined') { 
      if (typeof parent.node != 'undefined') 
       parent.node.appendChild(me.node); 
      else{ 
       parent.appendChild(me.node); 
      } 
     } 

     this.append = function (child) { 
      me.node.appendChild(child.node); 
      return child; 
     }; 

     this.appendNode = function (childNode) { 
      me.node.appendChild(childNode); 
     }; 

     this.appendTo = function (parent) { 
      if (typeof parent !== 'undefined') { 
       if (typeof parent.node != 'undefined') 
        parent.node.appendChild(me.node); 
       else{ 
        parent.appendChild(me.node); 
       } 
      } 
     }; 

     this.remove = function(){ 
      me.node.parentNode.remove(); 
     }; 

     this.circle = function(x, y, r){ 
      return me.append(paper.circle(x, y, r)); 
     }; 

     this.ellipse =function(x, y, rx, ry){ 
      return me.append(paper.ellipse(x, y, rx, ry)); 
     }; 

     this.image = function(src, x, y, width, height){ 
      return me.append(paper.image(src, x, y, width, height)); 
     }; 

     this.path = function(pathString){ 
      return me.append(paper.path(pathString)); 
     }; 

     this.rect = function(x, y, width, height, r){ 
      return me.append(paper.rect(x, y, width, height, r)); 
     }; 

     this.text = function(x, y, text){ 
      return me.append(paper.text(x, y, text)); 
     } 


    } 
    return paper; 
}

您可以添加更多的功能，你想TCRaphael。

來源

2013-08-27 15:25:18

在這裏你去DEMO

var paper = Raphael('arrows'); 

var r1 = paper.rect(100,100,200,10,5).attr({fill:'white'}); 
var r2 = paper.rect(50,200,100,15,5).attr({fill:'white'}); 

var st = paper.set(r1,r2); 

var l_coord = st.getBBox().x, 
    r_coord = st.getBBox().x2, 
    t_coord = st.getBBox().y, 
    b_coord = st.getBBox().y2; 

var cx = (l_coord + r_coord)/2, 
    cy = (t_coord + b_coord)/2; 

st.rotate(54,cx,cy);

enter image description here