utilisation d'une librairie de dessin

**sebac** · 02/04/2010, 15h52

Bonjour j'utilise la librairie wz_jsgraphics.js qui se trouve http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm je me sert donc de l'exemple :2. Functions to Draw Shapes de cette page mais lorsque je teste comme ci-dessous aucun dessin n'est fait. Est-ce moi qui fait mal l'appel de fonction. je suis sous ff

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
<html>
<head>
 
<SCRIPT>
/***************************************outils de dessin********************************************/
 
 
function myDrawFunction()
{
  jg_doc.setColor("#00ff00"); // green
  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
  jg_doc.setColor("maroon");
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
  jg_doc.paint(); // draws, in this case, directly into the document
 
  jg.setColor("#ff0000"); // red
  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
  jg.setColor("#0000ff"); // blue
  jg.fillRect(110, 120, 30, 60);
  jg.paint();
 
  jg2.setColor("#0000ff"); // blue
  jg2.drawEllipse(10, 50, 30, 100);
  jg2.drawRect(400, 10, 100, 50);
  jg2.paint();
}
 
var jg_doc = new jsGraphics(); // draw directly into document
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");
 
//document.onclick=myDrawFunction();
 
 
/***************************************************************************************************/
</SCRIPT>
<SCRIPT src="wz_jsgraphics.js"></SCRIPT>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
</head>
<body style="background-color:#6699CC;"  onLoad="myDrawFunction();"><!--examens('2')-->
 
 
 
</body>
 
 
</html>

Merci

**sebac** · 02/04/2010, 17h59

à force j'y suis parvenu. Il faut mettre tout ça dans le body du html

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
 
	<div id="Canvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>   
	<div id="Canvas1" style="overflow: auto; position:relative;height:300px;width:400px;"></div>   
	<div id="anotherCanvas" style="overflow: auto; position:relative;height:300px;width:400px;"></div>   
 
<script type="text/javascript">
<!--
function myDrawFunction()
{
  jg_doc.setColor("#00ff00"); // green
  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
  jg_doc.setColor("maroon");
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
  jg_doc.paint(); // draws, in this case, directly into the document
 
  jg.setColor("#ff0000"); // red
  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
  jg.setColor("#0000ff"); // blue
  jg.fillRect(110, 120, 30, 60);
  jg.paint();
 
  jg2.setColor("#0000ff"); // blue
  jg2.drawEllipse(10, 50, 30, 100);
  jg2.drawRect(400, 10, 100, 50);
  jg2.paint();
}
 
var jg_doc = new jsGraphics("Canvas1"); // draw directly into document
var jg = new jsGraphics("Canvas");
var jg2 = new jsGraphics("anotherCanvas");
 
myDrawFunction();
 
//-->
</script>

et ça dans le head

Code :

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

<SCRIPT src="wz_jsgraphics.js"></SCRIPT>

**SpaceFrog** · 02/04/2010, 18h49

heu non faut tout mettre dans le head !!
Attention à ta structure de page tes balises sont mal balancées ...

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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<script type='text/javascript' src="wz_jsgraphics.js"></SCRIPT>
<script type='text/javascript'>
/***************************************outils de dessin********************************************/
 
 
function myDrawFunction()
{
  jg_doc.setColor("#00ff00"); // green
  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
  jg_doc.setColor("maroon");
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
  jg_doc.paint(); // draws, in this case, directly into the document
 
  jg.setColor("#ff0000"); // red
  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
  jg.setColor("#0000ff"); // blue
  jg.fillRect(110, 120, 30, 60);
  jg.paint();
 
  jg2.setColor("#0000ff"); // blue
  jg2.drawEllipse(10, 50, 30, 100);
  jg2.drawRect(400, 10, 100, 50);
  jg2.paint();
}
 
var jg_doc = new jsGraphics(); // draw directly into document
var jg = new jsGraphics("myCanvas");
var jg2 = new jsGraphics("anotherCanvas");
 
//document.onclick=myDrawFunction();
 
 
/***************************************************************************************************/
</script>
 
 
</head>
<body style="background-color:#6699CC;"  onLoad="myDrawFunction();"><!--examens('2')-->
 
 
 
</body>
 
 
</html>

**sebac** · 02/04/2010, 19h47

j'ai exactement refait comme tu me l'as dit puisque je l'avais déjà fait mais ça ne marche pas. si tu pense le contraire fait un teste et fait moi parvenir la démo pour que je puisse moi aussi la tester

**sebac** · 06/04/2010, 09h57

toujours pas de réponse sur le pourquoi la méthode de SpaceFrog ne marcha pas chez moi?

**SpaceFrog** · 06/04/2010, 10h29

je viens de tester ce matin ...
c'est une question de portée des variables, declares de jg en globales ...

**sebac** · 06/04/2010, 11h07

là ça commence à me désespérer je suis bien tes conseils pour les variables globales mais rien ne se passe

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
<script type='text/javascript' src="wz_jsgraphics.js"></SCRIPT>
<script type="text/javascript">
var jg_doc = new jsGraphics("Canvas1"); //  var globales
var jg = new jsGraphics("Canvas");
var jg2 = new jsGraphics("anotherCanvas");
function myDrawFunction()
{
  jg_doc.setColor("#00ff00"); // green
  jg_doc.fillEllipse(100, 200, 100, 180); // co-ordinates related to the document
  jg_doc.setColor("maroon");
  jg_doc.drawPolyline(new Array(50, 10, 120), new Array(10, 50, 70));
  jg_doc.paint(); // draws, in this case, directly into the document
 
  jg.setColor("#ff0000"); // red
  jg.drawLine(10, 113, 220, 55); // co-ordinates related to "myCanvas"
  jg.setColor("#0000ff"); // blue
  jg.fillRect(110, 120, 30, 60);
  jg.paint();
 
  jg2.setColor("#0000ff"); // blue
  jg2.drawEllipse(10, 50, 30, 100);
  jg2.drawRect(400, 10, 100, 50);
  jg2.paint();
}
 
 
 
//myDrawFunction();
 
 
</script>

Appel html

Code :

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

<body style="background-color:#6699CC;"  onLoad="myDrawFunction();">

j'ai aussi créé les div avec les bons id

utilisation d'une librairie de dessin

JavaScript

Discussions similaires

Partager

Partager