You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
580 lines
15 KiB
580 lines
15 KiB
|
|
// -------------------- Color Picker --------------------
|
|
|
|
var idColor = "";
|
|
|
|
// Différentes fonctions nécessaire au Color Picker (menu du choix de la couleur)
|
|
|
|
var colorPicker = {
|
|
// Configuration
|
|
idSV : "canvasSV", // id du canvas affichant la saturation et la valeur
|
|
idT : "canvasT", // id du canvas affichant la teinte
|
|
idO : "canvasO", // id du canvas affichant l'opacité
|
|
width : 250, // largeur
|
|
height : 250, // hauteur
|
|
rayonRonds : 5, // rayon des ronds
|
|
ombreActive : "0px 0px 3px rgba(150,200,255,1), 0px 0px 8px rgba(64,190,255,1)",
|
|
ombreInactive : "0px 0px 5px rgba(64,64,64,0.4)",
|
|
|
|
// Variables définies lors de l'initialisation
|
|
canvasSV : null,
|
|
canvasT : null,
|
|
canvasO : null,
|
|
ctxSV : null,
|
|
ctxT : null,
|
|
ctxO : null,
|
|
lingradS : null,
|
|
lingradV : null,
|
|
lingradT : null,
|
|
|
|
// Couleurs
|
|
backgroundColor : "rgb(193,255,0)",
|
|
saturation : 100,
|
|
valeur : 100,
|
|
teinte : 75,
|
|
rouge : 193,
|
|
vert : 255,
|
|
bleu : 0,
|
|
opacity: 1,
|
|
// Couleurs RGB sans application de la saturation et de la valeur
|
|
r : 255,
|
|
g : 0,
|
|
b : 0,
|
|
|
|
// Autres variables
|
|
sourisDown : false, // Indique si on clique sur le colorPicker ou pas
|
|
sourisDehors : true, // Indique si la souris est en-dehors du colorPicker lors d'un clique
|
|
idColor : null,
|
|
|
|
// Fonction d'initialisation
|
|
init : function(id){
|
|
// Récupérer les éléments
|
|
this.canvasSV = document.getElementById(this.idSV);
|
|
this.canvasT = document.getElementById(this.idT);
|
|
this.canvasO = document.getElementById(this.idO);
|
|
|
|
// Définir la taille
|
|
this.canvasSV.width = this.width;
|
|
this.canvasSV.height = this.height;
|
|
this.canvasSV.style.width = this.width + "px";
|
|
this.canvasSV.style.height = this.height + "px";
|
|
|
|
this.canvasT.width = this.width/10;
|
|
this.canvasT.height = this.height;
|
|
this.canvasT.style.width = this.width/10 + "px";
|
|
this.canvasT.style.height = this.height + "px";
|
|
|
|
this.canvasO.width = this.width*1.15;
|
|
this.canvasO.height = this.height/10;
|
|
this.canvasO.style.width = this.width*1.15 + "px";
|
|
this.canvasO.style.height = this.height/10 + "px";
|
|
|
|
// Initialisation canvas
|
|
this.ctxSV = this.canvasSV.getContext("2d");
|
|
this.ctxT = this.canvasT.getContext("2d");
|
|
this.ctxO = this.canvasO.getContext("2d");
|
|
|
|
// Création des dégradés
|
|
this.lingradV = this.ctxSV.createLinearGradient(0, 0, 0, this.height);
|
|
this.lingradV.addColorStop(0, 'rgba(255,255,255,0)');
|
|
this.lingradV.addColorStop(1, 'rgba(255,255,255,1)');
|
|
|
|
this.lingradS = this.ctxSV.createLinearGradient(0, 0, this.width, 0);
|
|
this.lingradS.addColorStop(0, 'rgba(0,0,0,1)');
|
|
this.lingradS.addColorStop(1, 'rgba(0,0,0,0)');
|
|
|
|
this.lingradT = this.ctxT.createLinearGradient(0, 0, 0, this.height);
|
|
this.lingradT.addColorStop(0, 'rgb(255,0,0)');
|
|
this.lingradT.addColorStop(1/6, 'rgb(255,255,0)');
|
|
this.lingradT.addColorStop(2/6, 'rgb(0,255,0)');
|
|
this.lingradT.addColorStop(3/6, 'rgb(0,255,255)');
|
|
this.lingradT.addColorStop(4/6, 'rgb(0,0,255)');
|
|
this.lingradT.addColorStop(5/6, 'rgb(255,0,255)');
|
|
this.lingradT.addColorStop(1, 'rgb(255,0,0)');
|
|
|
|
// Événements roulette (initialisé seulement une fois)
|
|
if(window.addEventListener && !this.idColor){
|
|
this.canvasSV.addEventListener('DOMMouseScroll', function(event){colorPicker.eventWheel(event, colorPicker.idSV)}, false);
|
|
this.canvasSV.onmousewheel = function(event){colorPicker.eventWheel(event, colorPicker.idSV)};
|
|
this.canvasT.addEventListener('DOMMouseScroll', function(event){colorPicker.eventWheel(event, colorPicker.idT)}, false);
|
|
this.canvasT.onmousewheel = function(event){colorPicker.eventWheel(event, colorPicker.idT)};
|
|
this.canvasO.addEventListener('DOMMouseScroll', function(event){colorPicker.eventWheel(event, colorPicker.idO)}, false);
|
|
this.canvasO.onmousewheel = function(event){colorPicker.eventWheel(event, colorPicker.idO)};
|
|
}
|
|
|
|
// Définir la couleur
|
|
this.idColor = id;
|
|
var couleur = eval(document.getElementById(this.idColor).title);
|
|
// alert(id+" ; "+couleur)
|
|
document.getElementById("apercuCouleur").style.backgroundColor = couleur;
|
|
document.getElementById("apercuCouleur2").style.backgroundColor = couleur;
|
|
this.definirCouleur(couleur);
|
|
|
|
// Dessiner
|
|
this.dessiner();
|
|
this.dessinerApercu();
|
|
|
|
// Définir les valeurs des inputs
|
|
this.definirInputs();
|
|
|
|
// Définir le style de l'ombre
|
|
this.sourisOut();
|
|
|
|
},
|
|
|
|
definirCouleur : function(colorRGB){
|
|
var table = /(.*?)rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(colorRGB);
|
|
if (table == null){
|
|
table = /(.*?)rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(colorRGB);
|
|
}
|
|
if(table == null){
|
|
return "";
|
|
}
|
|
this.rouge = parseInt(table[2]);
|
|
this.vert = parseInt(table[3]);
|
|
this.bleu = parseInt(table[4]);
|
|
this.RGB_SVT();
|
|
},
|
|
|
|
sourisClick : function(id){
|
|
this.sourisDown = id;
|
|
if(id != this.idO){
|
|
document.getElementById(id).style.boxShadow = this.ombreActive;
|
|
}
|
|
},
|
|
|
|
sourisOut : function(){
|
|
this.canvasSV.style.boxShadow = this.ombreInactive;
|
|
this.canvasT.style.boxShadow = this.ombreInactive;
|
|
},
|
|
|
|
sourisOver : function(id){
|
|
if(this.sourisDown == id && id != this.idO){
|
|
document.getElementById(id).style.boxShadow = this.ombreActive;
|
|
}
|
|
},
|
|
|
|
sourisUp : function(){
|
|
this.sourisDown = false;
|
|
this.canvasSV.style.boxShadow = this.ombreInactive;
|
|
this.canvasT.style.boxShadow = this.ombreInactive;
|
|
this.dessinerO();
|
|
},
|
|
|
|
eventWheel : function(event, id){
|
|
if(!event) event = window.event;
|
|
if(event.wheelDelta){
|
|
if(event.wheelDelta < 0){
|
|
colorPicker.sourisWheelUp(id);
|
|
}
|
|
else{
|
|
colorPicker.sourisWheelDown(id);
|
|
}
|
|
}
|
|
else if(event.detail){
|
|
if(event.detail > 0){
|
|
colorPicker.sourisWheelUp(id);
|
|
}
|
|
else{
|
|
colorPicker.sourisWheelDown(id);
|
|
}
|
|
}
|
|
},
|
|
|
|
sourisWheelUp : function(id){
|
|
switch(id){
|
|
case this.idT:
|
|
colorPicker.ajouterT(5);
|
|
break;
|
|
case this.idO:
|
|
colorPicker.ajouterO(0.1);
|
|
break;
|
|
case this.idSV:
|
|
colorPicker.ajouterS(-5);
|
|
break;
|
|
}
|
|
},
|
|
|
|
sourisWheelDown : function(id){
|
|
switch(id){
|
|
case this.idT:
|
|
colorPicker.ajouterT(-5);
|
|
break;
|
|
case this.idO:
|
|
colorPicker.ajouterO(-0.1);
|
|
break;
|
|
case this.idSV:
|
|
colorPicker.ajouterS(5);
|
|
break;
|
|
}
|
|
},
|
|
|
|
ajouterT : function(nbr){
|
|
this.teinte += nbr;
|
|
if(this.teinte < 0){
|
|
this.teinte = 0;
|
|
}
|
|
else if(this.teinte > 360){
|
|
this.teinte = 360;
|
|
}
|
|
this.SVT_RGB();
|
|
},
|
|
|
|
ajouterO : function(nbr){
|
|
this.opacity = Math.round((this.opacity+nbr)*100)/100;
|
|
if(this.opacity < 0){
|
|
this.opacity = 0;
|
|
}
|
|
else if(this.opacity > 1){
|
|
this.opacity = 1;
|
|
}
|
|
this.SVT_RGB();
|
|
},
|
|
|
|
ajouterS : function(nbr){
|
|
this.saturation += nbr;
|
|
if(this.saturation < 0){
|
|
this.saturation = 0;
|
|
}
|
|
else if(this.saturation > 100){
|
|
this.saturation = 100;
|
|
}
|
|
this.SVT_RGB();
|
|
},
|
|
|
|
// Lors du déplacement de la souris
|
|
moveSV : function(event){
|
|
// Vérifie si on appuie sur la souris
|
|
if(this.sourisDown != this.idSV){
|
|
return 0;
|
|
}
|
|
|
|
var element = this.canvasSV;
|
|
var posDivY = 0;
|
|
var posDivX = 0;
|
|
|
|
// Récupérer la position du canvas par rapport à la page
|
|
while(element){
|
|
posDivY = posDivY + element.offsetTop;
|
|
posDivX = posDivX + element.offsetLeft;
|
|
element = element.offsetParent;
|
|
}
|
|
|
|
// Définir la saturation et la valeur à partir de la position de la souris
|
|
this.saturation = 100-Math.round((event.clientY - posDivY -1)/(this.height+1)*100);
|
|
this.valeur = Math.round((event.clientX - posDivX -1)/(this.width+1)*100);
|
|
|
|
this.SVT_RGB();
|
|
},
|
|
moveT : function(event){
|
|
if(this.sourisDown != this.idT){
|
|
return 0;
|
|
}
|
|
var element = this.canvasT;
|
|
var posDivY = 0;
|
|
|
|
while(element){
|
|
posDivY = posDivY + element.offsetTop;
|
|
element = element.offsetParent;
|
|
}
|
|
|
|
this.teinte = Math.round( (event.clientY - posDivY -0) / (this.height+1)*360);
|
|
|
|
this.SVT_RGB();
|
|
},
|
|
|
|
SVT_RGB : function(){
|
|
this.T_rgb();
|
|
this.rouge = Math.round((this.r + (255-this.r) * (-1) * (this.saturation-100) / 100 )* this.valeur / 100);
|
|
this.vert = Math.round((this.g + (255-this.g) * (-1) * (this.saturation-100) / 100 )* this.valeur / 100);
|
|
this.bleu = Math.round((this.b + (255-this.b) * (-1) * (this.saturation-100) / 100 )* this.valeur / 100);
|
|
|
|
this.definirInputs();
|
|
this.dessinerApercu();
|
|
this.dessiner();
|
|
},
|
|
|
|
T_rgb : function(){
|
|
var r,g,b = 0;
|
|
var T = this.teinte;
|
|
|
|
if (T<60){
|
|
r = 255;
|
|
g = T/60*255;
|
|
b = 0;
|
|
}
|
|
else if (T<120){
|
|
r = (255-(T%60/60*255))%256;
|
|
g = 255;
|
|
b = 0;
|
|
}
|
|
else if (T<180){
|
|
r = 0;
|
|
g = 255;
|
|
b = T%60/60*255;
|
|
}
|
|
else if (T<240){
|
|
r = 0;
|
|
g = (255-(T%60/60*255))%256;
|
|
b = 255;
|
|
}
|
|
else if (T<300){
|
|
r = T%60/60*255;
|
|
g = 0;
|
|
b = 255;
|
|
}
|
|
else if (T<360){
|
|
r = 255;
|
|
g = 0;
|
|
b = (255-(T%60/60*255))%256;
|
|
}
|
|
else{
|
|
r = 255;
|
|
g = 0;
|
|
b = 0;
|
|
}
|
|
|
|
this.r = Math.round(r);
|
|
this.g = Math.round(g);
|
|
this.b = Math.round(b);
|
|
},
|
|
|
|
RGB_SVT : function(){
|
|
// Voir http://fr.wikipedia.org/wiki/Teinte_Saturation_Valeur#Conversion_de_RVB_vers_TSV
|
|
var r = this.rouge/255;
|
|
var g = this.vert/255;
|
|
var b = this.bleu/255;
|
|
if(!isFinite(r)){
|
|
r = 0;
|
|
}
|
|
if(!isFinite(g)){
|
|
g = 0;
|
|
}
|
|
if(!isFinite(b)){
|
|
b = 0;
|
|
}
|
|
var max = Math.max(r,g,b);
|
|
var min = Math.min(r,g,b);
|
|
var s, v, t;
|
|
// Teinte
|
|
switch(max){
|
|
case r:
|
|
t = (60 * (g-b)/(max-min) + 360) % 360;
|
|
break;
|
|
case g:
|
|
t = 60 * (b-r)/(max-min) + 120;
|
|
break;
|
|
case b:
|
|
t = 60 * (r-g)/(max-min) + 240;
|
|
break;
|
|
default: /* case min: */
|
|
t = 0;
|
|
break;
|
|
}
|
|
|
|
// Saturation
|
|
if(max == 0){
|
|
s = 0;
|
|
}
|
|
else{
|
|
s = 1-(min/max);
|
|
}
|
|
|
|
// Valeur
|
|
v = max;
|
|
|
|
// Définir les variables
|
|
this.saturation = s*100;
|
|
this.valeur = v*100;
|
|
this.teinte = Math.round(t);
|
|
this.T_rgb();
|
|
},
|
|
|
|
dessiner : function(){
|
|
var ctxSV = this.ctxSV;
|
|
var ctxT = this.ctxT;
|
|
// Fond
|
|
ctxSV.fillStyle = "rgb("+this.r+","+this.g+","+this.b+")";
|
|
ctxSV.fillRect(0, 0, this.width, this.height);
|
|
// Dégradés
|
|
ctxSV.fillStyle = this.lingradV;
|
|
ctxSV.fillRect(0, 0, this.width, this.height);
|
|
ctxSV.fillStyle = this.lingradS;
|
|
ctxSV.fillRect(0, 0, this.width, this.height);
|
|
// Souris
|
|
var x = Math.round(this.width*this.valeur/100);
|
|
var y = Math.round(this.height-this.height*this.saturation/100);
|
|
ctxSV.beginPath();
|
|
ctxSV.arc(x, y, this.rayonRonds, 0, 2*Math.PI, true);
|
|
ctxSV.strokeStyle = "rgba(255,255,255,0.8)";
|
|
ctxSV.shadowOffsetX = 1;
|
|
ctxSV.shadowOffsetY = 1;
|
|
ctxSV.shadowColor = "rgba(0,0,0,1)";
|
|
ctxSV.shadowBlur = 2;
|
|
ctxSV.lineWidth = 1.5;
|
|
ctxSV.stroke();
|
|
|
|
// Fond Teinte
|
|
ctxT.fillStyle = this.lingradT;
|
|
ctxT.fillRect(0, 0, this.width/10, this.height);
|
|
// Souris Teinte
|
|
var pos = Math.round(0.99*this.height*this.teinte/360);
|
|
ctxT.fillStyle = "rgba(255,255,255,0.8)";
|
|
ctxT.shadowOffsetX = 0;
|
|
ctxT.shadowOffsetY = 0;
|
|
ctxT.shadowColor = "rgba(0,0,0,1)";
|
|
ctxT.shadowBlur = 3;
|
|
ctxT.fillRect(0, pos, this.width/10, 2);
|
|
|
|
// Désactiver les ombres
|
|
ctxSV.shadowColor = "rgba(0,0,0,0)";
|
|
ctxT.shadowColor = "rgba(0,0,0,0)";
|
|
|
|
this.dessinerO();
|
|
},
|
|
|
|
dessinerApercu : function(){
|
|
document.getElementById("apercuCouleur").style.backgroundColor = "rgba("+this.rouge+","+this.vert+","+this.bleu+","+this.opacity+")";
|
|
},
|
|
|
|
definirInputs : function(){
|
|
document.getElementById("inputValeur").value = this.valeur;
|
|
document.getElementById("inputSaturation").value = this.saturation;
|
|
document.getElementById("inputTeinte").value = this.teinte;
|
|
document.getElementById("inputRouge").value = this.rouge;
|
|
document.getElementById("inputVert").value = this.vert;
|
|
document.getElementById("inputBleu").value = this.bleu;
|
|
document.getElementById("inputOpacity").value = this.opacity;
|
|
},
|
|
|
|
recupererInputs : function(){
|
|
this.valeur = parseInt(document.getElementById("inputValeur").value);
|
|
this.saturation = parseInt(document.getElementById("inputSaturation").value);
|
|
this.teinte = parseInt(document.getElementById("inputTeinte").value);
|
|
this.opacity = parseFloat(document.getElementById("inputOpacity").value);
|
|
this.SVT_RGB();
|
|
|
|
this.definirInputs();
|
|
this.dessinerApercu();
|
|
this.dessiner();
|
|
},
|
|
recupererInputs2 : function(){
|
|
this.rouge = parseInt(document.getElementById("inputRouge").value);
|
|
this.vert = parseInt(document.getElementById("inputVert").value);
|
|
this.bleu = parseInt(document.getElementById("inputBleu").value);
|
|
this.RGB_SVT();
|
|
|
|
this.definirInputs();
|
|
this.dessinerApercu();
|
|
this.dessiner();
|
|
},
|
|
|
|
moveO : function(event){
|
|
if(this.sourisDown != this.idO){
|
|
return 0;
|
|
}
|
|
|
|
var element = this.canvasO;
|
|
var posDivX = 0;
|
|
while(element){
|
|
posDivX = posDivX + element.offsetLeft;
|
|
element = element.offsetParent;
|
|
}
|
|
|
|
this.opacity = Math.round( (event.clientX - posDivX -this.width/10) / (this.width*0.9)*100)/100;
|
|
if(this.opacity < 0){
|
|
this.opacity = 0;
|
|
}
|
|
else if(this.opacity > 1){
|
|
this.opacity = 1;
|
|
}
|
|
this.dessinerO();
|
|
this.definirInputs();
|
|
this.dessinerApercu();
|
|
},
|
|
|
|
dessinerO : function(){
|
|
var ctx = this.ctxO;
|
|
|
|
ctx.shadowBlur = 2;
|
|
|
|
// Ligne
|
|
if(this.sourisDown == this.idO){
|
|
ctx.shadowColor = "rgba(0,50,100,1)";
|
|
}
|
|
else{
|
|
ctx.shadowColor = "rgba(0,0,0,1)";
|
|
}
|
|
ctx.globalAlpha = 1;
|
|
ctx.shadowOffsetX = 0;
|
|
ctx.shadowOffsetY = 0;
|
|
ctx.fillStyle = "rgba("+this.rouge+","+this.vert+","+this.bleu+",1)";
|
|
ctx.clearRect(0,0,this.width*1.15,this.height);
|
|
ctx.fillRect(this.width/10, this.height/20-1, this.width*0.9, 3);
|
|
|
|
// Rond
|
|
var x = this.width/10 + this.width*0.9*this.opacity-1;
|
|
var y = this.height/20;
|
|
if(this.sourisDown == this.idO){
|
|
ctx.fillStyle = "rgba(0,40,80,1)";
|
|
ctx.strokeStyle = "rgba(230,250,255,0.8)";
|
|
}
|
|
else{
|
|
ctx.fillStyle = "rgba(0,0,0,1)";
|
|
ctx.strokeStyle = "rgba(255,255,255,0.8)";
|
|
}
|
|
ctx.globalAlpha = 0.1+this.opacity*0.9;
|
|
ctx.beginPath();
|
|
ctx.arc(x, y, this.rayonRonds+1, 0, 2*Math.PI, true);
|
|
ctx.shadowColor = "rgba(0,0,0,1)";
|
|
ctx.shadowOffsetX = 1;
|
|
ctx.shadowOffsetY = 1;
|
|
ctx.lineWidth = 1;
|
|
ctx.fill();
|
|
ctx.stroke();
|
|
|
|
// Petits ronds
|
|
ctx.globalAlpha = 1;
|
|
ctx.shadowColor = "rgba(0,0,0,1)";
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(8, this.height/20+0.5, this.rayonRonds, 0, 2*Math.PI, true);
|
|
ctx.strokeStyle = "rgba(0,0,0,0.5)";
|
|
ctx.shadowOffsetX = 0;
|
|
ctx.shadowOffsetY = 0;
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
|
|
ctx.beginPath();
|
|
ctx.arc(this.width*1.08, this.height/20+0.5, this.rayonRonds, 0, 2*Math.PI, true);
|
|
ctx.strokeStyle = "rgba(0,0,0,0.8)";
|
|
ctx.fillStyle = "rgba(0,0,0,0.6)";
|
|
ctx.shadowOffsetX = 0;
|
|
ctx.shadowOffsetY = 0;
|
|
ctx.lineWidth = 1;
|
|
ctx.stroke();
|
|
ctx.fill();
|
|
},
|
|
|
|
exporterCouleur : function(){
|
|
eval(document.getElementById(this.idColor).title+' = "rgba(" + this.rouge +", " + this.vert + ", " + this.bleu +", "+this.opacity+")"');
|
|
document.getElementById(this.idColor).style.backgroundColor = eval(document.getElementById(this.idColor).title);
|
|
},
|
|
|
|
fermer : function(){
|
|
colorPicker.exporterCouleur();
|
|
if(colorPicker.idColor == 'buttonColor'){
|
|
cacherMenu();
|
|
}
|
|
else if(dernierMenu == "menuFonctions"){
|
|
editeur.getOptions();
|
|
afficherMenu(dernierMenu);
|
|
}
|
|
else{
|
|
cacherMenu();
|
|
}
|
|
actualiserGraph();
|
|
}
|
|
};
|
|
|
|
|
|
|