Ajustement automatique balise canvas

**Cortexx** · 27/01/2013, 15h20

Bonjour,

depuis hier je galère à redimensionner automatiquement un bloc fait d'une balise canvas par rapport à une balise div parente.
J'explique en détail : le bloc div peu avoir une dimension fixe en largeur ou être redimensionner selon la taille de la page (pas de problème pour sa). Par contre ma balise canvas, qui est contenu dans ma div, n'accepte que des dimensions fixe, je n'arrive pas à répercuter automatiquement les dimensions de ma div à ma balise canvas. J'ai beau essayer tout un tas de code JS, CSS, HTML5 trouvé par ci par là mais rien y fait.

Pour plus de détail : je développe un module pour joomla avec comme javascript JQuery et TagCanvas,

Pouvez vous m'aider à résoudre se problème*?

Cordialement.

**NoSmoking** · 27/01/2013, 16h57

Bonjour,

Par contre ma balise canvas, qui est contenu dans ma div, n'accepte que des dimensions fixe,...

donnes une width:100% et une height:100% à ton canvas.

**Cortexx** · 27/01/2013, 17h38

Bien vue .... mais non. Si c'était aussi simple je ne demanderais pas d'aide

.

Mieux qu'un grand discours ... du code

.

Code :

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
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" dir="ltr">
  <head>
    <title>Exemple</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.tagcanvas.js" type="text/javascript"></script>
    <script type="text/javascript">
	window.onload = function() {
		try {
			TagCanvas.Start('container','tags');
		} catch(e) {
			document.getElementById('block').style.display='none';
		} };
	</script>
 
  </head>
  <body >
    <div style="width:400px;height:400px;background-color:#000000">
		<div id="block">
		  <canvas id="container">
			<p>Votre Naviguateur ne prend pas en charge la balise canvas !</p>
		  </canvas>
		</div>
		<div id="tags">
		  <ul>
			<li><a href="#">Fish</a></li>
			<li><a href="#">Chips</a></li>
			<li><a href="#">Machin</a></li>
			<li><a href="#">Truc</a></li>
			<li><a href="#">Chips</a></li>
			<li><a href="#">Salt</a></li>
			<li><a href="#">Vinegar</a></li>
			<li><a href="#">Chouette</a></li>
			<li><a href="#">Truc Much</a></li>
			<li><a href="#">sdgsg</a></li>
			<li><a href="#">sdfsd ezt eaz</a></li>
			<li><a href="#">hgjgujkf </a></li>
			<li><a href="#">s dfdfsdf </a></li>
			<li><a href="#">s dfsdfeazrfe</a></li>
			<li><a href="#">ty e(yert</a></li>
			<li><a href="#">fgsdf aera</a></li>
			<li><a href="#">sy(eyzyazr</a></li>
			<li><a href="#">sdfgs dfsr</a></li>
		  </ul>
		</div>
	</div>
  </body>
</html>

Les deux ressources JS :

http://code.jquery.com/jquery.min.js
http://www.goat1000.com/jquery.tagcanvas.js?2.1

Exécutez le code et essayer de trouver comment dimensionner le canvas par rapport à la div. Faut pas oublier que la div peu avoir différente taille et que la canvas doit si ajuster automatiquement.

J'essaye toujours de trouver une solution à l'heure actuelle, pas moyen .. mais alors pas moyen d'y arriver

.

**NoSmoking** · 27/01/2013, 18h39

Aucun problème pour redimensionner seulement tu as une DIV qui verrouille

Code :

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

<div style="width:400px;height:400px;background-color:#000000">

Sinon il faut que tu mettes aussi une hauteur pour ton container, et un 100% en hauteur et largeur à ton canvas.

**Cortexx** · 27/01/2013, 19h39

Oui mais la c'est pour l'exemple, donc normal que la div ais des dimensions fixe

.
Pour le container, ou même la div block, tu aura beau mettre se que tu veux en dimension (en pourcentage) il ne sera jamais de la même dimension que la div principal.

**thelvin** · 27/01/2013, 23h26

La balise canvas s'ajuste parfaitement. J'ignore pourquoi tu persistes à dire le contraire.

En revanche le contenu du canvas est tout déformé, comme quand on redimensionne une image. C'est normal : une image a un certain nombre de pixels, et si on la redimensionne, elle doit afficher le même nombre de pixels, à l'intérieur d'un nombre différent de pixels.
Le canvas fonctionne pareil : il a une largeur et une hauteur en pixels, sur lesquels on dessine. Et il a aussi une largeur et une hauteur CSS, et son contenu va s'arranger pour occuper exactement cet espace.

Autrement dit CSS seul ne suffit pas à résoudre le problème : il faut aussi changer la taille intrinsèque du canvas quand sa taille CSS change.
Cela ne peut arriver que dans deux occasions :
- La fenêtre a été redimensionnée => window.addEventListener('resize') ou un équivalent jQuery.
- L'un de tes script a redimensionné un élément dont la taille du canvas dépend => Ce script doit aussi déclencher un réajustement de la taille du canvas.

Envoyé par Cortexx

Oui mais la c'est pour l'exemple, donc normal que la div ais des dimensions fixe

.

Le principe d'un exemple, en général, c'est d'illustrer le problème. Je vois pas de quoi tu parles.

**Cortexx** · 28/01/2013, 01h11

Effectivement les canvas se redimensionne mais dans mon cas sa ne le fait pas correctement. Car je pense que personne n'a testé le code que j'ai fournie pour voir se que cela affichais et en essayant de mettre les redimensionnement à 100% sur la canvas

.

thelvin, tu dit que le principe d'un exemple c'est d'illustré le problème .... je suis d'accord et c'est se que je fait, mais je ne vais pas montrer tous les cas de figure qui pourrait se présenter, car je vais inondé le sujet de code et sa va vite devenir illisible

.

Je pensais que je faisais une erreur sur le code, mais je fait fausse route HTML / CSS n'est pas capable de faire le redimensionnement correctement.
Je vais plutôt m'orienter coté JS, pour obtenir les dimensions de ma div principal pour ensuite les répercuter sur la balise canvas.

**thelvin** · 28/01/2013, 09h54

Envoyé par Cortexx

Effectivement les canvas se redimensionne mais dans mon cas sa ne le fait pas correctement. Car je pense que personne n'a testé le code que j'ai fournie pour voir se que cela affichais et en essayant de mettre les redimensionnement à 100% sur la canvas

.

Je l'ai fait, et
- d'une part je n'aurais pas dû avoir à le faire. Parce que moi je sais faire, et que le but c'est de vérifier si toi aussi.
- d'autre part le canvas se redimensionne parfaitement.

Envoyé par Cortexx

thelvin, tu dit que le principe d'un exemple c'est d'illustré le problème .... je suis d'accord et c'est se que je fait,

Ton exemple ne montre rien du tout, c'est moi qui me suis tapé tout le boulot, et le résultat c'est que la balise <canvas> adapte sa taille exactement comme on te l'a dit.

Envoyé par Cortexx

mais je ne vais pas montrer tous les cas de figure qui pourrait se présenter, car je vais inondé le sujet de code et sa va vite devenir illisible

.

Un seul aurait déjà été un bon début. Avec des effets quand on redimensionne la fenêtre c'était facile et direct.

Envoyé par Cortexx

Je pensais que je faisais une erreur sur le code, mais je fait fausse route HTML / CSS n'est pas capable de faire le redimensionnement correctement.
Je vais plutôt m'orienter coté JS, pour obtenir les dimensions de ma div principal pour ensuite les répercuter sur la balise canvas.

En effet, avec des canvas et des images, il n'y a pas vraiment le choix.
Pour les images c'est un peu normal, mais pour les canvas j'ai toujours trouvé que c'était pas top. 'Faudrait que CSS ait pouvoir de changer leur taille en pixels.

**Cortexx** · 28/01/2013, 12h05

Je doit avoir un problème, je ne met pas le code au bon endroit

.

Pour moi il ne se redimensionne pas correctement, dans la balise canvas je rajoute juste

Code :

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

style="width:100%;height:100%;"

et j'ai le résultat en pièce jointe. On voit bien que la canvas ne se redimensionne pas à la taille de la div parente.
J'ai testé sous IE9 et Chrome.

J'ai fait une erreur ?

**thelvin** · 28/01/2013, 13h03

Il se redimensionne bien à la taille de la div parente, mais la div parente n'a pas de taille. C'est la grande parente qui fait 400px. Donc la parente doit être mise à 100% aussi.

Ceci étant dit, une fois qu'on en arrive là on est pas plus avancé. L'image étant déformée à cause de la différence entre taille CSS à l'écran et taille en pixels de la surface de dessin du canvas. Seul JavaScript peut corriger ça.

Invité · 28/01/2013, 13h08

bonjour

on ne definit pas la taille d'un canvas avec l'attribut style on le fait en mettant height et width uniquement

Code :

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

<canvas height='100' width='100'></canvas>

**Cortexx** · 28/01/2013, 14h25

thelvin : oui effectivement j'ai oublié de spécifier 100% à la div intermédiaire, mais sa change rien même quand on le modifie, c'est déformé ... comme tu dit on est pas plus avancé. Et je remarque aussi que pour controler le mouvement de la sphère, seul une petite partie (en haut à gauche) est sensible, tout le reste du canvas ne réagis pas. Peu être un problème du coté de la ressource JS jquery.tagcanvas.js.
Je vais me pencher sur le redimensionnement coté JS, si j'ai un bon résultat j'ajouterais la solution au sujet.

mekal : oui, le rendu n'est pas le même quand on définie les dimensions avec l'attribut style.

**Cortexx** · 28/01/2013, 16h10

Enfin ...... j'ai trouvé et la solution était bien le JS, donc voici le résultat.

Code :

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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-fr" lang="fr-fr" dir="ltr">
  <head>
    <title>Exemple</title>
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="jquery.tagcanvas.js" type="text/javascript"></script>
    <script type="text/javascript">
	window.onload = function() {
		try {
			TagCanvas.Start('container','tags');
		} catch(e) {
			document.getElementById('block').style.display = 'none';
	}};
 
  	$(document).ready( function() {
  		var c = $('#container');
  		var container = $(c).parent();
	  	$(window).resize(respondCanvas);
	  	function respondCanvas() {
  			c.attr('width', $(container).width());
  			c.attr('height', $(container).height());
		}
		respondCanvas();
  	});
	</script>
 	</head>
	<body >
		<div style="width:400px;height:400px;background-color:#000000" >
			<div style="width:100%;height:100%" id="block">
			  <canvas id="container">
				<p>Votre Naviguateur ne prend pas en charge la balise canvas !</p>
			  </canvas>
			</div>
			<div id="tags">
			  <ul>
				<li><a href="#">Etiquette 1</a></li>
				<li><a href="#">Etiquette 2</a></li>
				<li><a href="#">Etiquette 3</a></li>
				<li><a href="#">Etiquette 4</a></li>
				<li><a href="#">Etiquette 5</a></li>
				<li><a href="#">Etiquette 6</a></li>
				<li><a href="#">Etiquette 7</a></li>
				<li><a href="#">Etiquette 8</a></li>
				<li><a href="#">Etiquette 9</a></li>
				<li><a href="#">Etiquette 10</a></li>
				<li><a href="#">Etiquette 11</a></li>
				<li><a href="#">Etiquette 12</a></li>
				<li><a href="#">Etiquette 13</a></li>
				<li><a href="#">Etiquette 14</a></li>
				<li><a href="#">Etiquette 15</a></li>
				<li><a href="#">Etiquette 16</a></li>
				<li><a href="#">Etiquette 17</a></li>
				<li><a href="#">Etiquette 18</a></li>
				<li><a href="#">Etiquette 19</a></li>
				<li><a href="#">Etiquette 20</a></li>
			  </ul>
			</div>
		</div>
	</body>
</html>

Maintenant quand ont modifie les dimensions dans la ligne :

Code :

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

<div style="width:400px;height:400px;background-color:#000000" >

le canvas se redimensionne correctement.

**thelvin** · 28/01/2013, 16h14

Yup, je pensais à quelque chose de ce genre. N'étant pas un gourou de jQuery je ne voulais pas balancer une solution à la gland alors qu'il y avait sûrement plus simple.

Bien joué.

**NoSmoking** · 28/01/2013, 20h17

Code :

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

1
2
3
4
5
window.onload = function() {
};
//... et plus loin ...
$(document).ready( function() {
});

c'est du luxe ou une étourderie ?

**Cortexx** · 28/01/2013, 20h46

Envoyé par NoSmoking

c'est du luxe ou une étourderie ?

ni l'un ni l'autre

, je sais que les deux fonctions que tu cite font la même chose, mais j'arrive pas à les jumeler.
Et pour info, si je pouvait me passer du JS, je le ferais, je suis pas trés doué dans se domaine.

**NoSmoking** · 28/01/2013, 21h50

...mais j'arrive pas à les jumeler.

Tiens lu dans leur documentation

To start TagCanvas using the jQuery plugin:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 $(document).ready(function() {
   if( ! $('#myCanvas').tagcanvas({
     textColour : '#ffffff',
     outlineThickness : 1,
     maxSpeed : 0.03,
     depth : 0.75
   })) {
     // TagCanvas failed to load
     $('#myCanvasContainer').hide();
   }
   // your other jQuery stuff here...
 });

**Cortexx** · 28/01/2013, 21h59

Oui sa j'ai vu, mais sa m'oblige à modifer toute l'architecture de mon code. Mais de toute manière j'ai pas le choix.

Ajustement automatique balise canvas [API HTML5]

JavaScript

Discussions similaires

Partager

Partager