Créer un Sélecteur de Couleur, similaire à Photoshop, à l'aide de Javascript et Canvas HTML
Je ne suis pas du tout versé dans l'Informatique Graphique et je suis dans le besoin de la création d'un sélecteur de couleur javascript outil à intégrer dans une page HTML.
D'abord, et en regardant de Photoshop, j'ai pensé à la palette RGB comme une matrice à trois dimensions. Ma première tentative saisons:
<script type="text/javascript">
var rgCanvas = document.createElement('canvas');
rgCanvas.width = 256;
rgCanvas.height = 256;
rgCanvas.style.border = '3px solid black';
for (g = 0; g < 256; g++){
for (r = 0; r < 256; r++){
var context = rgCanvas.getContext('2d');
context.beginPath();
context.moveTo(r,g);
context.strokeStyle = 'rgb(' + r + ', ' + g + ', 0)';
context.lineTo(r+1,g+1);
context.stroke();
context.closePath();
}
}
var bCanvas = document.createElement('canvas');
bCanvas.width = 20;
bCanvas.height = 256;
bCanvas.style.border = '3px solid black';
for (b = 0; b < 256; b++){
var context = bCanvas.getContext('2d');
context.beginPath();
context.moveTo(0,b);
context.strokeStyle = 'rgb(' + 0 + ', ' + 0 + ', ' + b + ')';
context.lineTo(20, b);
context.stroke();
context.closePath();
}
document.body.appendChild(rgCanvas);
document.body.appendChild(bCanvas);
</script>cela se traduit par quelque chose comme
Ma pensée est que c'est trop linéaire, en les comparant à celles que je vois dans Photoshop et sur le web.
Je voudrais savoir la logique derrière le mappage des couleurs dans un sélecteur comme ceci:
Je n'ai pas vraiment besoin de la algorythms lui-même, je suis principalement en essayant de comprendre la logique.
Grâce
"pour le plaisir" la partie est certainement la peine! 🙂 Je le ferais probablement trop. Des acclamations.
OriginalL'auteur André Alçada Padez | 2012-01-04
Vous devez vous connecter pour publier un commentaire.
J'ai mis en place un canevas de base sélecteur de couleurs à la fois. Je l'ai fait parce que la plupart du sélecteur de couleurs que j'ai trouvé sur le web utilisé trop d'images statiques et je ne voulais pas causer de la demande.
La couleur de génération est basée sur un 10K javascript entrée que j'ai trouvé. J'ai Juste corrigé quelques bugs et fait un peu de refactoring du code.
Tout ce que vous avez à faire est d'inclure une
<input type="color-picker" />dans votre code et d'appel de laPICKER.bind_inputs()après le DOM est chargé.Ici est un jsFiddle avec mon code:
http://jsfiddle.net/mShET/1/
Garder à l'esprit que La spécification HTML5 prend déjà en charge un sélecteur de couleur formulaire de saisie. Mais à l'heure actuelle, seulement à l'Opéra, l'a mis en oeuvre.
My bad, j'ai vraiment manqué à votre question. Avez-vous déjà vérifié l'article de Wikipédia sur VHS? en.wikipedia.org/wiki/HSL_and_HSV
c'est très impressionnant, bonne réponse.
OriginalL'auteur
Pour répondre à votre question sur la logique derrière le Photoshop sélecteur: on dirait que le sélecteur de couleurs est basée sur la couleur TSL espace. La teinte (H) est choisi par le curseur vertical sur la droite, le taux de saturation (S) est choisi par l'axe horizontal de la couleur du sélecteur de zone, et la luminosité(B) est choisi par l'axe vertical de la couleur du sélecteur de zone.
Pour citer Wikipedia:
Je ne peux pas commenter sur pourquoi ils ont fait cela de cette façon, je suis juste allé dans Photoshop et déplacé le sélecteur en haut et en bas, de gauche à droite et ensuite déplacé le curseur sur la droite. Il a certainement contrôle directement la couleur TSL espace. J'imagine qu'ils ont simplement convertir la couleur choisi dans tous les autres espaces de couleurs affichées, et à l'inverse, convertir toutes les couleurs saisi par la main de nouveau dans HSB avant de modifier le sélecteur de couleur pour montrer la couleur.
merci, c'est exactement ce que j'essaie de comprendre, de sorte que je peux construire un algorithme à partir de cette connaissance
OriginalL'auteur
Voir Ici: http://jsfiddle.net/maniator/GXuqb/2/
À l'aide de
ColorPickerVoir le code ici: http://www.eyecon.ro/colorpicker/
OriginalL'auteur
J'ai créé un projet JavaScript, "MasterColorPicker", qui dispose de 4 différents toile en fonction de la couleur-cueilleurs. Il m'a fallu plusieurs mois de lecture des articles de Wikipédia sur "Roue de Couleur" et "TEINTE" et "TSL" et "RVB", et aussi de travailler avec les algorithmes directement comme je l'ai construit chaque couleur-sélecteur à partir de zéro. Une chose que j'ai porté ce projet est d'amener la LOGIQUE de ces couleurs-des espaces en un facile-à-comprendre et utiliser le format. Mon espoir est que, tout en utilisant le projet va vous aider à comprendre chaque espace couleur. Aussi loin que la cartographie d'un espace à un autre, par exemple, la relation entre RGB et HSL, vous devez vraiment développez votre 3D imagination pour commencer. C'est là que j'espère que ce projet peut vous aider. Mais vraiment, ne pas taper la tête contre le mur pendant des années à essayer de comprendre ces algorithmes. En dehors de Wikipédia, voir:
http://www.easyrgb.com/index.php?X=MATH
Toutes les formules que vous pouvez digérer. À l'EXCEPTION de: Wikipedia parle de "Chroma" dans un de leurs articles et dit ne pas confondre avec la "saturation". Mon MasterColorPicker projet ajoute un autre espace couleur, teinte-chroma-gris (HCG), et le code source de ce projet, les documents les formules de conversion entre l'HCG et RVB. Avec l'HCG, vous pouvez trouver l'organisation de la "Web-Safe" de couleurs, et le "RainbowMeistro Color-Picker" dans le projet permettra de vous donner une visualisation claire de la couleur-espace. Vous pouvez essayer le projet et télécharger le JavaScript/HTML fichiers de l'utiliser sur votre propre système (open-source et gratuit) ici:
http://softmoon-webware.com/MasterColorPicker_instructions.php
La paix!
OriginalL'auteur