Guide de développement du moteur Egret : Visual Programming_node.js

Afficher les objets et afficher les listes

"Afficher l'objet", la signification précise est un objet qui peut être affiché sur scène. Les objets pouvant être affichés incluent des graphiques, du texte, des vidéos, des images, etc. qui peuvent être vus directement, ainsi que des conteneurs d'objets d'affichage qui ne peuvent pas être vus mais qui existent réellement.

Dans Egret, les graphiques visuels sont composés d'objets d'affichage et de conteneurs d'objets d'affichage.

Si nous voulons exprimer la scène de l'image ci-dessus, comment devrions-nous la décrire à travers un arbre ?

Afficher la hiérarchie des objets

Dans Egret, les objets d'affichage sont divisés en deux catégories : l'une est un conteneur d'objets d'affichage qui peut inclure d'autres objets d'affichage, appelés "conteneur" en abrégé. L'autre est un objet d'affichage pur qui ne peut pas inclure d'autres objets d'affichage à l'exception de lui-même, appelé « objet non conteneur ».

En fonctionnement réel, nous pouvons considérer une telle structure comme une structure arborescente. Les conteneurs peuvent être compris comme des branches, et les objets non conteneurs peuvent être compris comme des feuilles.

Dans cette arborescence, le niveau supérieur est la « scène ». Correspondant au programme, on peut voir un objet <font face="NSimsun">stage</font>. La scène est le conteneur d’affichage le plus fondamental de l’architecture d’affichage d’Egret. Chaque application Egret possède un et un seul objet d'étape. La scène est le nœud racine de cette arborescence d’affichage.

Dans la scène, nous avons également un conteneur principal. Ce conteneur est le conteneur créé par la classe de document. Chaque Egret aura une classe de document, qui doit être un conteneur d'objet d'affichage.

Dans cette scène, nous incluons un arrière-plan de scène composé d'une image d'arrière-plan et d'un grand arbre. Les deux autres éléments sont composés de personnages et d'un champ herbeux.

Afficher la liste

Le diagramme de structure d'objet d'affichage en arborescence que nous voyons ci-dessus est en fait la « liste d'affichage » d'Egret.

Il est très pratique d'utiliser la liste d'affichage pour gérer les objets conteneurs et non conteneurs. Lorsqu'un objet d'affichage est dans la liste d'affichage, nous pouvons voir l'objet à l'écran. Lorsque nous supprimons l'objet d'affichage de la liste d'affichage, l'objet disparaît de l'écran.

Egret gère une liste d'affichage en interne. Les développeurs n'ont pas besoin de se soucier du fonctionnement de la liste. Il vous suffit d'effectuer les opérations correspondantes sur vos propres objets d'affichage.

Afficher le type d'objet

Egret encapsule strictement tous les objets autour du concept de liste d'affichage pendant le processus de conception architecturale. Dans Egret, tous les objets d'affichage héritent de la classe <font face="NSimsun">DisplayObject</font>. <font face="NSimsun">DisplayObject</font> La classe est "l'objet d'affichage" que nous avons décrit plus tôt. Dans Egret, tous les "conteneurs" héritent de <font face="NSimsun">DisplayObjectContainer</font>.

Afin de gérer uniformément la liste d'affichage, tous les objets d'affichage sont unifiés dans la classe DisplayObject. Tous les objets d'affichage héritent de DisplayObject et DisplayObject hérite de EventDispatcher. Autrement dit, tous les objets d'affichage peuvent envoyer des événements.

DisplayObjectContainer La classe parent du conteneur d'objets d'affichage est également DisplayObject.

Nous avons encore simplifié le concept en fonctionnement réel, qui peut se résumer en deux règles :

Les classes qui héritent directement de DisplayObject ne sont pas des conteneurs. Les classes qui héritent de DisplayObjectContainer sont des conteneurs.