Draw Glass Effect

Draw Glass Effect

Linzhenqun

2007-10-5

Objective

Modern software is becoming more and more demanding for user experience, especially for the interface, when people no longer like the classic style of the general flavor, the interface of the gradient effect comes out, this can be manifested in Office2003. But now, the gradient effect does not seem to meet the aesthetic requirements, more and more software to try to use the glass effect to present, Vista is the glass interface.

The realization of the glass effect mostly adopts the way of picture, it is a great waste for the resources, the method of its utility is also possible, the following description will show you how the glass effect is implemented by the program, and the code listed can be applied to your project with confidence.

Body

Study the surface of some glass carefully, and find that it can be combined with a gradient, assuming there is a rectangular area, then the glass effect can be decomposed into the following parts:

The border may not be necessary, but for an entity, the border will appear to be complete, and we will divide the border into outer and inner borders, with the inner border to highlight some 3D effects.

The gradient is divided into two parts, which is the most important form of glass effect, in which the color will determine the quality of the glass effect. How do I determine the color of a gradient? Very simple, look for some glass effect of the picture and then take the color is, the following is an effect of MSN space:

In order to not scatter the code, I will list the entire unit, can be copied directly to your project, but I hope to retain the author's name.

{**********************************************************}
{Summary: Drawing of glass effects}
{                                                          }
{Linzhenqun}
{Date: 2007-10-5}
{mail: [email protected]}
{**********************************************************}

UnitGlassutils;

Interface
uses
Graphics, Windows, Classes;

type
{Declaration of the Gradient API}
Ptrivertex = ^ttrivertex;
Ttrivertex =packed Record
X:longint;
Y:longint;
Red:word;
Green:word;
Blue:word;
Alpha:word;
End;
functionGradientFill (DC:HDC; Vertex:ptrivertex; Numvertex:ulong;
Mesh:pointer; Nummesh, Mode:ulong): BOOL; stdcall;

type
{Gradient direction: From left to right, top to bottom}
Tgraddirection = (gdleftright, gdtopbottom);

{Color configuration for glass effect}
Tglasscolorcfg =Record
Outborder,//Outer box, if Clnone will not be drawn
Inborder,//Inner box, if Clnone will not be drawn
Grad1start,//start color of upper half gradient
Grad1end,//end color of upper half gradient
Grad2start,//Bottom half gradient start color
Grad2end:tcolor//Bottom half gradient end color
End;

var
{Default color configuration, blue glass}
Defglasscolorcfg:tglasscolorcfg = (outborder:clblack;

Inborder: $00E1D0AA;

Grad1start: $00d1ae7a;

Grad1end: $00b98835;

Grad2start: $00975f00;

Grad2end: $00C6A46A);

{color value goes to RGB}
proceduregetRGB (C:tcolor; outR, G, B:integer);

{Gradient Function}
procedureFillGradient (ConstCanvas:tcanvas;ConstArect:trect;
ConstStartColor, Endcolor:tcolor;ConstDirection:tgraddirection);

{Glass effect drawing function}
procedureDrawglassface (Canvas:tcanvas; Arect:trect;
ConstGLASSCOLORCFG:TGLASSCOLORCFG);

Implementation

functionGradientFill; External msimg32;

proceduregetRGB (C:tcolor; outR, G, B:integer);
begin
ifInteger (C) < 0 Thenc: = GetSysColor (c and$000000FF);
R: = C and$FF;
G: = CSHR8 and$FF;
B: = CSHR16 and$FF;
End;

procedureFillGradient (ConstCanvas:tcanvas;ConstArect:trect;
ConstStartColor, Endcolor:tcolor;ConstDirection:tgraddirection);
var
Vert:Array[0..1] ofTtrivertex;
Grect:tgradientrect;
nmode:cardinal;
R, G, B:integer;
begin
vert[0].x: = Arect.left;
VERT[0].Y: = Arect.top;
getRGB (StartColor, R, G, B);
Vert[0]. Red: = RSHL8;
Vert[0]. Green: = GSHL8;
Vert[0]. Blue: = BSHL8;
Vert[0]. Alpha: = 0;

vert[1].x: = Arect.right;
VERT[1].Y: = Arect.bottom;
getRGB (EndColor, R, G, B);
VERT[1]. Red: = RSHL8;
VERT[1]. Green: = GSHL8;
VERT[1]. Blue: = BSHL8;
VERT[1]. Alpha: = 0;

