Đồ họa trong .NET Đồ họa trong .NET ( Ngôn ngữ thể hiện C#) ( Ngôn ngữ thể hiện C#)

I. Sử dụng GDI+ ( đồ họa của .NET ) I. Sử dụng GDI+ ( đồ họa của .NET )

ư ệ ư ệ ử ụ ử ụ ắ ắ  Nguyên t c chung : Nguyên t c chung : 1.  S  d ng th  vi n:   1.  S  d ng th  vi n:

System.Drawing

System.Drawing.Drawing2D…trong .NET  …trong .NET  ệ ệ System.Drawing ho c ặ ho c ặ System.Drawing.Drawing2D FrameWork ( tùy vào l nh ). FrameWork ( tùy vào l nh ).

ấ ỳ ấ ỳ ư ư ề ề 2.  Đ  v  lên 1 Control b t k  ( Form, Panel, label…) có nhi u cách, nh ng    2.  Đ  v  lên 1 Control b t k  ( Form, Panel, label…) có nhi u cách, nh ng

ể ẽ ể ẽ ả ơ ả ơ ấ ấ đ n gi n nh t là: đ n gi n nh t là:

ẽ ẽ Graphics  = .CreateGraphics() ; Graphics  = .CreateGraphics() ; ệ ệ . [ các l nh v  ] ……. [ các l nh v  ]

ộ ẽ ộ ẽ

ủ ủ

G c t a đ  s  là góc trái trên cùng c a Control  Chú ý : G c t a đ  s  là góc trái trên cùng c a Control  Chú ý : ạ ạ

ố ọ ố ọ ẽ ẽ b n đang v . b n đang v .

II. Các đối tượng đồ họa cơ sở II. Các đối tượng đồ họa cơ sở

ng ng i có  i có

ươ ươ ở ở ố ượ ố ượ ườ ườ ụ ụ ữ ữ ữ ữ ề ấ ạ r t nhi u ph ề ấ ạ r t nhi u ph ng đ  h a (Overloading), tuy nhiên  ng đ  h a (Overloading), tuy nhiên  ng d ng cho nh ng đ i t ng d ng cho nh ng đ i t ng  ng   đây   đây  ng  ng

ề ấ ồ ọ ố ượ  đ  h a trong .NET, và l r t nhi u đ i t        Có Có r t nhi u đ i t  đ  h a trong .NET, và l ề ấ ồ ọ ố ượ         ồ ọ ố ượ ể ẽ th cứth cứ  đ  v  cho cùng 1 đ i t  đ  v  cho cùng 1 đ i t ồ ọ ố ượ ể ẽ ứ ươ ệ ỉ ớ ươ ệ ỉ ớ ng th c th i thi u nh ng ph ta ch  gi ứ i thi u nh ng ph ta ch  gi ng th c th ấ ơ ở c  s  nh t. ấ ơ ở c  s  nh t.

ườ ườ ể ể ẳ ẳ 1. Đ ng th ng qua 2 đi m: 1. Đ ng th ng qua 2 đi m:

ẽ ẽ ể ể ể ể .DrawLine( Bút v , đi m1, đi m2 ); .DrawLine( Bút v , đi m1, đi m2 );

ẽ ẽ ể ể ể ể ể ể ể ể .DrawLine( Bút v , đi m1.X, đi m1.Y, đi m2.X, đi m2.Y ); .DrawLine( Bút v , đi m1.X, đi m1.Y, đi m2.X, đi m2.Y );

ườ ườ ể ể ấ ấ 2. Đ ng g p khúc qua n đi m: 2. Đ ng g p khúc qua n đi m:

ứ ứ ể ể ả ả ẽ .DrawLines( Bút v , m ng ch a các đi m ); ẽ .DrawLines( Bút v , m ng ch a các đi m );

ườ ườ 3. Đ ng polygon: 3. Đ ng polygon:

ứ ứ ể ể ả ả ẽ .DrawPolygon( Bút v , m ng ch a các đi m ); ẽ .DrawPolygon( Bút v , m ng ch a các đi m );

ườ ườ 4. Đ ng Ellipse: 4. Đ ng Ellipse:

ộ ế ộ ế ữ ữ ẽ ẽ ậ ậ .DrawEllipse( Bút v , hình ch  nh t mà Elip n i ti p ); .DrawEllipse( Bút v , hình ch  nh t mà Elip n i ti p );

ẽ ườ ẽ ườ ệ ệ Chú ý: .NET không có l nh v  đ Chú ý: .NET không có l nh v  đ ng tròn !! ng tròn !!

II. Các đối tượng đồ họa cơ sở II. Các đối tượng đồ họa cơ sở

5. Hình qu t:ạ 5. Hình qu t:ạ

ữ ữ ậ ậ ườ ườ ắ ắ ẽ .DrawPie( Bút v , hình ch  nh t mà đ ẽ .DrawPie( Bút v , hình ch  nh t mà đ ộ ế ng tròn n i ti p, góc b t  ộ ế ng tròn n i ti p, góc b t

ầ ầđ u, góc quét ); đ u, góc quét );

6. Cung tròn: 6. Cung tròn:

ữ ữ ậ ậ ườ ườ ắ ắ ẽ .DrawArc( Bút v , hình ch  nh t mà đ ẽ .DrawArc( Bút v , hình ch  nh t mà đ ộ ế ng tròn n i ti p, góc b t  ộ ế ng tròn n i ti p, góc b t

ầ ầđ u, góc quét ); đ u, góc quét );

ữ ữ ậ ậ 6. Hình ch  nh t: 6. Hình ch  nh t:

ề ộ ề ộ ẽ ẽ ể ể ể ể ề ề .DrawRectangle( Bút v , đi m1.X, đi m1.Y, chi u dài, chi u r ng ); .DrawRectangle( Bút v , đi m1.X, đi m1.Y, chi u dài, chi u r ng );

ườ ườ ắ ắ ấ ỳ ấ ỳ 7. Đ ng cong chính t c b t k : 7. Đ ng cong chính t c b t k :

ẽ ẽ ể ể ả ả .DrawCurve( Bút v , m ng các đi m ); .DrawCurve( Bút v , m ng các đi m );

ẽ ẽ ể ể ả ả ạ ạ ố ố ộ .DrawCurve( Bút v , m ng các đi m, offset, S  phân đo n, đ   ộ .DrawCurve( Bút v , m ng các đi m, offset, S  phân đo n, đ

căng ); căng );

II. Các đối tượng đồ họa cơ sở II. Các đối tượng đồ họa cơ sở

ườ ườ ấ ấ 8. Đ ng cong b t ký khép kín: 8. Đ ng cong b t ký khép kín:

ế ộ ế ộ ẽ ẽ ể ể ả ả ộ ộ .DrawClosedCurve( Bút v , m ng các đi m, đ  căng, ch  đ  tô  .DrawClosedCurve( Bút v , m ng các đi m, đ  căng, ch  đ  tô

ế ế ả ả màu ); màu ); ẽ ẽ 9. V  1 hình  nh: ( có đ n 30 Overload !! ) 9. V  1 hình  nh: ( có đ n 30 Overload !! )

ể ể ẽ ẽ ả ả .DrawImage( Hình  nh, đi m v  ); .DrawImage( Hình  nh, đi m v  );

ể ể ể ể ầ ầ ả ả ể  s  ửs  ử ể

ụ ị ị Chú ý : Đ  hi n th  1 ph n hình  nh (xén hình) ta có th      Chú ý : Đ  hi n th  1 ph n hình  nh (xén hình) ta có th       ụd ng Overload sau :: d ng Overload sau

ữ ữ ể ể ẽ ẽ ậ ậ ả ả ơ ơ ị ồ .DrawImage( Hình  nh, đi m v , hình ch  nh t xén, Đ n v  đ   ị ồ .DrawImage( Hình  nh, đi m v , hình ch  nh t xén, Đ n v  đ

h a );ọh a );ọ

ơ ơ ị ồ ọ ị ồ ọ ể ể

Đ n v  đ  h a có th  là Pixel,… Đ n v  đ  h a có th  là Pixel,… ỗ ỗ ế ế t 1 chu i: t 1 chu i: 10. Vi 10. Vi

ọ ẽ ọ ẽ ể ể ế ế ỗ .DrawString( Chu i, Font, c  v , đi m vi ỗ .DrawString( Chu i, Font, c  v , đi m vi t ); t );

ệ ệ Chú ý: .NET không có l nh Putpixel !! Chú ý: .NET không có l nh Putpixel !!

anformation ) )

