[JavaScript] [SRC] Palette graphique

[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 :

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 :

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>

[Bisûnûrs]

Merci beaucoup, je vais regarder ça de plus près.

Pour les rectangles et carrés j'ai déjà le script tout prêt ici :

http://josselin.willette.free.fr/cod...creationforme/

Je vais juste rajouter un peu de code pour que lorsqu'on garde le Shift appuyé ça fasse un carré et non un rectangle.

[Bisûnûrs]

J'étais aussi en train de préparer un truc qui permettrait de calculer les coordonnées de deux points faits avec le crayon pour remplir le vide entre ces deux points pour donner l'impression d'un trait continu.

[SpaceFrog]

une suggestion d'option au niveau de l'ergonomie:
pour la selection de la couleur un colorpicker serait le bienvenu...
Un petit tableau avec des couleurs standard par exemple et sur le click des cellules la couleur est selectionnée.
Et pour les couleurs hors standard:
un bout de code fait il y a longtemps qui pourrait aussi être inclu:

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
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
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Nouvelle page 1</title>
<style type="text/css">
td {width:50px;
	font-family:verdana;
	font-size:12px;
	text-align:center;
	}
 
.buttons {cursor:pointer;
			width:100%;
			height:100%;
			}
 
</style>	
 
<script Language="JavaScript">
/***************************
* Color Script by SpaceFrog *
***************************/
 
var RColor=255;
var GColor=255;
var BColor=255;
var speed=50;
var Ctimer;
 
function RUp(){
if (RColor<256){
	RColor++;
	document.getElementById('RedIndex').innerHTML=RColor;
	UpDateColor();
	}
}
 
function RDn(){
if (RColor>0){
	RColor--;}
	document.getElementById('RedIndex').innerHTML=RColor;
		UpDateColor();
}
 
function GUp(){
if (GColor<256){
	GColor++;
	document.getElementById('GreenIndex').innerHTML=GColor;
		UpDateColor();
	}
}
 
function GDn(){
if (GColor>0){
	GColor--;}
	document.getElementById('GreenIndex').innerHTML=GColor;
		UpDateColor();
}
 
function BUp(){
if (BColor<256){
	BColor++;
	document.getElementById('BlueIndex').innerHTML=BColor;
		UpDateColor();
	}
}
 
function BDn(){
if (BColor>0){
	BColor--;}
	document.getElementById('BlueIndex').innerHTML=BColor;
		UpDateColor();
}
 
 
function UpDateColor(){
    var divcolor ='rgb\('+RColor+'\,'+GColor+'\,'+BColor+'\)'
 
	document.getElementById('Screen').style.backgroundColor=divcolor;
	return;
	}
 
</script>
 
</head>
 
<body>
<table>
	<tr>
		<td style="background-color:rgb(255,0,0);"><div class="buttons" onmousedown="Ctimer= setInterval('RUp()',speed);" onmouseup="clearInterval(Ctimer);" width="100%"> + </div></td>
		<td style="background-color:rgb(0,255,0);"><div class="buttons" onmousedown="Ctimer= setInterval('GUp()',speed);" onmouseup="clearInterval(Ctimer);"> + </div></td>
		<td style="background-color:rgb(0,0,255);"><div class="buttons" onmousedown="Ctimer= setInterval('BUp()',speed);" onmouseup="clearInterval(Ctimer);"> + </div></td>
	</tr>
	<tr>
			<td style="background-color:rgb(255,0,0);"><div class="buttons" onmousedown="Ctimer= setInterval('RDn()',speed);" onmouseup="clearInterval(Ctimer);"> - </div></td>
			<td style="background-color:rgb(0,255,0);"><div class="buttons" onmousedown="Ctimer= setInterval('GDn()',speed);" onmouseup="clearInterval(Ctimer);"> - </div></td>
			<td style="background-color:rgb(0,0,255);"><div class="buttons" onmousedown="Ctimer= setInterval('BDn()',speed);" onmouseup="clearInterval(Ctimer);"> - </div></td>
	</tr>
	<tr>
			<td style="color:rgb(255,0,0); border:solid 1px;"><div id="RedIndex"> 250 </div></td>
			<td style="color:rgb(0,255,0); border:solid 1px;"><div id="GreenIndex"> 250 </div></td>
			<td style="color:rgb(0,0,255);border:solid 1px;"><div id="BlueIndex"> 250 </div></td>
	</tr>
 
</table>	
<div id="Screen" style="position:absolute;top:20%;left:10%;height:60%;width:80%;border:solid 1px;background-color:rgb(255,255,255);">&nbsp</div>
</body>
 
</html>

Sinon mon fillot

[Bisûnûrs]

Ben le truc, c'est que j'avais mis 3/4 couleurs au début qui lors du clic dessus faisait un set de cette couleur, mais je ne voulais pas contraindre l'utilisateur aux quelques couleurs standards ...

J'ai essayé d'inclure le color picker qu'on a installé sur cette page :
http://css.developpez.com/galerie/ge...enu-vertical3/
Mais j'ai pas réussi.

Je suis en train d'essayer de me faire un colorpicker en Javascript en m'aidant de ton code.

Merci.

[Bisûnûrs]

Je viens d'ajouter la fonctionnalité pour faire des rectangles.

Si vous appuyez en même temps sur Shift, ça fait automatiquement des carrés.

[javatwister]

vieux coloritron perso que je te mets juste en lien, j'ai pas le temps de sortir le code ni de l'adapter;
http://javatwist.imingo.net/fondecr.php

ça peut-ti t'intéresser?

[javatwister]

un exemple un peu plus clair et peu encombrant dans ton appli;

http://javatwist.imingo.net/test.htm

==> en passant sur une bande, on fait varier les valeurs de r, g, b;
==> en cliquant sur une bande, on stabilise la couleur;
==> en recliquant sur une bande, on relance la recherche;

[javatwister]

pour le seau, boucle plutôt sur l'ensemble des divs de la palette avec un onclick... (sans event, pour plus de sécurité);

[Bisûnûrs]

Merci beaucoup Javatwister pour ta contribution du colorpicker, mais j'ai vu avec Freegreg pour l'intégration de son colorpicker en Flash et le voilà intégré au script. ^^

En revanche je n'ai pas compris ce que tu me conseilles de faire pour le seau. :/

[SpaceFrog]

Heu fillot, le script pour les rectangles n'a pas l'air intégralement fonctionnel sous FFX ..??
tu veux un script de rectangle IE FFX, je dois en avoir un en stock ...

[Bisûnûrs]

Je n'ai aucun problème sur Firefox pour les rectangles avec la version 2. Tu as quelle version ? Quel est le comportement que tu observes ?

[SpaceFrog]

il ne me fait des rectangles qu'a parti du coin en haut à gauche et je ne peut pas l'étirer ...

[haltabush]

?
J'ai pas ce soucis, moi.

edit: dans le "about" de FF j'ai ça:

Mozilla/5.0 (Windows; U; Windows NT 6.0; fr; rv:1.8.1.3) Gecko/20070309 Firefox/2.0.0.3

[Auteur]

On dirait le logiciel paint de windows

Tu rajoutes la possibilités d'enregistrer son dessin et ça sera parfait



[edit]
Pour ce qui est du rectangle, je n'ai aucun souci avec FF2.
[/edit]