Discussion :

[Bisûnûrs]

Juste un petit code pour passer le temps, je rajouterai quelques fonctionnalités quand j'aurai un peu de temps.

Testé et fonctionnel sur Firefox2 et IE6.

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
window.onload = setPalette;
 
var epaisseur = 2;
var color = "000000";
 
function move(e){
   obj = document.getElementById('palette');
   obj.onmousemove = createForme;
   obj.onmouseup = function(){
                     obj.onmousemove = '';
                  }
}
 
function createForme(e){
   obj = document.getElementById('palette');
   obj.onmouseout = function(){
                     obj.onmousemove = '';
                  }
   var div = document.createElement('div');
   div.style.position = "absolute";
   div.style.width = epaisseur + "px";
   div.style.height = epaisseur + "px";
   div.style.overflow = "hidden";
   if(document.all){
      div.style.top = event.offsetY - epaisseur / 2 + "px";
      div.style.left = event.offsetX - epaisseur / 2 + "px";
   }
   else{
      div.style.top = e.layerY - epaisseur / 2 + "px";
      div.style.left = e.layerX - epaisseur / 2 + "px";
   }
   div.style.background = "#" + color;
   div.zIndex = "0";
   obj.appendChild(div);
 
   if(document.all){
      if(event.offsetX < epaisseur / 2 || event.offsetY < epaisseur / 2
        || event.offsetX > document.getElementById('palette').offsetWidth - 4 - epaisseur / 2
        || event.offsetY > document.getElementById('palette').offsetHeight - 4 - epaisseur / 2){
         obj.onmousemove = '';
      }
   }
   else{
      if(e.layerX < epaisseur / 2 || e.layerY < epaisseur / 2
        || e.layerX > document.getElementById('palette').offsetWidth - 4 - epaisseur / 2
        || e.layerY > document.getElementById('palette').offsetHeight - 4 - epaisseur / 2){
         obj.onmousemove = '';
      }
   }
}
 
function setPalette(e){
   document.getElementById('palette').onmousedown = function(){
                                          move(e);
                                       }
 
   var tEpaisseur = document.getElementsByName('epaisseur');
   var getEpaisseur = "epaisseur" + epaisseur;
 
   for(var i = 0; i < tEpaisseur.length; i++){
      if(tEpaisseur[i].id == getEpaisseur){
         tEpaisseur[i].className = "activeButton";
      }
      else{
         tEpaisseur[i].className = "";
      }
      tEpaisseur[i].onclick = setOnClickButtonEp;
      tEpaisseur[i].onclickArguments = [e,tEpaisseur[i]];
   }
 
   var tColor = document.getElementsByName('colors');
   var getColor = "colors" + color;
 
   for(var i = 0; i < tColor.length; i++){
      tColor[i].onclick = setOnClickButtonCo;
      tColor[i].onclickArguments = [e,tColor[i]];
      tColor[i].style.background = "#" + tColor[i].id.substring(6);
      tColor[i].style.width = "20px";
   }
 
   document.getElementById('color').style.background = "#" + color;
}
 
function setOnClickButtonEp(e){
   epaisseur = this.onclickArguments[1].value;
   setPalette(e);
}
 
function setOnClickButtonCo(e){
   color = this.onclickArguments[1].id.substring(6);
   setPalette(e);
}

URL de test : http://josselin.willette.free.fr/codessources/painter/

Mis à part le fait que le trait ne soit pas continu, des remarques ?

Edit : Ah, aussi, le redimensionnement de la fenêtre n'est pas géré.

[javatwister]

rien que l'idée est très sympa!
tiens-nous au courant au fur et à mesure des options / corrections

[FremyCompany]

Peut-être un petit cursor: url('crayon.gif') serait le bienvenu
Sinon, c'est amusant

[Bisûnûrs]

Quelques petites modifs :


overflow:hidden sur la palette ce qui permet de gérer les dessins qui dépassent au redimensionnement de la fenêtre

mise en place de curseurs suite à la bonne remarque de Fremy (d'ailleurs si quelqu'un connaît la syntaxe sur IE6 parce qu'il n'a pas l'air de vouloir des curseurs en gif ..)

ajout de la fonctionnalité "seau" qui ne remplit pour l'instant que le fond

ajout des fonctionnalités "trait horizontal" et "trait vertical"

permission de choisir n'importe quelle couleur en la tapant soi-même

[FremyCompany]

Un curseur doit normalement être encodé en tant que .ICO ou .CUR

IE6 n'accepte que ceux-ci mais FireFox accepte tout. Peut-être IE7 a-t-il adouci son comportement à cause de ca..

Je te conseille l'excellent SnIcoEdit, qui va te permettre de convertir ton GIF

[FremyCompany]

Voici de nouvelles idées :

Pour les carrés et les rectangles, facile, tu fais un DIV

Pour les autres polygones, tu peux utilser des triangles via http://www.quesaco.org/Dessiner-un-triangle-en-CSS

Voilà un exemple que j'ai retrouvé de mes test :

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
<style type="text/css"><!--
.triangle {
	padding:0; margin:0; color: white;
	border-style: solid;
	border-color: transparent;
	border-width: 46px;
	border-left-width: 30px;
	border-bottom-color: red;
	height:0px;
	width:0px; 
	line-height: 0pt; 
	font-size: 0px;
	-height:92px; 
	-width:92px; 
}
--></style>
<div class="triangle"></div>