Question

我已经找到了一个围绕主要物体旋转物体的功能，比如围绕太阳的行星。

我希望能够通过单击按钮更改其他对象旋转的对象。例如，我有对象A，B和C.B和C围绕A旋转。但是我希望C能够围绕B旋转，而B保持围绕A旋转。我试图在此处解决这个问题。代码：

var objectX = "black";
function switchObject(){
  objectX = "blue";
}

function rotation(coorX, coorY, object) {
    object.side +=  (1.0 / object.speed); 
    var ang = object.side * 2.0 * Math.PI / 180.0; 
    var r = object.spin;

    return {
        x: Math.cos(ang) * r - Math.sin(ang) * r + coorX, 
        y: Math.sin(ang) * r + Math.cos(ang) * r + coorY 
    };
  }  

  function rotationball ( circle ) {
    var x, y, x_black, y_black, e, newpos;
    e = document.getElementById ( circle );
    x_black = parseFloat ( document.getElementById ( objectX ).getAttribute ( "cx" ) );
    y_black = parseFloat ( document.getElementById ( objectX ).getAttribute ( "cy" ) );
    newpos = rotation( x_black, y_black, ball[circle] );

    e.setAttribute ( "cx", newpos.x );
    e.setAttribute ( "cy", newpos.y );
    }

我已经知道如何通过您在代码中看到的objectX变量轻松切换哪个对象是其他对象旋转的对象。但这种情况会立即发生，我需要逐渐进行，这就是我认为更难以解决的数学代码。

我的问题是：

为了让红色物体开始围绕蓝色物体旋转，我的代码应该是什么样子，而蓝色物体围绕黑色物体旋转。这需要在许多轮换中逐步完成。我感谢任何帮助，无论是我需要的一些代码还是指向正确的方向！提前谢谢。

这是我的JsFiddle

PS：我还计划将每个添加的行星定位在离中心点（太阳）稍远的位置，而不是之前添加的行星。

Answer 1

我写了相对移动球。只需设置第二个＆＃34; planet＆＃34;的相对坐标，数学保持不变，只需改变 frame of reference。请参阅JsFiddle

rotationball("red"); 
relativeRotationBall("blue", "red");

var ball = { 
  blue: {speed: 1.2,    spin: 100,  side: 0.0} , 
  red:  {speed: 2.2,    spin: 200,  side: 0.0} // speed up
};

<强>更新在点击开关按钮上更改参考框架。

function preSetObjectRotation(dedfaultObject, frameReference) {    
    var self = this;
      this.defaultObject = dedfaultObject;
      this.defaultFrameReference = frameReference;
      this.setFrameReference = function (frameReference) {
          self.defaultFrameReference = frameReference;
      };
      this.relativeRotationBall = function relativeRotationBall () {
        var e, newpos;
        e = document.getElementById ( self.defaultObject );
        newpos = relativeRotation( self.defaultFrameReference, ball[self.defaultObject] );
        e.setAttribute ( "cx", newpos.x );
        e.setAttribute ( "cy", newpos.y );
      }  
 }

JsFiddle

更新2 当点在一行上时自动切换，在isEclipse函数（JsFiddle ）

中

在对象

1 个答案: