utilisation d'une librairie de dessin

Version imprimable

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:

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

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

Code:

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:

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

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

Code:

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>

02/04/2010, 19h47
sebac

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 ;)
06/04/2010, 09h57
sebac

toujours pas de réponse sur le pourquoi la méthode de SpaceFrog ne marcha pas chez moi?
06/04/2010, 10h29
SpaceFrog

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

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

Code:

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:

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

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