Berechne die X, Y-Pixelposition auf dem Gradienten basierend auf Hexadezimalfarbe mit Javascript

8

Ich habe eine Raindow-HSV-Verlaufsfläche, die beim Klicken auf ein Element an dieser Position mit dem Hintergrund als Farbe des angeklickten Pixels hinzugefügt wird.

Ich möchte, dass es auch umgekehrt funktioniert. Wenn Sie zum Beispiel eine Hex-Farbe hätten, würde ich gerne dieses Pixel auf der Leinwand finden und ein Element an dieser Position erstellen.

Mein erster Gedanke war, irgendwie ein Matrix / Quadranten-System zu verwenden. Mein nächster Gedanke war, dass ich, da ich HSV benutze, meine HSV-Gradientenpositionspunkte verwenden könnte, um den Standort herauszufinden. Das Problem ist, dass meine Punkte nicht gleich weit voneinander entfernt sind, was es schwieriger macht. Darüber hinaus habe ich einen weißen Farbverlauf und einen schwarzen Farbverlauf, der den Hauptfarbverlauf abdeckt, und ich muss das berücksichtigen.

Meine Frage ist also, wie kann ich die Position des Farbpixels finden oder zumindest die beste Übereinstimmung, indem ich einfach einen Hex-Code verwende?

Hier ist mein Code soweit: Ссылка

HTML:

%Vor%

CSS:

%Vor%

Javascript:

%Vor%

** UPDATE **

Ich versuche das tatsächlich in HSV und nicht in HSL. Ich habe keine andere Vorliebe als ich Photoshop verwendet, um einen glatten Gradienten zu erzeugen.

Außerdem habe ich ein neues Beispiel mit dem, was ich erstellt habe, hinzugefügt. Eine der unten angegebenen Antworten deutet darauf hin, wie ich das erreichen kann, was ich versuche, aber bisher konnte ich es nicht erfolgreich machen.

Aktualisierter Code wird unter diesem Link sein, ich habe auch den obigen Code aktualisiert: Ссылка

    
stwhite 26.08.2016, 17:33
quelle

2 Antworten

3

Um den Ort zu erhalten, benötigen Sie die HSL-Werte

%Vor%

Der Farbton gibt die Position auf der x-Achse an und die Sättigung gibt dir y von oben bis zur Mitte und Helligkeit gibt dir die y-Achse von der Mitte bis zum Ende (nach deinem Beispiel);

    
Blindman67 26.08.2016 17:47
quelle
0

Sie könnten über die gesamte ImageData iterieren und beide Farben vergleichen.

%Vor%

Beachten Sie, dass dies ziemlich langsam und nicht die beste Idee ist.

    
yckart 26.08.2016 18:06
quelle

Tags und Links