Insérer et positionner des images matricielles

**eleydet** · 01/03/2020, 12h26

Bonjour,

Il est possible d'insérer et de positionner des images matricielles :
- Entre <div> et </div> (solution la plus ancienne, voir la discussion Animation continue d'images dans une fenêtre)
- Entre <canvas> et </canvas> (voir la discussion Canvas, latitude et longitude)
- Et entre <svg> et </svg> (solution la plus récente)

Je me demande quelle solution est la meilleure... Il me semble que la dernière, entre <svg> et </svg>, est la plus souple.

**NoSmoking** · 03/03/2020, 11h05

Bonjour,

Je me demande quelle solution est la meilleure...

la bonne question serait pour quel usage ?

**eleydet** · 07/03/2020, 22h05

Bonsoir,

L'idée est de créer des animations :

A partir d'images 2D.
Traitées coté client... en JavaScript.

Et de comparer trois solutions :

Entre <div> et </div> : Simple mais l'ajout d'un segment ou d'un triangle est compliqué.
Entre <canvas> et </canvas> : Fonctionne, mais il faut placer des images les unes par dessus les autres au lieu de les déplacer.
Et entre <svg> et </svg> : Les possibilités pour obtenir un même résultat sont nombreuses!

Pour illustrer cette comparaison, les trois codes ci-dessous font la même chose.

1ère solution

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
div {
  background-color: #ddd;
  position: relative;
  width: 500px;
  height: 300px;
  margin: auto;
  overflow: hidden;
}
img { position: absolute; }
</style>
</head>
 
<body>
<div><img src="velo.png"></div>
 
<script>
x = -100;
velo = document.getElementsByTagName("IMG")[0];
velo.style.top = "20px";
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  velo.style.left = x+"px";
};
setInterval(bouge, 8);
</script>
</body>
 
</html>

2ème solution

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
canvas {
  display: block;
  margin: auto;
}
</style>
</head>
 
<body>
<canvas id="dessin" width="500" height="300"></canvas>
 
<script>
cadre = document.getElementById('dessin').getContext('2d');
cadre.fillStyle = "rgb(220, 220, 220)";
cadre.fillRect (0, 0, 500, 300);
x = -100;
velo = new Image();
velo.src = 'velo.png';
velo.onload=function() {
  cadre.drawImage(velo, -100, 20);
};
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  cadre.fillRect (0, 0, 500, 300);
  cadre.drawImage(velo,x,20);
};
setInterval(bouge, 8);
</script>
 
</body>
 
</html>

3ème solution

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
svg {
  display: block;
  margin: auto;
}
</style>
</head>
 
<body>
<svg width="500" height="300">
  <rect x="0" y="0" width="500" height="300" fill="#ddd" />
  <image xlink:href="velo.png" x="-100" y="20"/>
</svg>
 
<script>
x = -100;
velo = document.getElementsByTagName("image")[0];
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  velo.setAttribute('x',x);
};
setInterval(bouge, 8);
</script>
</body>
 
</html>

**SpaceFrog** · 09/03/2020, 09h15

Une vielle page de sprites
https://sk-martin.developpez.com/Art...toon/wheel.htm

**NoSmoking** · 12/03/2020, 15h59

Envoyé par eleydet

Pour illustrer cette comparaison, les trois codes ci-dessous font la même chose.

Pour reprendre ton exemple je dirais que, pour moi, la seule solution à mettre en place est de placer une l'image dans une <div>, le tout étant animé via le CSS et non par le JavaScript, de la sorte on aura moins d'utilisation de CPU et peu ou pas de reflow.
A ce sujet il est préférable dans ce cas de jouer avec transform: translate3d qu'avec la position left.

Avec SVG tu pourrais également te passer de JavaScript, SVG possédant des éléments comme animateMotion permettant de faire des choses sympas même si pas toujours très évidentes, mais mettre un élément <image> dans un élément <svg> et la déplacer via JavaScript est pour moi un non-sens.

Concernant <canvas>, il n'y a pas de travail sur les pixels donc son intérêt sur le coup est moindre et consommateur de CPU.

Ici on est effectivement dans une « animation linéaire » mais dès qu'il va falloir être un peu plus tordu alors la question pourra effectivement se poser.

**eleydet** · 14/03/2020, 10h41

Bonjour,

J'apporte un commentaire que je compléterai... quand j'aurai le temps. En fait, les trois solutions sont utilisées.

Leaflet est basé sur <div> et </div>,
Polymaps est basé sur <svg> et </svg>,
et ayvri sur <canvas> et </canvas>, mais pour de la 3D.

Un bel exemple de réalisation :
https://ayvri.com/scene/nxkw9q4yj8/c...063m67lx9ozq59

**eleydet** · 15/03/2020, 09h12

Bonjour,

La suite de mon commentaire... Bien évidemment translate3d(), par exemple, est une très bonne solution. Les codes que j'ai proposés sont très simplifiés par rapport à ce qu'on rencontre dans la vraie vie.

NoSmoking a écrit :

mettre un élément <image> dans un élément <svg> et la déplacer via JavaScript est pour moi un non-sens

Je ne comprends pas pourquoi. Pour écrire sur une image, tracer des lignes par exemple, j'imagine deux solutions :

On ajoute du SVG par dessus l'image placée entre <div> et </div>.
L'image est déjà dans le SVG, il n'y a plus qu'à dessiner.

