GDI+ (Graphic Device Interface)

Tng quan
Th vin gip v ln mn hnh hoc my in
m khng cn quan tm n cu trc phn
cng c lp thit b
GDI+ bao gm 3 nhm dch v chnh:
2D vector graphics: cho php to hnh t cc hnh
c bn (primitive): ng thng, trn, eclipse,
ng cong,
Imaging: lm vic vi cc tp tin hnh nh
(bitmap, metafile)
Typography: v ch
GDI+ namespace

System.Drawing
System.Drawing. Drawing2D
System.Drawing.Imaging
System.Drawing.Printing
System.Drawing.Text
Cc khi nim
B mt v: Graphics (System.Drawing)
- Ly t Paint event (form)
- CreateGraphics (trong control)

protected override void OnPaint(PaintEventArgs e)

{
Graphics g = e.Graphics;
Pen pen = new Pen(Color.Red);
g.DrawLine(pen,0,0,100,100);
}
Cc khi nim

private void button1_click(Object o, EventArgs e)

{
Graphics g = this.CreateGraphics();
Pen pen = new Pen(Color.Red,15);
g.DrawLine(pen,0,0,100,100);
g. Dispose();
}

Invalidate();
Invalidate(myRect);
Mt s cu trc

Color
Point, PointF
Rectangle, RectangleF
Size, SizeF
Point, PointF X,Y
+, -, ==, !=, IsEmpty
Rectangle, X,Y
RectangleF Top, Left, Botton, Right
Height, Width
Inflate(), IntersSec,() Union()
Contain()
Size, SizeF +, -, ==, !=
Height, Width
Region phn rut ca khun hnh hc
Rectangle rect=new Rectangle(0,0,100,100)
Region rgn= new Region(rect)
Mt s enumeration

ContentAlignment
FontStyle
GraphicsUnit
KnowColor
RotateFlipType
StringAlignment
..
2D vector graphics
Pen & brush
Pen, Pens, SystemPens
Brush, Brushes, SystemBrushes,
SolidBrushes, TextureBrushes,
(System.Drawing.Drawing2D)
HatchBrush, LinearGradientBrush,
PathGradientBrush

Lines, rectangle, polygon

DrawLine DrawLines DrawRectangle DrawPolygon

FillRectangle FillPolygon
2D vector graphics
ellipse, arc, cardinal spline, bezier spline

DrawEllipse DrawCurve DrawBezier

FillEllipse DrawClosedCurve DrawBeziers
FillClosedCurve

DrawPie
DrawArc
FillPie
2D vector graphics
Path: kt hp nhiu loi ng nt thnh mt i tng duy
nht. Cc nt khng nht thit phi lin nhau.

GraphicsPath (AddLine, AddCurve, )

Graphics.DrawPath
Graphics.FillPath
grfx.DrawLine(pen, 25, 100, 125, 100);
grfx.DrawArc (pen, 125, 50, 100, 100, -180, 180);
grfx.DrawLine(pen, 225, 100, 325, 100);
GraphicsPath path = new GraphicsPath();
path.AddLine( 25, 100, 125, 100);
path.AddArc (125, 50, 100, 100, -180, 180);
path.AddLine(225, 100, 325, 100);
Pen pen = new Pen(clr, 25);
grfx.DrawPath(pen, path);
 2D vector graphics
Region: mt vng c to ra bng cc php kt
gia cc hnh ch nht hoc path. Region thng
c dng cho hit-test hoc clipping

System.Drawing.Drawing2D
Region.Intersect, Union, Xor,
Exclude, Complement
2D vector graphics
Clipping: gii hn cc hnh v vo trong mt region,
path hoc rectangle

Graphics.SetClip(<region>)
Graphics.SetClip(<path>)
Graphics.SetClip(<rectangle>)
V d
V d
Image
Cho php v cc hnh nh.
To cc hnh nh thng qua class Image (Bitmap,
Metafile, Icon, )
Class Bitmap h tr cc nh dng chun GIF, JPG,
BMP, PNG, TIFF.
Dng Graphics.DrawImage, DrawIcon,
DrawIconUnstretched, DrawImageUnscaled
Bitmap
Bitmap bmp = new Bitmap(filename, )
RotateFlip: xoay lt, hnh
MakeTransparent: t mu trong sut.
GetPixel, SetPixel: v bng cch chm tng im!
V ch
Cho php v cc cu ch trn Graphics
To cc i tng Font ch nh cc thuc tnh ch
(nh font, style, ) (chng 5)
To pen v brush
Graphics.DrawString
o kch thc chui (di,rng) , dng
Graphics.MeasureString
 System.Drawing namespace