Grect.upperleft: = 0;
Grect.lowerright: = 1;
ifDirection = Gdleftright Then
Nmode: = Gradient_fill_rect_h
Else
Nmode: = Gradient_fill_rect_v;

GradientFill (Canvas.handle, @vert, 2, @gRect, 1, Nmode);
End;

procedureDrawglassface (Canvas:tcanvas; Arect:trect;
ConstGLASSCOLORCFG:TGLASSCOLORCFG);
var
R:trect;
begin
Canvas.Brush.Style: = Bsclear;
withGlasscolorcfg Do
begin
ifOutborder <> Clnone Then
begin
Outer frame
Canvas.Pen.Color: = Outborder;
Canvas.rectangle (Arect);
End;
ifInborder <> Clnone Then
begin
Inner frame
Inflaterect (Arect,-1,-1);
Canvas.Pen.Color: = Inborder;
Canvas.rectangle (Arect);
End;
Up and down gradient effect
Inflaterect (Arect,-1,-1);
withArect Do
R: = Rect (left, top, right, top + (bottom-top)Div2);
FillGradient (Canvas, R, Grad1start, Grad1end, Gdtopbottom);
R: = Rect (R.left, R.bottom, R.right, Arect.bottom);
FillGradient (Canvas, R, Grad2start, Grad2end, Gdtopbottom);
End;
End;

End.

This unit fillgradient draw the gradient effect, drawglassface draw the glass effect, these two are very useful interface function, also is one of my treasure, if in your project can help some busy, remember thank you oh.

The tglasscolorcfg is the color configuration of the glass effect, while the defglasscolorcfg defaults to the blue glass effect, in effect the same as the MSN space above.

Let's see how to use this unit, create a new project, put three buttons on the main form, and then put a paintbox, the main form code is as follows:

UnitUnit1;

Interface

uses
Windows, Messages, sysutils, variants, Classes, Graphics, Controls, Forms,
Dialogs, Stdctrls, Extctrls, glassutils;

type
TForm1 =class(Tform)
Btnblue:tbutton;
Pbglass:tpaintbox;
Btngreen:tbutton;
Btnblack:tbutton;
procedurePbglasspaint (Sender:tobject);
procedureFormcreate (Sender:tobject);
procedureBtngreenclick (Sender:tobject);
procedureBtnblueclick (Sender:tobject);
procedureBtnblackclick (Sender:tobject);
Private
{Private declarations}
Public
{Public declarations}
Fglasscolorcfg:tglasscolorcfg;
End;

var
Form1:tform1;

Implementation

{$R *.DFM}

procedureTform1.pbglasspaint (Sender:tobject);
begin
Drawglassface (Pbglass.canvas, Pbglass.clientrect, fglasscolorcfg);
End;

procedureTform1.formcreate (Sender:tobject);
begin
Fglasscolorcfg: = defglasscolorcfg;
End;

procedureTform1.btngreenclick (Sender:tobject);
begin
Green glass color scheme
Fglasscolorcfg.outborder: = Clnone; Clblack
Fglasscolorcfg.inborder: = Clnone; $00C4E3CF;
Fglasscolorcfg.grad1start: = $00AED2BA;
Fglasscolorcfg.grad1end: = $0067ad7d;
Fglasscolorcfg.grad2start: = $001f8741;
Fglasscolorcfg.grad2end: = $00359f58;
Pbglass.invalidate;
End;

procedureTform1.btnblueclick (Sender:tobject);
begin
Fglasscolorcfg: = defglasscolorcfg;
Pbglass.invalidate;
End;

procedureTform1.btnblackclick (Sender:tobject);
begin
Black glass color scheme
Fglasscolorcfg.outborder: = Clblack;
Fglasscolorcfg.inborder: = $00AFAFAF;
Fglasscolorcfg.grad1start: = $007d7d7d;
Fglasscolorcfg.grad1end: = $00353535;
Fglasscolorcfg.grad2start: = Clblack;
Fglasscolorcfg.grad2end: = $0071716a;
Pbglass.invalidate;
End;

End.

The example project achieves three kinds of glass effects: blue, green, and black, see below:

The effect of self-feeling is still possible, I do not know how you feel? Play your inspiration and imagination, maybe you can come up with a more beautiful color, remember to give back in here oh.

http://blog.csdn.net/linzhengqun/article/details/1812193

Draw Glass Effect