Première solution :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
<style>
div {
  background-color: #ddd;
  position: relative;
  width: 500px;
  height: 300px;
  overflow: hidden;
}
img, svg { position: absolute; }
</style>
</head>
 
<body>
<div>
<img src="velo.png">
<svg width="500" height="300">
  <line x1="50" y1="50" x2="450" y2="250" stroke-width="5" stroke="black"/>
</svg>
</div>
 
<script>
x = -100;
velo = document.getElementsByTagName("IMG")[0];
velo.style.top = "20px";
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  velo.style.left = x+"px";
};
setInterval(bouge, 8);
</script>
</body>
 
</html>

Deuxième solution, plus simple il me semble :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!DOCTYPE html>
<html>
 
<head>
<meta charset="utf-8">
</head>
 
<body>
<svg width="500" height="300">
  <rect x="0" y="0" width="500" height="300" fill="#ddd" />
  <image xlink:href="velo.png" x="-100" y="20"/>
  <line x1="50" y1="50" x2="450" y2="250" stroke-width="5" stroke="black"/>
</svg>
 
<script>
x = -100;
velo = document.getElementsByTagName("image")[0];
bouge = function() {
  x=x+2;
  if (x>400) x = -100;
  velo.setAttribute('x',x);
};
setInterval(bouge, 8);
</script>
</body>
 
</html>

**NoSmoking** · 15/03/2020, 17h02

Dans le contexte de ton exemple, l'utilisation du déplacement en CSS reste suffisante et l'équivalent en SVG se fait sans utilisation de JavaScript.

Une telle animation SVG peut se faire simplement en utilisant l'élément <animateMotion>.

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
<svg width="500" height="300">
  <path id="bosse" d="M0,265 q60,-50 125,0t125,0t125,0t125,0t125, 0" />
  <g>
    <image xlink:href="images/velo.png" x="-60" y="-5" width="120" height="100" style="transform: translate(0,-100px);" />
    <animateMotion begin="0s" dur="4s" repeatDur="indefinite" rotate="auto">
      <mpath xlink:href="#bosse" />
    </animateMotion>
  </g>
</svg>

Exemple en ligne : Animation en pur SVG

Mais je le répète, je ne cible que ce type d'animation, le but étant d'utiliser le moins de CPU possible et de générer le moins de repaint également, cela laissera du temps pour faire autre chose.

Voir dans la console, sous chrome par exemple, More tools -> animation.

**eleydet** · 15/03/2020, 18h25

Bonsoir,

Très bel exemple d'animation, NoSmoking, merci beaucoup!

Je crois que j'ai compris : Tu n'es pas contre l'idée de mettre un élément <image> dans un élément <svg>. C'est l'utilisation de JavaScript que tu trouves maladroite dans ce cas de figure.

Alors nous sommes d'accord. Je mettais en avant JavaScript, pensant à une animation évoluant selon divers événements (actions de l'utilisateur, données envoyées par un capteur...).

**NoSmoking** · 16/03/2020, 13h56

Tu n'es pas contre l'idée de mettre un élément <image> dans un élément <svg>. C'est l'utilisation de JavaScript que tu trouves maladroite dans ce cas de figure.

C'est tout à fait cela

•Leaflet est basé sur <div> et </div>,

et également avec <svg> pour ce qui concerne au moins les polyquelquechose et également <canvas> si besoin.

**eleydet** · 16/03/2020, 22h32

Bonsoir,

NoSmoking a écrit :

Leaflet est basé sur <div> et </div> et également avec <svg> pour ce qui concerne au moins les polyquelquechose

Effectivement, l'image au format SVG couvre l'intégralité de l'image formée par l'assemblage d'images matricielles (les tuiles ou morceaux de carte). On est dans le cadre de la première solution que je proposais. On ajoute du SVG par dessus l'image placée entre <div> et </div>.

Pour l'ajout d'un élément <canvas>, je n'ai pas vu comment c'est fait.

La deuxième solution, celle choisie par les concepteurs de Polymaps, me semble meilleure.

**NoSmoking** · 17/03/2020, 06h45

Pour l'ajout d'un élément <canvas>, je n'ai pas vu comment c'est fait.

~~Cela a visiblement était abandonné dans les dernières versions : GridLayer~~
[Edit]
Après plus ample lecture :
Il existe toujours L.Canvas, et on peut avoir un rendu « canvas » en mettant l'option preferCanvas des cartes à true.
[/Edit]

La deuxième solution, celle choisie par les concepteurs de Polymaps, me semble meilleure.

Pas regardé mais visiblement plus maintenu depuis pas mal de temps, mais rien n'empêche de regarder ce qui a été fait.

**eleydet** · 25/03/2020, 11h59

Bonjour,

On dit que... autant vérifier soi-même! Pour évaluer la charge du CPU, Je démarre le minimum d'applications, j'attends un peu, puis je lance la commande sous Linux (basée sur top, on fait la moyenne sur 20 secondes):

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

echo "scale=2; ($(top -n20 -b | grep firefox | cut -c47-54 | paste -sd+ | sed 's/,/\./g'))/20" | bc

Le test est fait sur un vélo qui se déplace sur fond gris, avec un segment noir dessiné par dessus. Résultats:

div : 13,8
canvas: 16,9
svg ; 13,8

Le plus gourmand en ressources est canvas, les solutions div et svg sont à égalité. Evidemment, ce n'est qu'une indication, un test parmi une infinité de tests possibles.

Insérer et positionner des images matricielles

JavaScript

Discussions similaires

Partager

Partager