'ColorPicker'에 해당되는 글 2건
- 2008/11/27 Blend 스타일의 Color Picker (소스포함) (4)
- 2007/10/28 고급 Color Picker (Expression Blend 스타일)
Introduction
제가 1년 전쯤 (실버라이트 1.1버전) 공개했던 Color Picker를 휴즈플로우에서 진행하는 어떤 프로젝트에서 쓰게되어,
실버라이트 2 버전으로 포팅도 하고, 많이 다듬어서 다시 이렇게 공개합니다.
블렌드 스타일의 컬러픽커이므로 많은 색상을 지원하실 수 있습니다.
 |
 |
Live Demo!
Source Code
HSV Color Space를 참고하여 구현하였습니다.
허접한 소스이지만, 살펴보시다 보면 쓸만한 구석이 있을 거예요.
현재 유저컨트롤로 구현되서 많이 아쉽습니다...
언젠가 시간이 허락되면 박스마일군에게 많이 배워서 커스텀 컨트롤로 제작하고픈 작은 꿈이 있습니다. ^^
BlendColorPickerSample.zip
위 예제에서 색상 선택하는 버튼은 ColorBox라는 객체를 사용하시면 되구요.
BlendColorPicker 객체는 IColorChangable 인터페이스를 상속 받은 객체라면 어디서든지 이용하실 수 있습니다.
감사합니다.
이올린에 북마크하기
이올린에 추천하기
Trackback : http://gilverlight.net/trackback/2987
2007/10/28 15:57
고급 Color Picker (Expression Blend 스타일)
2007/10/28 15:57 in Silverlight 1.1 [Old]/Workshop
샘플확인 : http://shiverlight.net/ColorPickerSample/ColorPickerSample/
고급 Color Picker UserControl을 하나 만들어 보았습니다.
Expression Blend의 Color Picker를 열심히 연구해서 Reverse Engineering 했습니다.
사용자가 색상영역을 마우스 클릭한 한 것을 색상정보로 변환하는 것까지는 쉬웠는데,
사용자에 의해서 R,G,B 양이 지정되면 거꾸로 색상영역에 Cursor 위치를 잡아주는 것은
생각보다 어려웠습니다.
최대 색상이 존재하는 공간은 가로 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’ = M + (255 – M) * (128 – x) / 128
C = M’ * (128 - y) / 128
------------------------------------------------------------------------------------
위 컨트롤에서 앞으로 더 구현해야할 기능은
R, G, B, A 의 양을 Text 입력 받는 기능과,
Color Code 를 Text 입력 받는 기능입니다.
Prev
Rss Feed