[SRC] Palette graphique

**Bisûnûrs** · 08/09/2007, 23h20

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** · 09/09/2007, 09h04

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

**FremyCompany** · 09/09/2007, 12h00

Peut-être un petit cursor: url('crayon.gif') serait le bienvenu

Sinon, c'est amusant

**Bisûnûrs** · 09/09/2007, 22h14

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** · 12/09/2007, 19h48

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** · 12/09/2007, 19h57

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>

**Bisûnûrs** · 12/09/2007, 20h13

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** · 12/09/2007, 20h14

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** · 13/09/2007, 09h22

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 :

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
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** · 13/09/2007, 23h08

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** · 14/09/2007, 01h21

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** · 14/09/2007, 13h03

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** · 15/09/2007, 10h05

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** · 15/09/2007, 16h58

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** · 17/09/2007, 16h35

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** · 19/09/2007, 10h26

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