関数内に新しい要素を動的に追加する

Question

私は、太陽の周りの惑星の回転のように、主オブジェクトの周りのオブジェクトを回転させる関数をプログラムしました。

小さなソーラーシステムで新しい惑星をボタンをクリックするだけで動的に追加しようとしています。それらはすべてSVG要素です。私はrotation(coorX, coorY, object)関数を使って太陽の周りを回転する新しい要素を動的に生成する方法を試してみるのが面倒です。彼らはすべて動的に命名され動的に配置される必要がありますが、これは私にとっては難しいことです。

これを達成するために私のコードはどのように見える必要がありますか？どのようなヘルプやヒントもありがとうございます。

ここに私のコードです：

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

 
function rotation(coorX, coorY, object) { 
 
\t object.side += (1.0/object.speed); 
 
\t var ang = object.side * 2.0 * Math.PI/180.0; 
 
\t var r = object.spin; 
 
    
 
\t return { 
 
\t \t x: Math.cos(ang) * r - Math.sin(ang) * r + coorX, 
 
\t \t y: Math.sin(ang) * r + Math.cos(ang) * r + coorY 
 
\t }; 
 
    } 
 
    
 
    function rotationball (circle) { 
 
\t var x, y, x_black, y_black, e, newpos; 
 
\t e = document.getElementById (circle); 
 
\t x_black = parseFloat (document.getElementById (objectX).getAttribute ("cx")); 
 
\t y_black = parseFloat (document.getElementById (objectX).getAttribute ("cy")); 
 
\t newpos = rotation(x_black, y_black, ball[circle]); 
 
    
 
\t e.setAttribute ("cx", newpos.x); 
 
\t e.setAttribute ("cy", newpos.y); 
 
\t } 
 
    
 
    var ball = { 
 
    blue: \t {speed: 1.2, \t spin: 100, \t side: 0.0} , 
 
    red: \t {speed: 1.2, \t spin: 200, \t side: 0.0} 
 
\t }; 
 
    
 
    function animate() { 
 
    \t rotationball("blue"); 
 
    \t rotationball("red"); 
 
\t }  
 

 
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"> 
 
\t \t <circle id="black" class="st0" cx="500" cy="300.8" r="10"/> 
 
\t \t <circle id="blue" class="st1" cx="375.4" cy="289.7" r="10"/> \t 
 
    <circle id="red" class="st2" cx="375.4" cy="289.7" r="10"/> \t 
 
    
 
</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"要素に追加します。アニメーションを定義する要素を定義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; 
} 

使用後

ここでは、合格仕様オブジェクトに基づいて2つのサブオブジェクトを持っていることを行いmakeBall機能ですそれこのような：

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>

---

サイドノート： setIntervalではなく、requestAnimationFrameを使用すると見えます。

サイドノート2：私が知る限り、spinは実際には中心からの距離です（たとえば、各ボールが黒いボールの周囲に描く円の半径）。