2012-01-04 1 views
12

Non sono affatto esperto in Computer Grafica e ho bisogno di creare un selettore di colori come strumento javascript da incorporare in una pagina HTML.Creare un selettore colori, simile a Photoshop, utilizzando Javascript e HTML Canvas

Per prima cosa, guardando quello di Photoshop, ho pensato alla tavolozza RGB come a una matrice tridimensionale. Il mio primo tentativo envolved:

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

questo si traduce in qualcosa di simile
3D RGB color map

Il mio pensiero è questo è troppo lineare, confronto con quelli che vedo in Photoshop e sul web. Vorrei conoscere la logica dietro la mappatura dei colori in un selettore come questo: photoshop color picker

non ho davvero bisogno gli algoritmi si, sto principalmente cercando di capire la logica.

Grazie

+3

grazie, ma sto provando a crearne uno da zero per due motivi: per il divertimento e usando solo la tela, indipendente da imgs –

+0

"per il gusto di farlo" la parte vale sicuramente la pena! :) Probabilmente lo farò anche io. Saluti. – techfoobar

risposta

6

ho implementato un color picker tela di base una volta. L'ho fatto perché la maggior parte del selettore di colori che ho trovato sul Web utilizzava troppe immagini statiche e non volevo causare richieste aggiuntive.

La generazione del colore si basa su uno 10K javascript entry che ho trovato. Ho corretto alcuni bug e ho fatto alcuni refactoring sul codice.

Tutto ciò che dovete fare è includere un codice <input type="color-picker" /> nel vostro codice e chiamare lo PICKER.bind_inputs() dopo aver caricato il DOM.

Ecco un jsFiddle con il mio codice:

http://jsfiddle.net/mShET/1/

Tenete a mente che la specifica HTML5 already supports un colore di ingresso modulo selettore. Ma al momento, solo Opera lo ha implementato.

+0

Mi piace il tuo, ma sto davvero cercando di capire come funziona questo RGB + HSB. –

+0

Mio male, ho davvero perso la tua domanda. Hai già controllato l'articolo di Wikipedia su HSV? http://en.wikipedia.org/wiki/HSL_and_HSV –

+0

questo è molto impressionante, buona risposta. – Johnn5er

3

Per rispondere alla domanda sulla logica del selettore di Photoshop: sembra che il selettore di colori sia basato sullo spazio colore HSB. La tonalità (H) viene selezionata dal cursore verticale a destra, la saturazione (S) viene selezionata dall'asse orizzontale dell'area di selezione colore e la luminosità (B) viene selezionata dall'asse verticale dell'area di selezione colore.

di citare Wikipedia:

Lo scopo originale di HSL e HSV e modelli simili, e la loro applicazione corrente più comune, si trova in strumenti di selezione del colore. Nel modo più semplice, alcuni selettori di colori forniscono tre cursori, uno per ciascun attributo. La maggior parte, tuttavia, mostra una sezione bidimensionale attraverso il modello, insieme a un cursore che controlla quale particolare sezione viene mostrata.

+0

Anche ignorando la mia mancanza di conoscenza in questo settore, a mio parere manca qualcosa. Se controlli HxSxB in quel modo tridimensionale, dove entra in gioco RxGxB? –

+1

Non posso commentare il motivo per cui l'hanno fatto in quel modo, sono appena entrato in Photoshop e ho spostato il raccoglitore su e giù, da parte a parte, quindi ho spostato il cursore a destra. Controlla decisamente lo spazio colore HSB. Immagino che convertano semplicemente il colore selezionato in tutti gli altri spazi colore visualizzati e, al contrario, converti tutti i colori inseriti manualmente in HSB prima di alterare il selettore di colori per mostrare il colore. – Gareth

+0

grazie, è esattamente quello che sto cercando di capire, così posso costruire un algoritmo da quella conoscenza –

0

Ho creato un progetto JavaScript, "MasterColorPicker", che dispone di 4 diversi color-picker basati su tela.Mi ci sono voluti diversi mesi per leggere sia articoli di Wikipedia su "Color Wheel" che "HSB" e "HSL" e "RGB", e anche lavorare con gli algoritmi direttamente mentre costruivo ogni color-picker da zero. Una cosa su cui mi sono concentrato in questo progetto è portare la LOGICA di questi spazi colore in un formato facile da capire e da usare. La mia speranza è che solo l'utilizzo del progetto ti aiuterà a comprendere ogni spazio colore. Per quanto riguarda la mappatura da uno spazio all'altro, ad esempio, la relazione tra RGB e HSL, devi davvero espandere la tua immaginazione 3D per iniziare. Ecco dove spero che questo progetto possa aiutare. Ma davvero, non sbattere la testa contro il muro per anni cercando di capire questi algoritmi. Oltre a Wikipedia, vedi:

http://www.easyrgb.com/index.php?X=MATH

tutte le formule si può digerire. TRANNE: Wikipedia parla di "Chroma" in uno dei suoi articoli e dice di non confonderlo con "saturazione". Il mio progetto MasterColorPicker aggiunge un altro spazio colore, tonalità chroma-grigio (HCG), e il codice sorgente per questo progetto documenta le formule per la conversione tra HCG e RGB. Con HCG, puoi trovare l'organizzazione dei colori "Web-Safe" e il "RainbowMeistro Color-Picker" nel progetto ti darà una chiara visualizzazione di quello spazio colore. Si può provare il progetto e scaricare i file JavaScript/HTML da utilizzare sul proprio sistema (open-source e gratuito) da qui:

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

Pace!