Reprenons depuis le début et essayons de structurer tout cela.
Point #1
Fonction de lecture du fichier XML
Nous allons créer une fonction de lecture du fichier XML sur base de ce qui a déjà été dit.
1
2
3
4
5
6
7
8
9
10
11
| function getXML(url, callback) {
const oXhr = new XMLHttpRequest();
oXhr.onreadystatechange = function() {
if (this.readyState === 4 && this.status === 200) {
// appel fonction d'affichage en passant en paramètre le contenu XML
callback(this.responseXML);
}
};
oXhr.open("GET", url, true);
oXhr.send()
} |
Tu noteras que l'on passe en paramètre à cette fonction l'url du fichier à lire et la référence à la fonction qui va réaliser l'affichage ou bien d'autres choses.
Elle est un peu succincte mais correcte et réutilisable.
Point #2
Maintenant regardons les possibilités d'affichages
Tu peux soit afficher/ajouter tes images directement dans le DOM, soit les afficher dans un élément <canvas>, pourquoi pas !.
On va partir du principe que dans ton code HTML on trouve les éléments suivants :
1
2
| <div id="div-images"></div>
<canvas id="canvas"></canvas> |
Point #2.1
Affichage dans le DOM.
On va créer une fonction d'affichage comme suit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| function addImages(docXML) {
// récup. élément de destination de l'ajout
const oDest = document.getElementById("div-images")
// récup. des différents élements devant être traités
const images = docXML.querySelectorAll("Img");
// on boucle sur chacun d'eux
images.forEach((img) => {
// création d'un élément <img>
const oImage = document.createElement("IMG");
// ajout événement sur le load
oImage.onload = () => {
// ajout à l'élément destination
oDest.appendChild(oImage);
};
// affectaion de l'url à l'image
oImage.src = img.textContent;
});
} |
Je ne pense pas que tu ais de soucis à tout comprendre à ce stade.
Pour afficher les images on fera un simple appel à la fonction
getXML et celle-ci appellera la fonction
addImages,
la fonction callback donc, lorsque le fichier aura été lu.
Dans ton code on va donc retrouver cet appel sous cette forme
getXML( "nom_fichier.xml", addmages);
Point #2.2
Affichage dans un
<canvas>.
La démarche va être la même avec juste les spécificités liés aux
<canvas>.
On va créer une fonction d'affichage comme suit :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
| function drawImages(docXML) {
// récup. et init de lélément de destination de l'affichage
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
canvas.width = 800;
canvas.height = 600;
// récup. des différents élements devant être traités
const images = docXML.querySelectorAll("Img");
// on boucle sur chacun d'eux
images.forEach((img, ind) => {
// création d'un Object Image
const oImage = new Image();
// ajout événement sur le load
oImage.onload = () => {
// dessin au bon endroit
ctx.drawImage(oImage, ind * 200, 0, 200, 200);
};
// affectaion de l'url à l'image
oImage.src = img.textContent;
});
} |
Pour afficher les images on fera un simple appel à la fonction
getXML et celle-ci appellera la fonction
drawImages,
la fonction callback donc, lorsque le fichier aura été lu.
Dans ton code on va donc retrouver cet appel sous cette forme
getXML( "nom_fichier.xml", drawImages);
Concernant cette fonction il est noter qu'il faut décaler les images pour qu'elles ne se superposent pas, en réalité elles effacent l'emplacement déjà occupé, et pour ce faire on a utilisé
ind * 200, dans
ctx.drawImage(...), pour décaler les images de 200px à chaque fois.
Point #3
Perso je partirais sur la solution insertion dans le DOM, plus propre et facilement gérable avec du CSS.
Voilà à toi de jouer, et si tu as des questions n'hésites pas !
Lire XML pour afficher et clique
Répondre avec citation
Partager