III. Các phép biến đổi ( Tranformation III. Các phép biến đổi ( Tr

ố ọ ố ọ ộ ẽ ộ ẽ ủ ủ ạ ạ ớ ạ  G c t a đ  s  là góc trái trên cùng c a Control b n đang   G c t a đ  s  là góc trái trên cùng c a Control b n đang  ớ ạ i : i :

Nh  l Nh  l         v .ẽv .ẽ

ớ ố ọ ớ ố ọ ộ ộ ế ế ị ị 1. Phép T nh ti n ( So v i g c t a đ  ):   1. Phép T nh ti n ( So v i g c t a đ  ):

.TranslateTransform( ∆x, ∆y ); .TranslateTransform( ∆x, ∆y );

ẽ ẽ ệ [ …các l nh v  ] ệ [ …các l nh v  ]

ớ ố ọ ớ ố ọ ộ ộ 2. Phép Xoay ( So v i g c t a đ  ): 2. Phép Xoay ( So v i g c t a đ  ):

.RotateTransform( Góc quay ); .RotateTransform( Góc quay );

ẽ ẽ ệ [ …các l nh v  ] ệ [ …các l nh v  ]

3. Phép Co giãn: 3. Phép Co giãn:

.ScaleTransform( Sx, Sy ); .ScaleTransform( Sx, Sy );

ẽ ẽ ệ [ …các l nh v  ] ệ [ …các l nh v  ]

III. Các phép biến đổi ( Tranformation ) III. Các phép biến đổi ( Tranformation )

ề ề

ế ế

ổ ổ t nhi u phép bi n đ i liên ti p nhau, thì  t nhi u phép bi n đ i liên ti p nhau, thì

ế ế ẽ ự ẽ ự

ế ế ệ ầ ượ ệ ầ ượ

ứ ự ừ ứ ự ừ

t theo đúng th  t t theo đúng th  t

t  t

trên   trên

Chú ý:  Chú ý:  ế ế N u vi      N u vi       .NET s  th c hi n l n l .NET s  th c hi n l n l xu ng.ốxu ng.ố

ứ ự ứ ự

ế ế

ấ ấ

ọ ọ

Th  t     Th  t

ổ  các phép bi n đ i là r t quan tr ng ! ổ  các phép bi n đ i là r t quan tr ng !

III. Các phép biến đổi ( Tranformation ) III. Các phép biến đổi ( Tranformation )

ậ ồ ọ ậ ồ ọ ệ ệ ế ế ậ ậ ỹ ỹ

iớ ạ :: Trong k  thu t đ  h a ta có khái ni m ma tr n các phép bi n   Trong k  thu t đ  h a ta có khái ni m ma tr n các phép bi n  iớ ạ Nh  l Nh  l đ i.ổđ i.ổ

(cid:0)

ậ ổ ậ ổ

ạ ạ ạ ạ

ợ ợ

ỗ ợ ỗ ợ .NET cũng h  tr , cho phép b n t o 1 ma tr n t ng  .NET cũng h  tr , cho phép b n t o 1 ma tr n t ng     ổ ấ ễ ế ổ ấ ễ ế h p các phép bi n đ i r t d  dàng. h p các phép bi n đ i r t d  dàng.

Always 0,0,1 Always 0,0,1

Linear Part Linear Part

00

00

Translation Translation PartPart

ậ ậ ạ ạ Ma tr n có d ng sau ( 3x3 ): Ma tr n có d ng sau ( 3x3 ):

11

Do Cột 3 Để ý : Do Cột 3 Để ý : luôn cố định, luôn cố định, nên ta chỉ cần 6 nên ta chỉ cần 6 tham số là đủ tham số là đủ xác định ma trận xác định ma trận

III. Các phép biến đổi ( Tranformation ) III. Các phép biến đổi ( Tranformation )

ổ ổ

ệ ệ

ế ế

ạ ạ

ậ ậ Mã l nh t o ra 1 ma tr n các phép bi n đ i: Mã l nh t o ra 1 ma tr n các phép bi n đ i:

Matrix  = new Matrix( ∆x, ∆y, Sx, Sy ... );     Matrix  = new Matrix( ∆x, ∆y, Sx, Sy ... ); ẽ ệ […các l nh v ] ẽ ệ […các l nh v ]

Sức mạnh của Sức mạnh của .NET !! .NET !!

IV. Tô màu các đối tượng cơ sở IV. Tô màu các đối tượng cơ sở

ữ

ậ ầ

ữ

ậ 1.  Tô màu hình ch  nh t : ổ ẽ .FillRectangle( ch i v , hình ch  nh t c n tô );

ổ ẽ

ữ

ậ

ầ

2.  Tô hình Elip : ộ .FillEllipse( ch i v , hình ch  nh t mà Elip c n tô n i

ti p);ế

ổ ẽ

ể

ả

3.  Tô Polygon : .FillPolygon ( ch i v , m ng các đi m Polygon);

Đường cong Bezier V. V. Đường cong Bezier

P1P1

P3P3

P0P0

P2P2

ươ ứ ẽ ườ ụ 1. Các ph ng th c v  đ ng Bezier thông d ng:

ể ể ẽ ể ể  .DrawBezier(Bút v , đi m0, đi m1, đi m2, đi m3);

ứ ể ẽ ả .DrawBezier(Bút v , m ng ch a 4 đi m);

Đường cong Bezier V. V. Đường cong Bezier

ộ

ế

ườ ế

ườ

ố

ị

2. Đ ng Bezier c ng tuy n :       N u mu n các đ

ả ượ

ế ố ớ ế

ộ

ng cong Bezier k t n i v i nhau m n  c c ng tuy n ( cùng trên 1

ườ

ủ

ứ

ầ

ườ

ể

ầ

ng Bezier đ u tiên. ng Bezier đ u tiên ( cũng là đi m

ủ

ứ

ng Bezier th  2 ). ườ

ủ

ề

ầ

ứ

ể màng thì 3 đi m sau ph i đ ẳ ườ ng th ng ): đ ể ề ể • Đi m đi u khi n th  2 c a đ ố ủ ế ể • Đi m k t cu i c a đ ườ ế ầ k t đ u c a đ ể ể • Đi m đi u khi n đ u tiên c a đ

ng Bezier th  2.

VI. Kết luận VI. Kết luận

ả ả ư ệ ư ệ

ươ ươ

ứ ứ

ấ ấ ố ượ ố ượ ng đ  h a và ph ng đ  h a và ph

ng th c  ng th c

t c  các đ i t t c  các đ i t ả ả

ạ ồ ọ Kh  năng đ  h a trong .NET là r t m nh. ạ ồ ọ • Kh  năng đ  h a trong .NET là r t m nh. ồ ọ ỗ ợ ấ ả Th  vi n h  tr  t ồ ọ ỗ ợ ấ ả • Th  vi n h  tr  t ử x  lý trên 2D ( và c  3D ). ử x  lý trên 2D ( và c  3D ).