고급 Color Picker (Expression Blend 스타일)

Silverlight Old/Workshop 2007.10.28 15:57

사용자 삽입 이미지

샘플확인 : http://shiverlight.net/ColorPickerSample/ColorPickerSample/

고급 Color Picker UserControl을 하나 만들어 보았습니다.
Expression Blend의 Color Picker를 열심히 연구해서 Reverse Engineering 했습니다.

사용자가 색상영역을 마우스 클릭한 한 것을 색상정보로 변환하는 것까지는 쉬웠는데,
사용자에 의해서 R,G,B 양이 지정되면 거꾸로 색상영역에 Cursor 위치를 잡아주는 것
생각보다 어려웠습니다.

사용자 삽입 이미지
R, G, B 세 가지 색상을 3차원 좌표계로 표현하면,
최대 색상이 존재하는 공간은 가로 255 x 세로 255 x 높이 255인 정육면체입니다.

색상이 존재하는 영역은 흰점, 검은점, 그리고 모(母)색상으로 이루어지는 삼각형으로
잘게 나눌 수 있습니다.

무지개 빛의 모(母)색상을 아래 6개의 그룹으로 나눕니다.

(1) RGB 그룹   (255.0.0 ~ 255.???.0)
(2) GRB 그룹   (255.255.0 ~ ???.255.0)
(3) GBR 그룹   (0.255.0 ~ 0.255.???)
(4) BGR 그룹   (0.255.255 ~ 0.???.255)
(5) BRG 그룹   (0.0.255 ~ ???.0.255)
(6) RBG 그룹   (255.0.255 ~ 255.0.???)

위 그림 중 왼쪽은 (1) RGB 그룹이 커버하는 색상영역을 표시합니다.

각각의 그룹을 21개의 단계로 나눕니다.
위 그림 중 오른쪽과 같이 존재합니다.

(1-1) 255.0.0-검은점-흰점
(1-2) 255.13.0-검은점-흰점
.
.
.
(1-21) 255.242.0-검은점-흰점

사용자가 지정한 RGB 값에 대해서 무지개 색상 UI에 제대로 표시해 주기 위해서는,
사용자가 지정한 RGB 값이 6개의 그룹 중 어디에 속하며, 그 그룹의 21개의 색상 평면 중 어디에 가까운지
알아내야 합니다.

그 다음 아래와 같은 관계를 이용하여 Gradient 평면상의 x, y 좌표 값을 결정해야 합니다.

사용자 삽입 이미지
모색상 값을 M이라 가정하면, 색상C와 아래와 같은 관계가 있습니다.

M’ = M + (255 – M) * (128 – x) / 128

C = M’ * (128 - y) / 128


------------------------------------------------------------------------------------
위 컨트롤에서 앞으로 더 구현해야할 기능은
R, G, B, A 의 양을 Text 입력 받는 기능과,
Color Code 를 Text 입력 받는 기능입니다.


설정

트랙백

댓글

  • BlogIcon 쇼너짱 2009.02.12 02:52 신고 ADDR 수정/삭제 답글

    와..리버스 엔지니어링 +_+ 멋지네용..저도 지금 간단하게 색상을 선택할 수 있는 팔레트 만들어보려고 고민중^^;

    • BlogIcon 길버트 2009.02.12 09:09 신고 수정/삭제

      소스 포함된 팔레트에 대한 포스팅이
      여기 있습니다만 도움이 되실런지...
      http://gilverlight.net/2987

  • BlogIcon 쇼너짱 2009.02.13 17:35 신고 ADDR 수정/삭제 답글

    네 그것도 바로 찾았었어요 ㅋ 멋지네요...잘 연구해볼께요..:)

    • BlogIcon 길버트 2009.02.14 09:58 신고 수정/삭제

      그랬군요.
      매쉬업 경진대회팀 파이팅!