Dessiner en javascript

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

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, 12h18

googlelise "walterzorn"

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

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, 17h48

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, 22h12

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, 09h58

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

Vue hybride

Discussions similaires

Partager

Partager