12
votes

Créez un sélecteur de couleurs similaire à Photoshop, utilisant JavaScript et HTML Toile

Je ne suis pas du tout versé dans des graphiques de l'ordinateur et j'ai besoin de créer un sélecteur de couleur comme outil JavaScript pour intégrer dans une page HTML.

Premier, et en regardant Photoshop, j'ai pensé à la palette RVB comme une matrice en trois dimensions. Ma première tentative a été envoyée: xxx

Ceci entraîne quelque chose comme

Carte de couleur RVB 3D

Ma pensée est-elle trop linéaire, comparant à celles que je Voir sur Photoshop et sur le Web. J'aimerais connaître la logique derrière la mappage de couleurs dans un sélecteur comme celui-ci: Picker couleur Photoshop

Je n'ai pas vraiment besoin des algories elle-même, je suis principalement essayant de comprendre la logique.

merci


2 commentaires

Merci, mais j'essaie de en construire un à partir de zéro pour deux raisons: pour le plaisir de celui-ci et en utilisant uniquement la toile, indépendant des IMGS


"Pour le plaisir de cela", la partie en vaut vraiment la peine! :) Je le ferais probablement aussi. Acclamations.


4 Réponses :


2
votes

voir ici: http://jsfiddle.net/maniator/gxuqb/2/

Utiliser colorPicker

Voir le code pour cela ici: http://www.eyecon.ro/colorpicker/


0 commentaires

7
votes

J'ai mis en place un sélecteur de couleur basé sur une toile une fois. Je l'ai fait parce que la plupart des couleurs que j'ai trouvées sur le Web utilisaient trop d'images statiques et je ne voulais pas causer des demandes supplémentaires.

La génération de couleurs est basée sur un entrée JavaScript 10k que j'ai trouvée. Je viens de fixer des bugs et j'ai fait refactoring sur le code.

Tout ce que vous avez à faire est d'inclure un dans votre code et appelez le (code> sélecteur.bind_inputs () après la DOM est chargé.

Voici un jsfiddle avec mon code:

http://jsfiddle.net/mshet/1/

Gardez à l'esprit que la spécification HTML5 prend déjà en charge une entrée de formulaire de sélection de couleurs. Mais actuellement, seul Opera l'a mis en œuvre.


2 commentaires

J'aime les vôtres, mais j'essaie vraiment de comprendre comment ce travail RVB + HSB travaille.


Mon mauvais, j'ai vraiment manqué votre question. Avez-vous déjà vérifié l'article Wikipedia sur HSV? en.wikipedia.org/wiki/hsl_and_hsv



3
votes

Pour répondre à votre question sur la logique derrière le sélecteur Photoshop: on dirait que le sélecteur de couleurs est basé sur l'espace de couleur HSB. La teinte (H) est cueillie par le curseur vertical à droite, la ou la saturation est cueillie par l'axe horizontal de la zone de sélection de couleurs et la luminosité (B) est cueillie par l'axe vertical de la zone de sélection de couleurs.

Pour citer de Wikipedia :

L'objectif initial des HSL et HSV et des modèles similaires, ainsi que leur application de courant la plus courante, sont dans des outils de sélection des couleurs. À leur plus simple, certains cueilleurs de couleurs de ce type fournissent trois curseurs, une pour chaque attribut. La plupart, cependant, montrent une tranche bidimensionnelle à travers le modèle, avec un curseur contrôlant quelle tranche particulière est représentée.


3 commentaires

Même en ignorant mon manque de connaissances dans ce domaine, il manque quelque chose, à mon avis. Si vous contrôlez HXSXB de cette manière en trois dimensions, où RXGXB est-il en jeu?


Je ne peux pas commenter pourquoi ils l'ont fait de cette façon, je viens d'entrer dans Photoshop et de déplacer le sélecteur de haut en bas, côté à côté, puis déplacé le curseur à droite. Il contrôle définitivement directement l'espace de couleur HSB. Je suppose qu'ils convertissent simplement la couleur cueillie dans tous les autres espaces de couleur affichés et inversement, convertissez toutes les couleurs entrées à la main dans HSB avant de modifier le sélecteur de couleur pour afficher la couleur.


merci, c'est exactement ce que j'essaie de comprendre, je peux donc construire un algorythm de cette connaissance



0
votes

J'ai créé un projet JavaScript, "MasterColorPicker", qui dispose de 4 colorants de couleurs basés sur toile différents. Il m'a fallu plusieurs mois d'articles de Wikipedia sur la "roue de couleur" ainsi que "HSB" et "HSL" et "RVB", et travaillant directement avec les algorithmes directement au fur et à mesure que j'ai construit chaque cueillette couleur à partir de zéro. Une chose que je me suis concentrée dans ce projet apporte la logique de ces espaces de couleur dans un format facile à comprendre et à utiliser. J'espère que l'utilisation du projet vous aidera à comprendre chaque espace de couleur. En ce qui concerne la cartographie d'un espace à un autre, par exemple, la relation entre RVB et HSL, vous devez vraiment élargir votre imagination 3D pour commencer cela. C'est là que j'espère que ce projet peut aider. Mais vraiment, ne cognez pas votre tête contre le mur pendant des années pour essayer de comprendre ces algorithmes. Outre Wikipedia, voir:

http://www.easyrgb.com/index.php?x=math < / a>

Toutes les formules que vous pouvez digérer. Sauf: Wikipedia parle de "Chroma" dans l'un de leurs articles et dit de ne pas la confondre avec une "saturation". Mon projet MasterColorPicker ajoute un autre espace de couleur, Hue-Chroma-Grey (HCG) et le code source de ce projet documente les formules pour la conversion entre HCG et RVB. Avec HCG, vous pouvez trouver l'organisation des couleurs "Safe-Safe" et le "RainbowmeMeistro Color-Picker" dans le projet vous donnera une visualisation claire de cet espace de couleur. Vous pouvez essayer le projet et télécharger les fichiers JavaScript / HTML pour l'utiliser sur votre propre système (open-source et gratuit) d'ici:

http://softmoon-webware.com/mastercolorpicker_instruct.php

paix!


0 commentaires