2012-01-04 4 views
12

저는 컴퓨터 그래픽에 능숙하지 않으며 HTML 페이지에 포함하기위한 자바 스크립트 도구로 색상 선택 도구를 만들어야합니다.자바 스크립트와 HTML 캔버스를 사용하여 Photoshop과 유사한 색상 선택기를 만듭니다.

먼저 포토샵의 사진을 보면 RGB 팔레트를 3 차원 매트릭스로 생각했습니다. 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> 


3D RGB color map

내 생각이 내가 포토샵과 웹에서 볼 수있는 것들에 비해 너무 선형처럼 뭔가가 발생합니다. 나는이 같은 선택기에서 색상 맵핑 뒤에 논리를 알고 싶습니다 : photoshop color picker

난 정말 algorythms 자체가 필요하지 않습니다, 나는 주로 논리를 이해하려고 노력 중이 야. 여기에 대한 코드를 참조 ColorPicker

를 사용 http://jsfiddle.net/maniator/GXuqb/2/

:

감사

+3

감사합니다.하지만 저는 두 가지 이유로 처음부터 하나를 만들려고합니다. 그것의 재미와 imgs와 독립적 인 캔버스를 사용하여 –

+0

"재미있게"부분은 확실히 가치가 있습니다! :) 나는 아마 그것을 할 것입니다. 건배. – techfoobar

답변

6

한번 캔버스를 기반으로 색상 선택기를 구현했습니다. 나는 웹에서 찾은 대부분의 색상 선택 도구가 너무 많은 정적 이미지를 사용하고 추가 요청을 원하지 않기 때문에이 작업을 수행했습니다.

색상 생성은 내가 발견 한 10K javascript entry을 기반으로합니다. 난 그냥 버그를 수정하고 코드에서 일부 리팩터링을 했어.

코드에 <input type="color-picker" />을 포함하고 DOM로드 후 PICKER.bind_inputs()을 호출하기 만하면됩니다.

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

곰 염두에두고있는 HTML5 사양 already supports 색상 선택기 양식 입력 : 여기

내 코드와 jsFiddle입니다. 그러나 현재 Opera만이이를 구현했습니다.

+0

나는 너의 것을 좋아하지만,이 RGB + HSB가 어떻게 작동하는지 이해하려고 정말로 노력하고있다. –

+0

나쁘다, 나는 정말로 당신의 질문을 놓쳤다. HSV에 관한 Wikipedia 기사를 이미 확인 했습니까? http://en.wikipedia.org/wiki/HSL_and_HSV –

+0

이것은 매우 인상적인 대답입니다. – Johnn5er

3

Photoshop 선택 도구의 논리에 대한 질문에 대답하려면 색상 선택 도구가 HSB 색상 공간을 기반으로하는 것처럼 보입니다. 색조 (H)는 오른쪽의 수직 슬라이더로 선택되고 채도 (S)는 색상 피커 영역의 수평 축에 의해 선택되고 밝기 (B)는 색상 피커 영역의 수직 축에 의해 선택됩니다.

Wikipedia에서 인용 :

HSL 및 HSV와 유사한 모델, 가장 일반적인 현재 응용 프로그램의 원래 목적은 색상 선택 도구입니다. 가장 단순한 색상 선택기는 각 속성에 하나씩 3 개의 슬라이더를 제공합니다. 그러나 대부분의 경우 특정 슬라이스가 표시되는 슬라이더와 함께 모델을 통해 2 차원 슬라이스가 표시됩니다.

+0

이 분야에 대한 저의 지식 부족을 무시하더라도 제 의견에는 거기에 뭔가 빠져 있습니다. 3 차원 적으로 HxSxB를 제어하면 RxGxB는 어디서 작동합니까? –

+1

나는 왜 그런 식으로했는지에 대해 말할 수 없다. 나는 Photoshop에 가서 픽커를 위아래로 좌우로 이동 한 다음 슬라이더를 오른쪽으로 옮겼다. HSB 색상 공간을 직접 제어합니다. 컬러 픽커를 변경하기 전에 색상을 표시하기 위해 손으로 입력 한 모든 색상을 HSB로 다시 변환합니다. – Gareth

+0

고마워, 그게 바로 내가 이해하려고 노력하는 것인데, 그 지식으로부터 algorythm을 만들 수있다. –

0

4 가지 캔버스 기반 색상 선택기가있는 JavaScript 프로젝트 인 "MasterColorPicker"를 만들었습니다."Color Wheel"과 "HSB", "HSL"및 "RGB"에 대한 Wikipedia 기사를 읽는 데 몇 달이 걸렸으며 각 색상 선택 도구를 처음부터 다시 만들 때 직접 알고리즘을 사용했습니다. 이 프로젝트에서 내가 집중 한 한 가지는 이러한 색상 공간의 LOGIC을 이해하기 쉽고 사용하는 형식으로 가져 오는 것입니다. 이 프로젝트를 사용하면 각 색상 공간을 이해하는 데 도움이 될 것입니다. 한 공간에서 다른 공간으로 매핑하는 한, 예를 들어 RGB와 HSL 간의 관계와 같이 3D 상상력을 실제로 확장시켜야합니다. 그것이이 프로젝트가 도움이되기를 희망하는 곳입니다. 그러나 실제로, 이러한 알고리즘을 찾아 내려고 몇 년 동안 벽을 머리에 대고 머리를 치지 마십시오. 위키 백과 외에도, 참조 : 당신이 소화 할 수

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

모든 수식을. 예외 : Wikipedia는 기사 중 하나에서 "Chroma"에 대해 말하고 "채도"와 혼동하지 말라고 말합니다. 내 MasterColorPicker 프로젝트는 다른 색상 공간 인 색조 - 회색 (HCG)을 추가하며이 프로젝트의 소스 코드는 HCG와 RGB 사이의 변환 공식을 문서화합니다. HCG를 사용하면 "Web-Safe"색상의 구성을 찾을 수 있으며 프로젝트의 "RainbowMeistro Color-Picker"는 해당 색상 공간을 명확하게 시각화합니다. 당신은 프로젝트를 시도하고 여기에서 자신의 시스템 (오픈 소스와 자유)에 사용하기 위해 자바 스크립트/HTML 파일을 다운로드 할 수 있습니다 :

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

평화를!

관련 문제