Raphael 2.0 - 如何正確設置旋轉點

我不明白如何在某個點旋轉我的對象。這是JavaScript我Raphael 2.0 - 如何正確設置旋轉點

  // create needle 
      var rsr = Raphael('rsr', '320', '240'); 
      var needle = rsr.path("m 156.74443,870.84631 -2.26177,119.38851 
      4.38851,0 z"); needle.attr({id: 'needle',parent: 'layer1',fill: 
      '#ff6600',stroke: '#000000',"stroke-width": '0.61',"stroke-linecap": 
      'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke- 
      opacity": '1',"stroke-dasharray": 'none'}); 

      needle.rotate(0); 
      needle.transform("t0,-812.36218").data('id', 'needle'); 

      // get needle bounding box 
      var needleBox = needle.getBBox(); 

      // calculate rotation point (bottom middle) 
      var x_rotate_point = needleBox.x + (needleBox.width/2); 
      var y_rotate_point = needleBox.y + needleBox.height; 

      // rotate needle 
      needle.attr({rotation: 0}).animate({transform:"r45,"+x_rotate_point 
      +","+y_rotate_point}, 6000); 

      // Creates circle at rotation point 
      var circle = rsr.circle(x_rotate_point, y_rotate_point, 10); 
      circle.attr("fill", "#f00"); 
      circle.attr("stroke", "#fff");

我創建了一個虛擬圈來檢查，如果我的我的中心點座標是正確的，它是，但它不圍繞該點旋轉： -/

當我在不同的框架中創建標量總是看起來要走的路，但是這個邏輯似乎並沒有很好地轉化成Raphael 2.0。

我做了它的谷歌，並找到了一些條目，但問題似乎是舊版本，因爲很多東西已被更改或不推薦使用。

來源

2011-12-15 Glenn De Backer

您正在設置正確的旋轉中心，但還有其他一些事情正在導致一些混淆。我能夠通過改變動畫目標來得到這個工作：

{transform: needle.attr("transform") + "R45,"+x_rotate_point+","+y_rotate_point}

我看你的方式，動畫逐漸刪除以前的翻譯，同時還做旋轉。這個增加允許它積累轉換。另外，請注意，我必須將'r'切換爲'R'。在這個例子中，我不清楚小'r'在做什麼。

無論如何，這裏是一個工作demo。

順便說一句，我也評論了幾輪似乎沒有做任何事的輪換。

來源

2011-12-16 14:47:29

Raphael 2.0 - 如何正確設置旋轉點

回答

相關問題