JS - 不能在循环内增加旋转属性？答案

【问题标题】：JS - cant increment rotation attribute within loop?JS - 不能在循环内增加旋转属性？
【发布时间】：2021-05-11 06:59:15
【问题描述】：

目前所有的圆（原子）都被放置在彼此之上。

我正在尝试增加一个特定的属性，以便圆圈（原子）从彼此的另一侧开始。在我的小提琴中，我正在创建 SVG 并尝试在每个循环中设置不同的旋转。

尝试： 尝试使用 ++ 和 += 递增，尽管我似乎无法以编程方式在每个原子之间添加等量的分隔。还尝试添加一个可以添加到旋转属性的所需值的数组，但最终这些值会改变，因为原子的数量会改变。

这是我工作的 JS 小提琴：

https://jsfiddle.net/hab_1/qj9rwdmf/5/

  let mainAtom = function(xPos, yPos, name){
for(i = 0; i < ring; i++){
    var mainAtom = document.createElementNS('http://www.w3.org/2000/svg','circle');
    mainAtom.setAttribute('cx', xPos);
    mainAtom.setAttribute('cy', yPos);             
    mainAtom.setAttribute('r', '5');
    mainAtom.setAttribute('fill', atomFillColor);
    mainAtom.setAttribute('stroke', atomStrokeColor);
    mainAtom.setAttribute('stroke-width', '3');
    mainAtom.setAttribute('z-index', '2');
    // mainAtom.setAttribute('rotate', '36');
  /*   const name = [" one", " two", " three"]   */
    mainAtom.setAttribute('class', 'atom' + " " + name + " " + i) 
  var svg = document.getElementById('svgx'); 
    svg.appendChild(mainAtom); 
}

}

问题：有没有办法将创建的圆（原子）均匀地隔开，而不是彼此重叠？

【问题讨论】：

标签： javascript loops svg rotation increment

【解决方案1】：

如果我正确理解了您的问题，您需要使用三角函数为每个原子分配正确的坐标（而不是尝试旋转它）。这应该会给你一个想法：

rings =[2, 8, 18, 32, 32, 18, 8]

rings.forEach(ring => {

  let mainRingStrokeColor = "orange"
  let mainRing = function(xPos, yPos, r) { 
    let mainRing = document.createElementNS('http://www.w3.org/2000/svg','circle');
      mainRing.setAttribute('cx', xPos);
      mainRing.setAttribute('cy', yPos);  
      mainRing.setAttribute('r', r);
      mainRing.setAttribute('fill', 'rgba(0,0,0,0)');
      mainRing.setAttribute('stroke', mainRingStrokeColor);
      mainRing.setAttribute('stroke-width', '3');
    let svg = document.getElementById('svgx');
        svg.appendChild(mainRing); }
      
  let atomFillColor = "white"
  let atomStrokeColor = "orange"
  
  let mainAtom = function(xPos, yPos, r, name){
    for(i = 0; i < ring; i++){
        var mainAtom = document.createElementNS('http://www.w3.org/2000/svg','circle');
        mainAtom.setAttribute('cx', xPos + r * Math.cos((2 * Math.PI * i)/ring));
        mainAtom.setAttribute('cy', yPos + r * Math.sin((2 * Math.PI * i)/ring));
        //mainAtom.setAttribute('cx', xPos);
        //mainAtom.setAttribute('cy', yPos);
        mainAtom.setAttribute('r', '5');
        mainAtom.setAttribute('fill', atomFillColor);
        mainAtom.setAttribute('stroke', atomStrokeColor);
        mainAtom.setAttribute('stroke-width', '3');
        mainAtom.setAttribute('z-index', '2');
        //mainAtom.setAttribute('rotate', '180deg');
      /*   const name = [" one", " two", " three"]   */
        mainAtom.setAttribute('class', 'atom' + " " + name + " " + i) 
      var svg = document.getElementById('svgx'); 
        svg.appendChild(mainAtom); 
    }
  } 
  
    //create atoms and rings
    if(ring <= 2){
        mainRing(120, 120, 30) 
        mainAtom(120, 120, 30, "orbit1")
    } else if (ring <= 8 && ring > 2 ) {
        mainRing(120, 120, 50)
        mainAtom(120, 120, 50, "orbit2")
    }   else if (ring <= 18 && ring > 8) {
        mainRing(120, 120, 70)
        mainAtom(120, 120, 70, "orbit3")

        mainRing(120, 120, 90)
        mainAtom(120, 120, 90, "orbit4")
    }
  
})

https://jsfiddle.net/2uq14gx9/36/

【讨论】：