 |
Chapitre 4 INTERACTION AVEC HTML/CSS |
| Précédent | Suivant | |
Interaction avec HTML/CSS
Contrôle d'une balise HTML
* Objectif de ce cours: animation et interaction
* Contrôle possible d'une balise HTML en TypeScript
* Récupération ou création d'une balise dans le document HTML
* Balise HTML = objet de type "HTMLElement"
* Contrôle de son style CSS via l'attribut "style"
* Exemple: balise.style.backgroundColor = "#FFFF00";
* Mais l'écriture est parfois fastidieuse
* Exemple: positionner une balise
* Proposition: la classe "Sprite"
* Masque l'écriture fastidieuse
* Pour simplifier le contrôle d'une balise
* Et fournit des méthodes adaptées à l'animation
Association sprite-balise
* Principe: un sprite est associé à une balise
* La classe "Sprite" possède un attribut "balise"
* Accessible via la méthode "getBalise"
* sprite.getBalise().style.backgroundColor = "#FFFF00";
* Construction d'un sprite ==> fournir une balise
* Un sprite ne peut pas exister sans balise
* Récupération d'une balise HTML par identifiant
* balise = document.getElementById("id");
* Ou création d'une nouvelle balise HTML
* balise = document.createElement("type");
* Création d'un sprite: sprite = new Sprite(balise);
Hiérarchie des balises
* Document HTML = hiérarchie de balises
* Balise racine = document
* document ==> enfants <head> et <body>
* <body> ==> enfants <h1>, <p>...
* Possibilité d'ajouter ou retirer une balise enfant
* sprite.ajouter(sprite_enfant);
? balise.appendChild(balise_enfant);
* sprite.retirer(sprite_enfant);
? balise.removeChild(balise_enfant);
* Possibilité de se déplacer dans la hiérarchie
* sprite_parent = sprite.getParent();
? balise_parent = balise.parentNode;
* sprites_enfants = sprite.getEnfants();
? balises_enfants = balise.childNodes;
Positionner une balise
* Plusieurs méthodes de positionnement
* Toutes utiles en fonction des besoins
* Positionnement statique
* Comportement par défaut
* Positionnement relatif
* Translation par rapport à la position par défaut
* Positionnement flottant
* Placement le plus à gauche ou droite possible
* Positionnement absolu
* Placement par rapport à la position de son conteneur
Positionnement relatif
* Exemple: 3 éléments en-ligne
* Sortie du flux normal de placement
* element2.style.position = "relative";
* La zone du placement par défaut est conservée
* Translation par rapport à la position initiale
* element2.style.left = "xpx";
* element2.style.top = "ypx";
Positionnement absolu
* Exemple: élément contenu dans un autre
* Sortie du flux normal de placement
* element2.style.position = "absolute";
* Translation par rapport...
* Au conteneur si il est positionné
* position: absolute/relative
* A la page si le conteneur n'est pas positionné
* position: static
* float: left/right
Superposition de balises
* Des balises peuvent se chevaucher
* Comment contrôler qui est devant l'autre ?
* Notion de profondeur
* Attribut "zIndex"
* Plus la valeur est grande, plus la balise est en avant
* Ordre de superposition par défaut
* Non positionné (statique)
* Flottant
* Position relative
* Position absolue
* Modifiable uniquement pour les éléments positionnés
(position relative ou absolue)
Géométrie d'un sprite (1/2)
* A la construction d'un sprite
* Positionnement absolu forcé
* this.balise_.style.position = "absolute";
* Déplacer un sprite
* sprite.setX(x); ? balise.style.left = x + "px";
* sprite.setY(y); ? balise.style.top = y + "px";
* sprite.setXY(x,y);
* Dimensionner un sprite
* sprite.setLargeur(l);
? balise.style.width = l + "px";
* sprite.setHauteur(h);
? balise.style.height = h + "px";
* sprite.setDimension(l,h);
Géométrie d'un sprite (2/2)
* Localiser un sprite
* Récupération délicate à partir de "balise.style"
* D'où le choix de mémoriser la position dans le sprite
* Méthodes: getX(), getY()
* Connaître les dimensions d'un sprite
* Idem localisation
* Méthodes: getLargeur(), getHauteur()
* Autres informations géométriques
* Centre: getCentreX(), getCentreY()
* Rectangle englobant: getRectangle()
* Cercle englobant: getCercle()
Aspect d'un sprite
* Opacité (coefficient entre 0 et 1)
* sprite.setOpacite(coef);
? balise.style.opacity = coef;
* Rotation (en degré)
* sprite.setRotation(angle);
? balise.style.transform = "rotate(" + angle + "deg)";
* Pivot de rotation: sprite.setPivotRotation(x,y);
? balise.style.transformOrigin = x + "px " + y + "px";
* Invisibilité
* sprite.masquer(); ? balise.style.display = "none";
* sprite.montrer(); ? balise.style.display = "block";
* Accès aux informations
* Méthodes: getOpacite(), getRotation(), estVisible()
Sprite image
* Création "from scratch" d'une balise de type "img"
* balise = document.createElement("img");
* Balise image = objet de type "HTMLImageElement"
* Affectation d'un fichier image
* balise.src = "chemin";
* Dimensionnement
* balise.style.width = largeur + "px";
* balise.style.height = hauteur + "px";
* Plus simple: associer un sprite à une balise image
* sprite = new Sprite(document.createElement("img"));
* sprite.setImage("chemin",largeur,hauteur);
Sprite toile (1/2)
* Sprite associé à une balise de type "canvas"
* Possibilité de dessiner sur la balise
* Un "contexte graphique" (ou "pinceau") est nécessaire
* pinceau = sprite.getPinceau();
? pinceau = balise.getContext("2d");
* Dessiner une figure
* Départ: pinceau.beginPath();
* Positionner: pinceau.moveTo(x,y);
* Tracer (ligne droite à partir de l'ancienne position): pinceau.lineTo(x,y);
* Fin: type de tracé (traits et/ou remplissage)
* Traits: pinceau.stroke();
* Remplissage: pinceau.fill();
Sprite toile (2/2)
* Exemple d'un rectangle
p.beginPath();
p.moveTo(x,y);
p.lineTo(x+largeur,y);
p.lineTo(x+largeur,y+hauteur);
p.lineTo(x,y+hauteur);
p.lineTo(x,y);
p.stroke();
* Choisir l'aspect du tracé
* Couleur du trait: p.strokeStyle = "#FFFF00";
* Epaisseur du trait: p.lineWidth = 2;
* Couleur de remplissage: p.fillStyle = "#00FF00";
Balise audio
* Contrôle direct d'une balise de type "audio"
* Dans la page HTML
* <audio id="id" src="fichier_son"></audio>
* Dans le code TypeScript
* Balise audio = objet de type "HTMLAudioElement"
* Récupération: audio = document.getElementById("id");
* Lancement / reprise lecture: audio.play();
* Pause lecture: audio.pause();
* Positionnement (en secondes): audio.currentTime = n;
* Etat: if (audio.paused) ...