Dessiner en javascript

**Empty_body** · 01/10/2007, 10h43

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...

**SpaceFrog** · 01/10/2007, 11h18

googlelise "walterzorn"

**Empty_body** · 01/10/2007, 16h32

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...

**SpaceFrog** · 01/10/2007, 16h48

un truc de ce style là ?

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
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 ...

**Empty_body** · 07/10/2007, 21h12

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?

**SpaceFrog** · 08/10/2007, 08h58

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 ...

Dessiner en javascript

JavaScript

Discussions similaires

Partager

Partager