Question

我编写了一个旋转主体周围物体的功能，就像行星围绕太阳旋转一样。

我正试图通过简单的按钮动态地在我的小太阳系中添加新的行星。它们都是SVG元素。我无法弄清楚如何使用rotation(coorX, coorY, object)函数动态生成围绕太阳旋转的新元素。它们都需要动态命名和动态定位，这对我来说太难了。

为了让我实现这一目标，我的代码应该是什么样子？提前感谢您提供任何帮助/提示。

这是我的代码：

var objectX = "black";
function addObject(){
  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 );
	}   
    
  var ball = { 
  blue:	{speed: 1.2, 	spin: 100,	side: 0.0} , 
  red:	{speed: 1.2, 	spin: 200,	side: 0.0}
	};
  
  function animate () {
  	rotationball("blue"); 
  	rotationball("red");   
	}       

var animateInterval = setInterval(animate, 1000 / 60);

.st0{fill:black;}
.st1{fill:blue;}
.st2{fill:red;}

<div class="spinning"> <svg xmlns="http://www.w3.org/2000/svg" id="solly" viewBox="0 0 1000 600"><g id="Sun2">
		<circle id="black" class="st0" cx="500" cy="300.8" r="10"/>
		<circle id="blue" class="st1" cx="375.4" cy="289.7" r="10"/>	
    <circle id="red" class="st2" cx="375.4" cy="289.7" r="10"/>	
  
</div>
<button type="button" onclick="addObject()">
button
</button>

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

Answer 1

您使用ball对象非常正确（尽管我称之为balls）。要动态创建circle元素，请执行以下操作：

var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");

然后设置其属性（circle.setAttribute）并将其附加到id="Sun2"元素。

这是一个makeBall函数，它根据您传递的规范对象执行此操作，该规范对象具有两个子对象：element（定义元素）和animation定义动画：

function makeBall(spec) {
  // Create the element
  var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  // Set its various attributes
  ["id", "cx", "cy", "r", "class"].forEach(function(attrName) {
    circle.setAttribute(attrName, spec.element[attrName]);
  });
  // Add it to the sun
  document.getElementById("Sun2").appendChild(circle);
  // Remember its animation settings in `ball`
  ball[spec.element.id] = spec.animation;
}

然后你就这样使用它：

makeBall({
  element: {id: "blue", class: "st1", cx: "375.4", cy: "289.7", r: "10"},
  animation: {speed: 1.2, spin: 100, side: 0.0}
});

最后一部分是使用ball内的属性动态地替换动画：

function animate() {
  Object.keys(ball).forEach(function(id) {
    rotationball(id);
  });
}

以下是从标记中删除blue和red并在开始时动态添加它们的示例。我也摆脱了objectX并使旋转始终相对于black，并在添加新球时连接了一些字段：

var ball = {};

makeBall({
  element: {id: "blue", class: "st1", r: "10"},
  animation: {speed: 1.2, spin: 20, side: 0.0}
});
makeBall({
  element: {id: "red", class: "st2", r: "10"},
  animation: {speed: 1.2, spin: 40, side: 120.0}
});
makeBall({
  element: {id: "yellow", class: "st3", r: "10"},
  animation: {speed: 1.2, spin: 60, side: 240.0}
});

function makeBall(spec) {
  // Create the element
  var circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
  // Set its various attributes
  ["id", "cx", "cy", "r", "class"].forEach(function(attrName) {
    if (spec.element[attrName]) {
      circle.setAttribute(attrName, spec.element[attrName]);
    }
  });
  // Add it to the sun
  document.getElementById("Sun2").appendChild(circle);
  // Remember its animation settings in `ball`
  ball[spec.element.id] = spec.animation;
}

function addObject() {
  // Create a spec to use with makeBall from the fields
  var spec = {
    element: {
      id: document.getElementById("new-id").value,
      class: document.getElementById("new-class").value,
      r: parseFloat(document.getElementById("new-r").value)
    },
    animation: {
      speed: parseFloat(document.getElementById("new-speed").value),
      spin: parseFloat(document.getElementById("new-spin").value),
      side: parseFloat(document.getElementById("new-side").value)
    }
  };
  // Some minimal validation
  if (!spec.element.id || !spec.element.r || !spec.animation.speed || !spec.animation.spin || isNaN(spec.animation.side)) {
    alert("Need all values to add a ball");
  } else if (ball[spec.element.id]) {
    alert("There is already a ball '" + spec.element.id + "'");
  } else {
    // Do it!
    makeBall(spec);
  }
}

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, black;

  // We always rotate around black
  black = document.getElementById("black");
  
  // Get this circle and update its position
  e = document.getElementById(circle);
  x_black = parseFloat(black.getAttribute("cx"));
  y_black = parseFloat(black.getAttribute("cy"));
  newpos = rotation(x_black, y_black, ball[circle]);

  e.setAttribute("cx", newpos.x);
  e.setAttribute("cy", newpos.y);
}

function animate() {
  Object.keys(ball).forEach(function(id) {
    rotationball(id);
  });
}

var animateInterval = setInterval(animate, 1000 / 60);

.st0 {
  fill: black;
}
.st1 {
  fill: blue;
}
.st2 {
  fill: red;
}
.st3 {
  fill: yellow;
}
.st4 {
  fill: orange;
}

<div>Add ball:
  <label>
    ID: <input type="text" id="new-id" value="newball">
  </label>
  <label>
    R: <input type="text" id="new-r" value="10">
  </label>
  <label>
    Speed: <input type="text" id="new-speed" value="1.2">
  </label>
  <label>
    Spin: <input type="text" id="new-spin" value="80">
  </label>
  <label>
    Side: <input type="text" id="new-side" value="0.0">
  </label>
  <label>
    Class: <input type="text" id="new-class" value="st4">
  </label>
  <button type="button" onclick="addObject()">
    Make Ball
  </button>
</div>

<div class="spinning">
  <svg xmlns="http://www.w3.org/2000/svg" id="solly" viewBox="0 0 1000 600">
    <g id="Sun2">
      <circle id="black" class="st0" cx="500" cy="300.8" r="10" />
    </g>
  </svg>
</div>

附注：您可能会考虑使用requestAnimationFrame而不是setInterval。

旁注2：据我所知，你所谓的spin实际上是距离中心的距离（例如，每个球将围绕黑球描述的圆的半径）。 / p>

在函数中动态添加新元素

1 个答案: