Dessiner en javascript

Version imprimable

01/10/2007, 10h43
Empty_body

Dessiner en javascript

Salut,

J'aimerais savoir si il existe déjà une librairie javascript quelconque qui permettrait de faire du dessin. J'aimerais laisser à mes utilisateurs une zone quadrillée pour qu'ils puissent dessiner quelques rectangles et pouvoir ensuite reprendre les coodonnées de certains points du dessin. Est-ce que quelqu'un aurait déjà rencontré quelque chose de ce genre?

Merci...
01/10/2007, 11h18
SpaceFrog

googlelise "walterzorn"
01/10/2007, 16h32
Empty_body

Hello,

Merci pour le tuyau... Mal heureusement, je ne vise pas les math (graphique) mais juste un peu de dessin... Sur un quadrillage, l'utilisateur me dessine un rectangle et à partir ce ce quadrillage, je récupère par exemple les coordonnées des 4 angles...

un truc de ce style là ?

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
50
51
52
53
54
55
56
57
58
59
60
61
62
<HTML> 
<HEAD> 
 
<SCRIPT type='text/javascript'><!-- 
var first=true
var x,y,x2,y2,topdiv,leftdiv,blx, bly
 
function microsoftMouseMove() { 
document.test.x.value = window.event.x; 
document.test.y.value = window.event.y; 
var message=(first)?'premier click':'second click';
if(first){ 
          x=window.event.x; 
          y=window.event.y;  
          topdiv=y
          leftdiv=x
} 
 
if(!first){
var sendem=confirm('validez vous la capture ?')
//ici il ne te reste plus qu'a chopper le top left top+height left+width ....
}
 
first=!first; 
} 
 
 
function drawdiv(){
document.getElementById('dotframe').style.display='none'
if (!first){
 			x2=window.event.x; 
          y2=window.event.y;
          document.test.x.value = window.event.x; 
			document.test.y.value = window.event.y; 
 
          topdiv=(y2<y)?y2:y;
          leftdiv=(x2<x)?x2:x;
          x2=(x2<leftdiv)?x:x2;
          y2=(y2<topdiv)?y:y2;
          blx=(x2<x)?x:x2;
          bly=(y2<y)?y:y2;
 
document.getElementById('dotframe').style.top=topdiv+'px';
document.getElementById('dotframe').style.left=leftdiv+'px';
document.getElementById('dotframe').style.height=(bly-topdiv)+'px';
document.getElementById('dotframe').style.width=(blx-leftdiv)+'px';
document.getElementById('dotframe').style.display='block';
}
}
 
//--></SCRIPT> 
 
</HEAD> 
 
<BODY onclick="microsoftMouseMove()" onmousemove="drawdiv()"> 
 
<FORM NAME="test"> 
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT TYPUE="TEXT" NAME="y" SIZE="4"> 
</FORM> 
<div id="dotframe" style="position:absolute;display:none;height:0px;width:0px;background-color:none;border:1px gray;z-index:2;top:0px;left:0px;border-style:dotted;font-size:0px;"></div>
</BODY> 
</HTML>

en fait je dois en avoir un autre crossbrowser ... le temps de retrouver ...

07/10/2007, 21h12
Empty_body

Tout d'abord, merci... Ca a l'air pas mal, néanmoins, le dessin ne laisse pas de "traces" sur l'écran... Y a-t-il moyen que le dessin reste?
08/10/2007, 08h58
SpaceFrog

ben suffit de modifier le script...
modifier le css pour passer des pointillés à un trait plein, puis supprimer le toggle du display.

ceci étant la trace ne durera que le temps d'affichage de la page ...