Komponenten verstehen

Question

Lernen von Aframe/Javascript zur gleichen Zeit.

Der Versuch, meine eigene Komponente zu schreiben, die den Radius eines Objekts 2 auf Klick ändert sich aber, wenn, wenn der Radius des Objekts bereits 2 ist, dann sollte es um den Radius zu 1.

verringern Wie würde ich die Referenz Kugelobjekt, das ich versuche, den Radius von in der Komponente zu ändern.

Danke

Hier ist meine Komponentenlogik.

AFRAME.registerComponent('change-radius', { 

schema: { 
    radius: {type: 'int'} 
}, 

init: function(){ 
    var data = this.data; 
    this.el.addEventListener('click', 

    function(){  
     if (data.radius === 1) { 
      this.setAttribute('radius', data.radius); 
      console.log('THIS ONE'); 
     } else { 
      this.setAttribute('radius', 1); 
      console.log('NO !!!! THIS ONE'); 
     } 
    }) 
} 
}); 

Hier ist meine Sphäre Code.

<a-sphere id="sphere" change-radius="radius: 2" change-color="color: #0000FF" color="#F44336" radius="1" position="0 2 -4"></a-sphere> 

Answer 1

Der Zugriff auf das Kugelobjekt von der Komponente ist eine Frage von scope.
- Für die beigefügte Komponente ist this.el das Kugelelement.
- Innerhalb der this.el.addEventListener(); bezieht sich this auf das Sphere-Element, da der Listener-Funktionsumfang this.el ist. Wenn es an anderer Stelle definiert wurde, konnte Sie bind es (um den this Rahmen zu halten), oder rufen Sie es aus dem Hörer
- Sonst würden Sie müssen eine let el = this.el Referenz machen, um das Element an Ihre convinience zugreifen

natürlich können Sie ein beliebiges Objekt erhalten mit document.querySelector('cssSelector)

---

ich ein boolean Schalter machen die Überprüfung, ob die Kugel oder nicht, dann stellen Sie den Radius und die boolean entsprechend vergrößert würde vorschlagen:

init: function(){ 
    var data = this.data; 
    let el = this.el; 
    let enlarged = false; 
    this.el.addEventListener('click',function(){ 
    //BOOL SWITCH 
    if(!enlarged){ 
     data.radius = 2; 
    } else { 
     data.radius = 1; 
    } 
    // STATE CHANGE, AND RADIUS CHANGE 
    enlarged != enlarged; 
    el.setAttribute('radius',data.radius); 
    } 
    }) 
} 

Imo ist es bette r als die tatsächliche Radiusprüfung, denn es ist viel schneller, einen booleschen Zustand zu erhalten, als die Eigenschaften des Objekts zu prüfen.

könnten Sie prüfen nur, ob data.radius == 1, und dann entsprechend den Radius ändern, kann kürzer sein, aber es ist an Ihnen