Raphael 2.0 - 回転点を正しく設定する方法

Question

ある点で私のオブジェクトを回転させる方法がわかりません。この私が、中心点の私の座標が正しい であり、それはあるが、それは、その点を中心に回転していないかどうかをチェックするためにダミーサークルを作成している私は

  // 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"); 

を持っているのjavascriptです： -/

私はいつも道に見えたさまざまなフレームワークでゲージを作成しましたが、そのロジックはRaphael 2.0にうまく翻訳されていないようです。

私はグーグルでいくつかのエントリを見つけましたが、 より古いバージョンのものは、 のものが多く変更されたか、廃止されているためです。

Answer 1

回転中心を正しく設定していますが、いくつかの混乱を招いていることがあります。私も回転をしながら、あなたがそれを持っていた方法は、アニメーションが徐々に以前の翻訳を削除したと思います

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

：私はにアニメーションのターゲットを変更することで、この作業を取得することができました。この追加により、変換を蓄積することができます。また、私は 'r'を 'R'に切り替える必要があったことに注意してください。この例では小さな「r」が何をしているのかは私には分かりません。

とにかく、ここには作業demoがあります。

Btw、私は何もしていないようないくつかの回転をコメントアウトしました。