拉斐爾 - 旋轉整套而不是每個對象

Question

嗨，大家好我試圖一次用Element.animate（）設置旋轉幾個對象，但它旋轉的每個元素不整組，我需要一整套

幫助我請我很新的拉斐爾只是閱讀文檔的幾個小時，試圖功能

  var archtype = Raphael("canvas", 600, 600); 

      archtype.customAttributes.arc = function (xloc, yloc, value, total, R) { 
       var alpha = 360/total * value, 
       a = (90 - alpha) * Math.PI/180, 
       x = xloc + R * Math.cos(a), 
       y = yloc - R * Math.sin(a), 
       path; 
       if (total == value) { 
        path = [["M", xloc, yloc - R],["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]]; 
       } else { 
        path = [["M", xloc, yloc - R],["A", R, R, 0, +(alpha > 180), 1, x, y]]; 
       } 
       return { 
        path: path 
       }; 
      }; 

      var circleSet=archtype.set(); 

      var arc_red0 = archtype.path().attr({ 
       "stroke": "#f00", 
       "stroke-width": 30, 
       arc: [300, 300, 30, 360, 250] 
      }); 
      circleSet.push(arc_red0); 

      var arc_red1 = archtype.path().attr({ 
       "stroke": "#f00", 
       "stroke-width": 30, 
       arc: [300, 300, 20, 360, 250], 
       "transform": "r50,300,300" 
      }); 
      circleSet.push(arc_red1); 

      var arc_red2 = archtype.path().attr({ 
       "stroke": "#f00", 
       "stroke-width": 30, 
       arc: [300, 300, 80, 360, 250], 
       "transform": "r90,300,300" 
      }); 
      circleSet.push(arc_red2); 

      var arc_red3 = archtype.path().attr({ 
       "stroke": "#f00", 
       "stroke-width": 30, 
       arc: [300, 300, 60, 360, 250], 
       "transform": "r190,300,300" 
      }); 
      circleSet.push(arc_red3); 

      var arc_red4 = archtype.path().attr({ 
       "stroke": "#f00", 
       "stroke-width": 30, 
       arc: [300, 300, 70, 360, 250], 
       "transform": "r270,300,300" 
      }); 
      circleSet.push(arc_red4); 

      var $angle=0; 

      (function(){ 
       circleSet.animate({transform:"r"+$angle+",300,300"},200); 
       $angle++; 

       init = false; 
       setTimeout(arguments.callee, 60); 
      })(); 

Answer 1

選項1：使用拉斐爾的sets功能 - 所有的元素添加到一組，然後告訴拉斐爾旋轉組。有關更多信息，請參閱http://raphaeljs.com/reference.html#Paper.set。

這實際上並不會旋轉整個Raphael元素，但是如果圖像的所有元素都是該集合的一部分，它看起來就像是這樣做。

選項2：使用標準CSS旋轉元素或其HTML容器。這實際上可能是最簡單的選擇，但是它的缺點是它不適用於舊版瀏覽器（尤其是舊版本的IE）。這裏有解決方法（例如CSS Sandpaper），但是如果您已經在使用Raphael來幫助IE兼容，那麼您可能不希望再使用其他腳本。