aframe
Mixins
Sök…
Introduktion
Mixins ger ett sätt att komponera och återanvända vanligt använda uppsättningar av komponentegenskaper. De definieras med hjälp av elementet <a-mixin> och placeras i <a-assets> . Mixins bör ställas in med en id, och när en enhet anger den id som dess mixinattribut, kommer enheten att absorbera alla mixins attribut.
Exempel på användning av mixins
<a-scene>
<a-assets>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="blue" material="color: blue"></a-mixin>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red cube"></a-entity>
<a-entity mixin="blue cube"></a-entity>
</a-scene>
Enheten med röd kub tar egenskaperna från den röda mixin och kubblandningen i den ordningen. Likaså med den blå kuben. Konceptuellt utvidgar enheterna ovan till:
<a-entity material="color: red" geometry="primitive: box"></a-entity>
<a-entity material="color: blue" geometry="primitive: box"></a-entity>
Sammanfoga komponentegenskaper
Egenskaper för en komponent med flera egenskaper kommer att slås samman om de definieras av flera mixins och / eller enheten. Till exempel:
<a-scene>
<a-assets>
<a-mixin id="box" geometry="primitive: box"></a-mixin>
<a-mixin id="tall" geometry="height: 10"></a-mixin>
<a-mixin id="wide" geometry="width: 10"></a-mixin>
</a-assets>
<a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
</a-scene>
Alla geometrikomponentegenskaperna kommer att slås samman eftersom de ingår som mixins och definieras på enheten. Enheten skulle då motsvara:
<a-entity geometry="primitive: box; height: 10; depth: 2; width: 10"></a-entity>
Ordning och företräde
När ett företag inkluderar flera mixins som definierar samma komponentegenskaper har det högsta mixin företräde. I exemplet nedan inkluderar enheten både red och blue mixins, och eftersom den blue mixin inkluderas sist kommer den slutliga färgen på kuben att bli blå.
<a-scene>
<a-assets>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="blue" material="color: blue"></a-mixin>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red blue cube"></a-entity>
</a-scene>
Om en enhet själv definierar en egenskap som redan definieras av en mixin, har företagets definition företräde. I exemplet nedan inkluderar enheten både red och blue mixins och definierar också en grön färg. Eftersom enheten direkt definierar sin egen färg kommer kubens slutliga färg att vara grön.
<a-scene>
<a-assets>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="blue" material="color: blue"></a-mixin>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red blue cube" material="color: green"></a-entity>
</a-scene>