Bitmap Pixel image (GIF, JPEG, PNG, BMP, TIFF)
Brush Abstract base class.
Brushes Brushes for all basic colors
Color
Font Defines a format for text, including font face, and
sizeEncapsulates a typeface, size, style, and effects.
FontFamily Group of type faces with the same basic design.
Graphics
Icon Transparent bitmaps used for Windows icons.
Image Abstract base class common to the Bitmap, Icon, and
Metafile classes.
Pen Defines an object used to draw lines and curves.
Pens Provides static Pen definitions for all the standard colors.
 System.Drawing namespace
Point Structure used to represent an ordered pair of integers.
Typically used to specify two-dimensional Cartesian
coordinates.
PointF Same as Point, but uses a floating-point number (float in C#,
Single in VB.NET) rather than an integer.
Rectangle Structure that represents the location and size of a rectangular
region.
RectangleF Same as Rectangle, but uses floating-point values (float in C#,
single in VB.NET) rather than integers.
Size Structure that represents the size of a rectangular region as
an order pair (Point) representing width and height.
SizeF Same as Size, but uses PointF rather than Point.
SystemBrushes A utility class with 21 static, read-only properties that return
objects of type Brush (each of a different
color).
SystemPens A utility class with 15 static, read-only properties that return
objects of type Pen (each of a different color).
 tng to animation vi GDI+
Xa c - v mi l sai lm!
Frame-based animation: v li ton b form theo tc
nht nh. Kim sot bng cc bin trng thi.

protected int x=0;

protected int y=0;

private void Form1_Paint(object sender, PaintEventArgs e) {

Graphics g = e.Graphics;
Pen pen = new Pen(Color.Red);
g.DrawRectangle(pen, x, 10, 100, 50);
g.DrawRectangle(pen, 10, y, 100, 50);
}

private void timer1_Tick(object sender, EventArgs e) {

x = (x + 1) % 200; y = (y+1) % 200;
Refresh();
}
Gii quyt nhng hnh bng double-buffer

Form.DoubleBuffered = true
Mi thao tc v din ra ti back-buffer.
Khi hon tt, ni dung ca back-buffer c
hon chuyn (flip) ln front-buffer (form).
* Thao tc flip c thc hin bng phn cng
nn thng rt nhanh.
Sprites
Mi bitmap mt frame => np hnh nhiu ln, kh qun
l.
Dng mt hnh ln cha nhiu hnh nh kch thc bng
nhau (sprites)

Hm DrawImage cho php v mt phn hnh ch nht ca

image ln Graphic
Xem
http://www.codeproject.com/vcpp/gdiplus/imagee
xgdi.asp
bit cch extract frames (sprites) t animated GIF files
Transformation bin i h trc

H trc (coordinate system)

H trc th gii (world coordinate system)
H trc trang (page coordinate system)
H trc thit b (device coordinate system)
Transformation bin i h trc
H trc thit b - form

y
 Transformation bin i h trc
H trc th gii (o c s ca cc lnh Draw, Fill)

Ban u, h trc world trng vi h trc thit

b.
Cc lnh Graphics.xxxTransform gip bin
i cc ta t h trc th gii sang h trc
thit b (php bin i ny gi l world
transformation)

y
 Transformation bin i h trc
World coordinate h trc o c s ca cc lnh Draw, Fill

100 x

(0,0)
50
x
(25,50)
(75,150)

g.TranslateTransform(100,50)
(t h trc world ti v tr (100,50)
ca h trc world hin ti = h trc
device)
y y
 Transformation bin i h trc
World coordinate h trc o c s ca cc lnh Draw, Fill

100 x

(0,0)
50
x

g.TranslateTransform(100,50)
g.DrawRectangle(pen,0,0,50,50)

y y
 Transformation bin i h trc
World coordinate h trc o c s ca cc lnh Draw, Fill

100 x
(-25,-25)

(0,0)
50
x

g.TranslateTransform(100,50)
g.DrawRectangle(pen,-25,-25,50,50)

y y
 Transformation bin i h trc
World coordinate h trc o c s ca cc lnh Draw, Fill

450

y
g.TranslateTransform(100,50)
g.RotateTransform(45)
g.DrawRectangle(pen,-25,-25,50,50)
y x
 Th t php bin i
Th t php bin i l quan trng, p dng th t bin i
khc nhau s to ra hiu ng khc nhau.

g.RotateTransform(45)
g.TranslateTransform(100,50)
g.DrawRectangle(pen,-25,-25,50,50)

y x
y
 Th t php bin i
Th t php bin i l quan trng, p dng th t bin i
khc nhau s to ra hiu ng khc nhau.
g.RotateTransform(45)
g.TranslateTransform(100,50)
g.DrawRectangle(pen,-25,-25,50,50)

50
100

y x
y
Bin i h trc bng ma trn

Tt c cc php bin i u c thc hin bn

