HSB色彩模式圆形调色板绘制方法
绘画应用软件都有一个漂亮的调色板，用于画笔取色，如Photoshop, AutoCad, 3DMAX，Painter等大牌专业的平面设计，立体建模的应用软件都有自己的调色板。矩形的16m色全色谱真彩的调色板比较容易绘制，我曾看到过圆形的调色板，此样式的调色板较难绘制。我想这没几个人会制作。好多时间我潜心研究，经验积累，现在我已能绘制各种漂亮的圆盘形和矩形调色板。
我感觉这漂亮的东西应该分享给大家，对于要编制绘图绘画程序的同行们，以及喜欢色彩的朋友们总会有些帮助。希望大家喜欢。
此前我发了个博文，关于圆盘形调色板绘制方法，介绍了3种圆形调色板的绘制方法。此文为大家介绍HSB色彩模式的调色板绘制方法，以及SB选色条的绘制方法，展示给大家2个样例，供大家参考。
下面是2个样例绘制方法的源码：
colorpad5 (){
cs.ClearDraw (0,src);
//绘制圆盘形 HSB 调色板：另外一种六分画法
//另加了调色板的选色条的绘制方法
cs.SetStrokeWidth(2); //线宽
cs.SetFillMode (0) ;
cs.SetColor (255,0,0,250);
cs.DrawRect (30,10,680,500); //大框线
cs.SetStrokeWidth(1); //线宽
cs.DrawRect (30,540,680,600); //横条框线
cs.DrawRect (455,550,545,588); //选色框线
cs.DrawRect (595,25,655,418); //竖条框线
cs.DrawRect (30,610,680,670); //加横条框线
cs.DrawRect (455,620,545,658); //选色框线
cs.DrawRect (40,620,442,658); //加横条框线
//*********全色谱真彩调色板（5）六分画法
cs.SetStrokeWidth(2); //线宽
dx=300 ; dy=210 ; r=150 ;
for (i= 0; i<=120 ; i++ ){ //red-orange
a=pi/360*i ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=250 ; cg=i*2-i/3 ; cb=0 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //yellow-green
a=pi/360*(i+120) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=250-i ; cg=210+i/3; cb=0 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //green-blue
a=pi/360*(i+240) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=130-i ; cg=250 ; cb=i*2 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //blue-purple
a=pi/360*(i+360) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=60-i/2 ; cg=240-i-i/2-i/3 ; cb=250 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //purple-magenta
a=pi/360*(i+480) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=i*2 ; cg=30-i/4; cb=250 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //magenta-red
a=pi/360*(i+600) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=250; cg=0 ; cb=230-i*2+10;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
cs.SetStrokeWidth(2); //线 , print " 120° "
cs.SetFillMode (1) ;
cs.SetTextSize (16);
for (n=0; n<=5; n++){ //六分线
a=pi/360*n*120; r=160;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
x1=(float)((r-40)*cos (a))+dx ;
y1=(float)((r-40)*sin (a))+dy ;
cs.SetColor(255, 100, 100, 100 );
cs.DrawLine (x1,y1, x0,y0) ;
x2=(float)((r+20)*cos (a))+dx ;
y2=(float)((r+10)*sin (a))+dy ;
kn=n*60 ;
ss=intToString (kn)+"° " ;
cs.SetColor(255,0, 0, 250 );
cs.DrawText (ss, x2-15,y2+5) ; }
//绘制选色条（横式）
//red-yellow-green-cyan-blue-purple-magenta-red
for (i=0;i<=255;i++){ //调色板：选色条
cs.SetColor (255,255,i,0); //red-yellow
cs.DrawLine (i/4+50,550,i/4+50,590);
cs.SetColor (255,255-i,255,0); //yellow-green
cs.DrawLine (i/4+114,550,i/4+114,590);
cs.SetColor (255,0,255,i); //green-blue
cs.DrawLine (i/4+178,550,i/4+178,590);
cs.SetColor (255,0,255-i, 255); //blue-purple
cs.DrawLine (i/4+242,550,i/4+242,590);
cs.SetColor (255,i,0,255); //purple
cs.DrawLine (i/4+306,550,i/4+306,590);
cs.SetColor (255,255,0,255-i); //magenta-red
cs.DrawLine (i/4+370,550,i/4+370,590);
}
//选色条上RGB
cs.SetTextSize (24);
cs.SetTextStyle (1) ;
cs.SetFillMode (1) ;
cs.SetColor (255,255,0,255);
cs.DrawRect (457,552,544,587); //选色上
cs.SetColor (255,120,120,120);
cs.DrawRect (560,550,654,589); //按钮
cs.SetColor (255,250,250,250);
cs.DrawRect (561,551,652,587); //按钮
cs.SetColor (255,200,200,200);
cs.DrawRect (563,553,652,587); //按钮
cs.SetColor (255,220,220,220);
cs.DrawRect (563,553,648,583); //按钮
cs.SetColor (255,0,0,250);
cs.DrawText ("确 定 ", 582, 577);
cs.SetFillMode (0) ; //选色鼠标icon
cs.SetStrokeWidth(1);
cs.SetColor (255,250,250,250);
cs.DrawCircle (366,570,7);
//选色条：draw select color bar
cs.SetFillMode (0) ;
cs.SetStrokeWidth(2);
for (i=0;i<=200 ;i++){ //调色板：选色条
cr=255 ; cg=i+i/4 ; cb=255 ;
cs.SetColor (255,cr, cg, cb ) ;
cs.DrawLine (240+i,621,240+i,658);
cr=250-i-i/4 ; cg=0 ; cb=250-i-i/4 ;
cs.SetColor (255,cr, cg, cb ) ;
cs.DrawLine (240-i,621,240-i,658);
}
//选色条下 HSB 模式
cs.SetTextSize (24);
cs.SetTextStyle (0) ;
cs.SetFillMode (1) ;
cs.SetColor (255,255,170,255);
cs.DrawRect (457,622,544,657); //选色下
cs.SetColor (255,120,120,120);
cs.DrawRect (560,620,654,659); //按钮
cs.SetColor (255,250,250,250);
cs.DrawRect (561,621,652,657); //按钮
cs.SetColor (255,200,200,200);
cs.DrawRect (563,623,652,657); //按钮
cs.SetColor (255,220,220,220);
cs.DrawRect (563,623,648,653); //按钮
cs.SetColor (255,0,0,150);
cs.DrawText ("确 定 ", 582, 647);
cs.SetFillMode (0) ; //选色鼠标icon
cs.SetStrokeWidth(1);
cs.SetColor (255,250,250,250);
cs.DrawCircle (350,639,7);
//绘制选色条（竖式）
//red-yellow-green-cyan-blue-purple-magenta-red
for (i=0;i<=255;i++){ //调色板：选色条
cs.SetColor (255,255,i,0); //red-yellow
cs.DrawLine (600,i/4+30,650,i/4+30);
cs.SetColor (255,255-i,255,0); //yellow-green
cs.DrawLine (600,i/4+94,650,i/4+94);
cs.SetColor (255,0,255,i); //green-blue
cs.DrawLine (600,i/4+158,650,i/4+158);
cs.SetColor (255,0,255-i,255); //blue-purple
cs.DrawLine (600,i/4+222,650,i/4+222);
cs.SetColor (255,i,0,255); //purple
cs.DrawLine (600,i/4+286,650,i/4+286);
cs.SetColor (255,255,0,255-i); //magenta-red
cs.DrawLine (600,i/4+350,650,i/4+350);
}
cs.SetTextSize (46);
cs.SetTextStyle (1) ;
cs.SetStrokeWidth(1);
cs.SetFillMode (1) ;
ss="圆形 真彩调色板 示例 5" ;
cs.SetColor (255,0,50,0);
cs.DrawText (ss,84,454);
cs.DrawText ("RGB ", 60,70);
cs.SetColor (255,0,250,0);
cs.DrawText (ss,80,450);
cs.DrawText ("RGB ", 60,70);
cs.SetFillMode (0) ;
cs.SetColor (255,250,150,0);
cs.DrawText (ss,80,450);
cs.DrawText ("RGB ", 60,70);
cs.Update ();
}// colorpad5 ()
colorpad6 (){
cs.ClearDraw (0,src);
//绘制圆盘形调色板：HSB 拾色板选项卡画法
cs.SetStrokeWidth(2); //线宽
cs.SetFillMode (0) ;
cs.SetColor (255,0,0,250);
cs.DrawRect (30,10,680,500); //大框线
cs.SetStrokeWidth(1); //线宽
cs.DrawRect (30,540,680,600); //横条框线
cs.DrawRect (579,29,630,414); //竖条框线
//*********全色谱真彩调色板（6）六分画法
cs.SetStrokeWidth(2); //线宽
dx=300 ; dy=210 ; r=150 ;
for (i= 0; i<=120 ; i++ ){ //red-orange
a=pi/360*i ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=250 ; cg=i*2-i/3 ; cb=0 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //yellow-green
a=pi/360*(i+120) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=250-i ; cg=210+i/3; cb=0 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //green-blue
a=pi/360*(i+240) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=130-i ; cg=250 ; cb=i*2 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //blue-purple
a=pi/360*(i+360) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=60-i/2 ; cg=240-i-i/2-i/3 ; cb=255 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=122 ; i++ ){ //purple-magenta
a=pi/360*(i+480) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=i*2 ; cg=30-i/4; cb=255 ;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
for (i= 0; i<=120 ; i++ ){ //magenta-red
a=pi/360*(i+600) ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cr=250; cg=0 ; cb=230-i*2+10;
cs.SetColor(255,cr, cg, cb );
cs.DrawLine (dx,dy,x0,y0) ; }
cs.SetStrokeWidth(1); //线 , print " 120° "
cs.SetFillMode (1) ;
cs.SetTextSize (16);
for (n=0; n<=2; n++){ //六分线
a=pi/360*n*240; r=160;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
x1=(float)((r-40)*cos (a))+dx ;
y1=(float)((r-40)*sin (a))+dy ;
cs.SetColor(255, 100, 100, 100 );
cs.DrawLine (x1,y1, x0,y0) ;
x2=(float)((r+20)*cos (a))+dx ;
y2=(float)((r+10)*sin (a))+dy ;
kn=n*120 ;
ss=intToString (kn)+"° " ;
cs.SetColor(255,0, 0, 250 );
cs.DrawText (ss, x2-15,y2+5) ; }
//绘制选色条（竖式）
//red-yellow-green-cyan-blue-purple-magenta-red
for (i=0;i<=255;i++){ //调色板：选色条
cs.SetColor (255,255,i,0); //red-yellow
cs.DrawLine (580,i/4+30,630,i/4+30);
cs.SetColor (255,255-i,255,0); //yellow-green
cs.DrawLine (580,i/4+94,630,i/4+94);
cs.SetColor (255,0,255,i); //green-blue
cs.DrawLine (580,i/4+158,630,i/4+158);
cs.SetColor (255,0,255-i,255); //blue-purple
cs.DrawLine (580,i/4+222,630,i/4+222);
cs.SetColor (255,i,0,255); //purple
cs.DrawLine (580,i/4+286,630,i/4+286);
cs.SetColor (255,255,0,255-i); //magenta-red
cs.DrawLine (580,i/4+350,630,i/4+350);
}
// HSB 模式：（HSV同，V=Value）
// Hue
色相， Saturation 饱和度， Brightness 亮度
//画中心高光
cs.SetFillMode (0) ;
cs.SetStrokeWidth(1); //线宽
for (i= 0; i<=360 ; i++ ){
a=pi/360*i*2 ; r=100 ;
x0=(float)(r*cos (a))+dx ;
y0=(float)(r*sin (a))+dy ;
cs.SetColor(10,255,255,255 );
cs.DrawLine (dx,dy,x0,y0) ; }
cs.SetStrokeWidth(2); //线宽
for (i= 0; i<=110 ; i++ ){
cs.SetColor(220-i*2,255,255,255 );
cs.DrawCircle (dx,dy,i) ; }
//选色条：draw select color bar
for (i=0;i<=100;i++){ //调色板：选色条
cr=240-i*2 ; cg=150-i; cb=250-i*2 ;
cs.SetColor (255,cr, cg, cb ) ;
cs.DrawLine (240-i*2,550,240-i*2,590);
cr=235+i/5 ; cg=155+i ; cb=255 ;
cs.SetColor (255,cr, cg, cb ) ;
cs.DrawLine (240+i*2,550,240+i*2,590);
}
//选色按钮
cs.SetTextSize (24);
cs.SetTextStyle (1) ;
cs.SetFillMode (1) ;
cs.SetStrokeWidth(1); //线宽
cs.SetColor (255,240,150,250);
cs.DrawRect (452,552,539,587); //选色显示
cs.SetColor (255,60,60,60);
cs.DrawRect (560,550,654,589); //按钮
cs.SetColor (255,250,250,250);
cs.DrawRect (561,551,652,587); //按钮
cs.SetColor (255,200,200,200);
cs.DrawRect (563,553,652,587); //按钮
cs.SetColor (255,220,220,220);
cs.DrawRect (563,553,648,583); //按钮
cs.SetColor (255,0,0,250);
cs.DrawText ("确 定 ", 582, 577);
cs.SetFillMode (0) ; //选色鼠标icon
cs.SetColor (255,250,250,250);
cs.DrawCircle (300,110,9);
cs.DrawCircle (240,570,8);
cs.SetColor (255,80,80,80);
cs.DrawCircle (240,570,7);
cs.SetFillMode (0) ;
cs.SetColor (255,40,40,40);
cs.DrawRect (39,550,439,590); //选色条框线
cs.DrawRect (450,550,540,588); //选色框线
//print 题标
cs.SetTextSize (46);
cs.SetTextStyle (1) ;
cs.SetFillMode (1) ;
ss="圆形 真彩调色板 示例 6 " ;
cs.SetColor (255,0,50,0);
cs.DrawText (ss,84,454);
cs.DrawText ("HSB ", 60,70);
cs.SetColor (255,0,250,0);
cs.DrawText (ss,80,450);
cs.DrawText ("HSB ", 60,70);
cs.SetFillMode (0) ;
cs.SetColor (255,250,150,0);
cs.DrawText (ss,80,450);
cs.DrawText ("HSB ", 60,70);
cs.Update ();
}// colorpad6 ()
//附原制作的矩形调色板源码
colorpad1 (){
cs.ClearDraw (0,src);
cs.SetFillMode (1);//0不填色，1填色
cs.SetTextSize (30); //*** (1) ****
cs.SetColor (255,0,0,200);
cs.DrawText (" 真彩调色板 ",20,35);
n=(int)(sn);
ss=intToString (n);
ss="mode = "+ss ;
cs.DrawText (ss,520,35);
cs.SetFillMode (0);//0不填色，1填色
cs.SetStrokeWidth(2); //线
cs.SetColor (255,0,0,250);
cs.DrawRect (20,60,670,460);
cs.Update ();
//**** 16m 全色真彩调色板
//以4，8为段变色，缩短显示时间。
//此为模拟演示，调色板取色用要逐点绘制
//机器速度快可以逐点绘制
//绘出图寬256＊3 ，图高256
//绘出 图片框定标：sx = 3 * 256 , sy = 256
//逐点绘出代码：
// canvas.Scale (0, 0)-(768, 255);
// r1 = 0; g1 = 255; b1 = 255;
// for (sx=0;sx<256;sx++){ //blue *******
// r1 = sx;
// for (sy=0;sy<256;sy++){
// g1 = 255 - sy;
// cs.SetColor (255,r1,g1,b1);
// cs.DrawRect (sx+50,sy+90,sx+50,sy+90);
// cs.Update (); //显示绘出过程
// } }
// r1= 255; g1= 255; b1= 255; //green
// for (sx=256;sx<512;sx++){ // green ********
// r1=512- sx +255; b1=512 - sx;
// for (sy=0;sy<256;sy++){
// g1= 255 - sy;
// cs.SetColor (255,r1,g1,b1);
// cs.DrawRect (sx+50,sy+90,sx+50,sy+90);
// cs.Update (); //显示绘出过程
// } }
// r1= 0; g1= 255; b1= 0; //red
// for (sx=512;sx<769;sx++){ // red ********
// r1=513- sx +255;
// for (sy=0;sy<256;sy++){
// g1= 255 - sy;
// cs.SetColor (255,r1,g1,b1);
// cs.DrawRect (sx+50,sy+90,sx+50,sy+90);
// cs.Update (); //显示绘出过程
// } }
//此DrawRect (), 其实是DrawPoint (), 然前者的绘制速度较快。
//**** 下面代码以4为段变色，缩短显示时间。
cs.SetFillMode (1);//0不填色，1填色
r1= 0; g1= 255; b1= 255; //blue
for (i=0;i<64;i++){ // blue ********
r1=i*4; sx=i*3; //太宽，缩一点
for (j=0;j<64;j++){
g1=255-j*4; sy=j*4;
cs.SetColor (255,r1,g1,b1);
cs.DrawRect (sx+50,sy+90,sx+58,sy+98);
// cs.Update (); //显示绘出过程
} }
r1= 255; g1= 255; b1= 255; //green
for (i=64;i<128;i++){ // green ********
r1=511- i*4 +255; b1=511- i*4; sx=i*3;
for (j=0;j<64;j++){
g1= 255 - j*4; sy=j*4 ;
cs.SetColor (255,r1,g1,b1);
cs.DrawRect (sx+50,sy+90,sx+58,sy+98);
// cs.Update (); //显示绘出过程
} }
r1 = 0; g1 = 255; b1 = 0; //red
for (i=128;i<192;i++){ // red ********
r1= i*4-511+255; sx=i*3 ;
for (j=0;j<64;j++){
g1=255 -j*4; sy=j*4 ;
cs.SetColor (255,r1,g1,b1);
cs.DrawRect (sx+50,sy+90,sx+58,sy+98);
// cs.Update (); //显示绘出过程
} }
cs.SetTextSize (46);
cs.SetTextStyle (1) ;
cs.SetFillMode (1) ;
cs.SetStrokeWidth(1); //线
ss=" 16m色 真彩调色板 示例" ;
cs.SetColor (255,0,50,0);
cs.DrawText (ss,84,424);
cs.SetColor (255,0,250,0);
cs.DrawText (ss,80,420);
cs.SetFillMode (0) ;
cs.SetColor (255,250,150,0);
cs.DrawText (ss,80,420);
cs.Update ();
}//colorpad1 ()
//**** END ********
5650
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
