RaphaelJS似乎缺乏形狀層次結構

Question

Raphael似乎缺乏形狀層次結構？

我不能創建一個更小的圓圈「附加」到一個更大的圓圈，並且知道當較大的圓圈時它將被縮放/翻譯。同樣，如果我把元素放入一個集合，拖動處理程序將單獨連接到形狀，並在其回調函數中對該集合進行處理。

我可以俯視一下嗎？

Answer 1

這與Raphael當前的行爲不會爲「設置」創建任何實際元素。

Answer 2

如果你想在一組允許Drag'nDrop，您可以使用下面的代碼：

Raphael.el.set_drag = function (aSet) { 
    // Enable drag'n drop in a Set 
    var startAll = function() { 
     // storing original coordinates 
     for (var i in this.set.items) { 
      var comp = this.set.items[i]; 
      try { 
       comp.attr({opacity: 0.3}); 
      } catch (ex) {;} 
      if (comp.type == "path") { 
       comp.ox = comp.getBBox().x; 
       comp.oy = comp.getBBox().y; 
      } 
      else { 
       comp.ox = comp.attrs.cx || comp.attrs.x; 
       comp.oy = comp.attrs.cy || comp.attrs.y; 
      } 
     } 
    }, 

    moveAll = function (dx, dy) { 
     for (var i in this.set.items) { 
      var comp = this.set.items[i]; 
      if (comp.attrs.cx)    // ellipse 
       comp.attr({cx: comp.ox + dx, cy: comp.oy + dy}); 
      else if (comp.attrs.x) 
       comp.attr({x: comp.ox + dx, y: comp.oy + dy}); 
      else   // path 
       comp.translate(comp.ox - comp.getBBox().x + dx, comp.oy - comp.getBBox().y + dy); 
     } 
    }, 

    upAll = function() { 
     for (var i in this.set.items) { 
      var comp = this.set.items[i]; 
      if (comp.attrs.cx)    // ellipse 
       comp.attr({cx: comp.ox, cy: comp.oy + dy}); 
      else if (comp.attrs.x) 
       comp.attr({x: comp.ox, y: comp.oy + dy}); 
      else   // path 
       comp.translate(comp.ox , comp.oy - comp.getBBox().y + dy); 
      this.set.items[i].attr({opacity: 1}); 
     } 
    }; 

    this.set = aSet; //create a "set" property on the element 
    this.drag(moveAll,startAll,upAll); 
    return this;  
} 


// Create your elements 
var first_element = paper.rect(10,10,100,50).attr({fill:'#f00'}); 
var second_element = paper.rect(30,300,100,50).attr({fill:'#0f0'}); 

// Add elements to your set 
var myset = paper.set(); 
myset.push(first_element); 
myset.push(second_element); 

// Add handler on the elements 
first_element.set_drag(myset); 
second_element.set_drag(book_set);