di bng ma trn.
T tng chnh: mi hnh u c to ra t cc
im => mi thao tc bin i (d phc tp n
my) u quy v vic chuyn i ta ca cc
im.
Ma trn: l mt bng 2 chiu, mi l mt s thc.
i cng v ma trn

Cng ma trn, cng tng phn t tng ng

2 3 1 2 3 5
4 5 + 3 4 = 7 9
6 7 5 6 11 13
 i cng v ma trn

Nhn ma trn: (mn) nhn vi (np) m p

Gi tr (i,j) = tch v hng ca (hng i ca A) v (ct j ca
B)
Tch v hng ca:
(a1,a2,a3,,an) (b1,b2,b3,,bn) = (a1*b1 + a2*b2 + a3*b3 + +anbn)

2 3 11
1 2
4 5 =
3 4
6 7

C(1,1) = (2,3) (1,3) = 2*1 + 3*3 = 11

 i cng v ma trn

Nhn ma trn: (mn) nhn vi (np) m p

Gi tr (i,j) = tch v hng ca (hng i ca A) v (ct j ca
B)
Tch v hng ca:
(a1,a2,a3,,an) (b1,b2,b3,,bn) = (a1*b1 + a2*b2 + a3*b3 + +anbn)

2 3 11 16
1 2
4 5 =
3 4
6 7

C(1,2) = (2,3) (2,4) = 2*2 + 3*4 = 16

 i cng v ma trn

Nhn ma trn: (mn) nhn vi (np) m p

Gi tr (i,j) = tch v hng ca (hng i ca A) v (ct j ca
B)
Tch v hng ca:
(a1,a2,a3,,an) (b1,b2,b3,,bn) = (a1*b1 + a2*b2 + a3*b3 + +anbn)

2 3 11 16
1 2
4 5 = 19
3 4
6 7

C(2,1) = (4,5) (1,3) = 4*1 + 5*3 = 19

 Bin i ta im bng ma trn

Mt im l ma trn 12 (P)
Php bin i l ma trn: 22 (T)
Bin i: P = P T

1 0
5 10 = 5 -10
0 -1

Lt (flip) theo chiu ng

 Bin i ta im bng ma trn

Mt im l ma trn 12 (P)
Php bin i l ma trn: 22 (T)
Bin i: P = P T

0 1
5 10 = -10 5
-1 0

Xoay 900
 Bin i ta im bng ma trn

Mt im l ma trn 12 (P)
Php bin i l ma trn: 22 (T)
Bin i: P = P T

3 0
3 2 = 9 2
0 1

Dn trc x 3 ln
 Bin i ta im bng ma trn

Vn : khng th biu din php translate (dch chuyn) im

bng nhn ma trn.
Gii quyt:
M rng ma trn bin i thnh 33, thm mt hng cha ma trn
transalate, thm mt ct dummy (0,0,1).
Thm mt thnh phn rng (dummy) c gi tr 1 vo ta im.

0 0 0
x y 1 = x+10 y+20 1
0 0 0
10 20 1
 Bin i ta im bng ma trn

Cc php bin i khc vn c bo ton

0 1 0
x y 1 = -y x 1
-1 0 0
0 0 1

1 0 0
x y 1 = x -y 1
0 -1 0
0 0 1
 Bin i ta im bng ma trn

Ti sao dng nhn ma trn m khng tnh ton trc tip?

Ma trn c kh nng ghp nhiu php bin i lm 1.
lm 100 php bin i cng lc, ch cn tnh tch ca 100 ma
trn bin i, sau cng nhn ma trn ca im v ma trn tch
Nh vy vn phi nhn nhiu ln????
ng qun: mt hnh c nhiu im
 Matrix class

Lp Matrix ca GDI+ c sn tt c cc phng thc cn thit

thao tc trn ma trn bin i.
Multiply: nhn mt ma trn bin i vi ma trn hin ti
Scale: nhn mt ma trn dn vi ma trn hin ti
Shear: nhn mt ma trn ko vi ma trn hin ti
Translate: nhn mt ma trn dch chuyn vi ma trn hin ti
Rotate: nhn mt ma trn xoay vi ma trn hin ti
RotateAt: nhn mt ma trn xoay quanh mt tm nh trc vi ma trn
hin ti.
Reset: t ma trn v ma trn n v.
Sau khi tnh ton ma trn bin i, p dng ma trn bng:
Graphics.Transform = <matrix>
 Bin i cc b

Cc bin i h trc c tnh ton cc (c tc dng trn tt c i

tng). p dng cc b trn mt i tng, dng
GraphicsPath.Transform(matrix)
Bin i cc b thng c dng to chuyn ng cc b
ca mt thnh phn ca mt i tng. Chng hn, nng sng
ca mt chic xe tng.