Визуаль програмчлал 13

1. Визуаль програмчлал I
ОУУБИС-ийн ХМТ-ийн тэнхим
Лекц 13

3. 3
 .NET Framework нь GDI+(Graphical Device
Interface plus) гэж нэрлэгдсэн график классуудыг
сангаар хангагдсан байдаг.
 Эдгээр график класууд нь 2 хэмжээст график
дүрслэлийг үүсгэхэд зориулагдсан.

4.  GDI+ нь дараах 3 төрлийн гадаргуу дээр зурахыг
дэмждэг.
• Дэлгэц. Текст, зураг, дүрсний нийлэмжээр
хэрэглэгчийн интерфейсийг дэлгэцэн дээр маш
уян хатнаар зурах боломжийг олгодог.
• Зураг. Ямар нэг физик байгууламжаас эсвэл
санах ойд ачаалагдсан зурагнаас зургийг зурах
боломжийг олгодог.
• Принтер. Хэвлэх буюу дүрслэлийг принтерт
зурах боломжийг олгодог.
4

5.  GDI+ график класууд нь дараах 6 нэймспейст зохион
байгуулагдан байрлана.
 System.Drawing – зурах үйл ажиллагаатай холбоотой
классуудаар хангах ерөнхий классуудыг агуулна.
 System.Drawing.Drawing2D – 2 хэмжээст буюу вектор
графикын классуудыг агуулна.
 System.Drawing.Imaging – зурагийг дүрслэх үйл
ажиллагаатай холбоотой классуудаар хангана.
 System.Drawing.Printing – хэвлэх үйл ажиллагаатай
холбоотой классуудаар хангана.
 System.Drawing.Text – текстийг дүрслэх болон
хэлбэржүүлэхтэй холбоотой классуудаар хангана.
 System.Drawing.Design – зохиомжлох горимыг хэрэгжүүлэх
үйл ажиллагаар хангана.
5

6. 6
 GDI+ график системийн гол цөм нь Graphics
объект юм. Програмын гадаргуу бүр нь Graphics
объект байдаг.
 GDI+ ээр дүрс, зураг, текстийг дүрслэхийн өмнө
график объектийг үүсгэх хэрэгтэй. Ингэснээр
зурах дүрслэх гадаргуу бэлэн болно гэсэн үг.
 Ө.х графиктай дараах алхамаар ажиллана.
1. График объект буюу график гадаргууг үүсгэх
2. Дүрс, зураг, текстийг дүрслэхдээ энэ график
объектоо ашиглах

7.  График гадаргууг дараах 2 аргаар үүсгэж болно.
1. Тухайн форм болон контролын Paint() үзэгдлийг
ашиглах
Paint үзэгдлийн PaintEventArgs төрлийн параметр нь
график объекттой холбогддог. Энэ тохиололд зурах
үзэгдэл дуудагдах үед график объект үүснэ.
private void Form1_Paint(object sender, PaintEventArgs e)
{
e.Graphics.DrawString("Энэ бол Paint үзэгдэл ашиглан
үүсгэсэн график гадаргуу", Font, Brushes.Red, 10, 0);
}
7

8. 2. Тухайн контролын GreateGraphics() методыг ашиглах
Өмнө нь үүсчихсэн форм болон контрол дээр зурахыг
хүсвэл энэ аргыг ашиглана.
private void Form1_Click(object sender, EventArgs e)
{
Graphics gr = CreateGraphics();
gr.DrawString("Энэ бол CreateGraphics метод ашиглан
үүсгэсэн график гадаргуу", Font, Brushes.Blue, 10,30);
}
8

9. 9
 Дэлгэц нь мөр, баганаар зохион байгуулагдсан
цэгүүд (pixel) -д хуваагдсан байдаг.
 Мөр, баганын тоо нь дэлгэцний цэгийн нягтрал
(resolution) –аар тодорхойлогдоно.
 Дэлгэцний хамгийн бага нэгж болох цэг нь өнгийг
тодорхойлдог. Тухайн нэг эгшинд нэг цэг зөвхөн
нэг өнгөтөй байна. Янз бүрийн өнгөтөй цэгүүд нь
дэлгэцийг дүрсэлдэг.

10.  GDI+ нь 2 хэмжээст координатын системийг
ашигладаг.
 Координатын төв нь дэлгэцний зүүн дээд өнцөг
 Аливаа цэгийн байрлал нь х,y гэсэн координатаар
тодорхойлогдоно.
10
Цэгийн өнгө Х координат Y координат
Улаан 0 0
Цэнхэр 3 3
Ногоон 7 5

11. 11
 Форм болон контролууд нь клиент муж гэж
нэрлэгдэх хэсэгт дүрслэгддэг.
 Форм, контролын дэлгэцэнд зурахын тулд байрлал
болон хэмжээг дараах классуудын тусламжтайгаар
тодорхойлно.
Класс Тайлбар
Point, PointF
Size, SizeF
Rectangle,
RectangleF
Байрлалыг тодорхойлно.
Хэмжээг тодорхойлно
Хэмжээ болон байрлалыг тэгш өнцөгтөөр
тодорхойлно.

12. 12
 График объекттой хамт ашиглагдаж дүрс, зураг,
текстийн дүрслэхэд тэргүүлэх үүрэг гүйцэтгэдэг
дараах объектууд байдаг.
 Color
 Pen
 Brush
 Font
дараа
байх
 Дээрх объектуудыг ашиглаж дууссаны
Dispose() методыг нь дуудан устгаж
шаардлагатай

13.  Өнгөтөй холбоотой мэдээллийг тодорхойлоход
ашиглагдагдах объектыг Color бүтэцийг ашиглана.
 Color объектыг дараах аргуудаар үүсгэх боломжтой
тодорхойлогдсон өнгөнүүдээс үүсгэх1. Урьдчилан
боломжтой
Жишээ:
Color col1 = Color.Aqua;
label1.BackColor = col1;
Color col2 = SystemColors.ActiveCaption;
label2.BackColor = col2;
13

14. 2. Улаан, ногоон, цэнхэр(RGB) гэсэн өнгөний үндсэн 3
бүрэлдэхүүн хэсгээс өнгийг үүсгэх
Дээрх 3 өнгөний авах утгын хязгаар нь: 0 - 255
Жишээ:
Color col1 = Color.FromArgb(255, 0, 0);
label1.BackColor = col1;
Color col2 = Color.FromArgb(128, 128, 128);
label2.BackColor = col2;
14

15. 2. Улаан, ногоон, цэнхэр(RGB) гэсэн өнгөний үндсэн 3
бүрэлдэхүүн хэсэг болон өнгөний тунгалагшилийг
тодорхойлох замаар өнгийг үүсгэх
Тунгалагшилийн авах утгын хязгаар нь: 0 - 255
Жишээ:
Color col1 = Color.FromArgb(255, 0, 0);
label1.BackColor = col1;
Color col2 = Color.FromArgb(50,255, 0, 0);
label2.BackColor = col2;
15

16.  Pen объект нь шулуун шугам, дүрснүүдийн гадуур
геометрийн дүрсийгхүрээ зурах болон бусад
дүрслэхэд ашиглагдана.
 Pen объектыг үүсгэх:
1. Pen классын байгуулагчаар үүсгэх
Pen pen = new Pen(Color.Red, 3);
2. Стандарт өнгөтэй, урьдчилан тодорхойлогдсон pen
объектоор үүсгэх
Pen pen = Pens.Red;
16

17. 17
 Pen объектын зурах шугамны хэлбэрийг DashStyle
шинжид DashStyle (System.Drawing.Drawing2D)
төрлөөр тодорхойлно.
 График объектын дараах методуудтай хамт
ашиглагдана.
Метод Тайлбар
DrawArc
DrawCurve
DrawEllipse
DrawLine
DrawPolygon
DrawPie
Нум зурах
Муруй шугам зурах
Тойрог, элипс зурах
Шулуун шугам зурах
Олон өнцөгт зурах
Тойргийн pie сегмэнт зурах

18. Жишээ:
Pen pen = new Pen(Color.Red, 3);
Pen pen2 = new Pen(Color.Blue, 3);
Pen pen3 = new Pen(Color.Green, 3);
e.Graphics.DrawLine(pen2, 10, 10, 100, 10);
e.Graphics.DrawLine(pen3, 100, 10, 100, 100);
e.Graphics.DrawLine(pen, 10, 10, 100, 100);
Pen pen4 = new Pen(Color.Orange, 5);
18

19. pen4.DashStyle = DashStyle.DashDot;
e.Graphics.DrawEllipse(pen4, 110, 10, 90, 90);
pen.Dispose();
pen2.Dispose();
pen3.Dispose();
pen4.Dispose();
19

20. график
ашиглах
объектууд нь
нэймспейст
 HatchBrush, LinearGradientBrush
System.Drawing.Drawing2D
агуулагдана.
20
 Brush объектууд нь өнгөөр дүүргэгдсэн
мужуудыг дүрслэхэд ашиглагдана.
 Дараах төрлийн Brush объектуудыг
боломжтой
Brush класс Тайлбар
SolidBrush
HatchBrush
LinearGradientBrush
TexturedBrush
Нэг өнгөөр дүрсийг дүүргэх багс
hatchStyle төрлийн хээгээр дүрсийг дүүргэх багс
Өнгөний налуу уусалтаар дүрсийг дүүргэх багс
Зураг ашиглах дүрсийг дүүргэх багс

21. объектын дараах
21
 Brush объектууд нь график
методуудтай хамт ашиглагдана.
Методууд Тайлбар
FillEllipse
FillRectangle
FillPolygon
FillPie
FillClosedCurve
Дүүргэгдсэн тойрог, элипс зурах
Дүүргэгдсэн тэгш өнцөгт зурах
Дүүргэгдсэн олон өнцөгт зурах
Дүүргэгдсэн pie сегмэнт зурах
Дүүргэгдсэн дурын дүрс

22.  Жишээ:
22

23. Жишээ:
private void Form3_Paint(object sender, PaintEventArgs e) {
Color red = Color.FromArgb( 255, 0, 0 );
Color green = Color.FromArgb( 0, 255, 0 );
Color blue = Color.FromArgb( 0, 0, 255 );
SolidBrush myBrush = new SolidBrush( red );
int alpha; int x = 0; int y = 0;
for ( alpha = 25; alpha <= 250; alpha += 25 ) {
myBrush.Color = Color.FromArgb( alpha, red );
e.Graphics.FillRectangle( myBrush, x, y, 50, 100 );
e.Graphics.FillRectangle( myBrush,x,y + 250, 50, 50 );
x += 50;
}
23

24. Жишээ:
x = 0; y += 50;
for ( alpha = 25; alpha <= 250; alpha += 25 ){
myBrush.Color = Color.FromArgb(alpha,green );
e.Graphics.FillRectangle( myBrush, x, y, 50, 150 );
x += 50;
}
x = 0; y += 100;
for ( alpha = 25; alpha <= 250; alpha += 25 ) {
myBrush.Color = Color.FromArgb(alpha,blue);
e.Graphics.FillRectangle( myBrush, x, y, 50, 150 );
x += 50;
}
}
24

25. Жишээ:
private void Form3_Paint(object sender, PaintEventArgs e)
{
LinearGradientBrush lbrush = new LinearGradientBrush(
new Point(0, 0), new Point(Width, Height),
Color.DarkRed , Color.White );
e.Graphics.FillEllipse(lbrush,15, 15, Height -50,Width- 50);
}
25

26. Жишээ:
26

27. Жишээ:
private void Form3_Paint(object sender, PaintEventArgs e)
{
HatchBrush hbrush = new HatchBrush(HatchStyle.Cross,
Color.Red);
Point point1 = new Point(50, 50);
Point point2 = new Point(150, 0);
Point point3 = new Point(200, 200);
Point point4 = new Point(0, 100);
Point[] points = { point1, point2, point3, point4 };
e.Graphics.FillClosedCurve(hbrush, points);
}
27

28. Жишээ:
28

29. Жишээ:
private void Form3_Paint(object sender, PaintEventArgs e)
{
TextureBrush tbrush = new TextureBrush(
Image.FromFile(@"E:Filesdisk.png"),
WrapMode.TileFlipXY);
e.Graphics.FillEllipse(tbrush,15, 15, Height -50,Width- 50);
}
29

30.  Font объект нь зурах текстийн хэлбэржүүлэлтийг
тодорхойлно.
 Текстийг зурахдаа график объектын DrawString()
методыг ашиглана.
 Тестийг зурах объект нь Brush объект байна.
30

31. Жишээ:
private void Form3_Paint(object sender, PaintEventArgs e)
{
Font = new Font("Courier New", 15, FontStyle.Bold);
string text = "Middle String";
e.Graphics.DrawString(text, Font,Brushes.Red,10,10);
}
31

32. нэг нийлмэл Олон төрлийн дүрсийг нэгтгэн
дүрсийг зурах боломжтой.
 Дараах объектуудыг ашиглана.
 GraphicsPath – хоорондоо холбогдсон төрөл бүрийн
шугамнуудаас бүрдсэн дүрсийг үүсгэнэ.
 Region – тодорхой мужаар хязгаарлагдсан гадаргууг
үүсгэнэ. Тухайн муж нь битүү байх ёстой.
32

33. 1. GraphicsPath объектыг үүсгэнэ.
2. Уг объектынхоо Add үгээр эхэлсэн методуудын
тусламжтайгаар холбогдох дүрснүүдийн эхлэл
төгсгөлийн цэгийг давхцуулан зурах дүрсийг
бэлтгэнэ.
3. Pen объектыг ашиглан Graphics объектын зурах
методуудын тусламжтайгаар, бэлтгэсэн дүрсийг
зурна.
33

34. 1. Region объектыг үүсгэнэ. Үүсгэхдээ GraphicsPath
объектын үүсгэсэн мужийг тодорхойлно.
2. Brush объектыг ашиглан Graphics объектын будах
методуудын тусламжтайгаар, бэлтгэсэн мужийг
өнгөөр дүүргэн дүрслэнэ.
34

35. 35

36. Жишээ:
private void Form2_Paint(object sender, PaintEventArgs e){
GraphicsPath gp = new GraphicsPath();
gp.AddCurve(new Point[]{
new Point(100,50),
new Point(105,40),
new Point(120,40),
new Point(130,65),
new Point(100,100)
},0.5f);
36
gp.AddCurve(new Point[]{
new Point(100,100),
new Point(70,65),
new Point(80,40),
new Point(95,40),
new Point(100,50)
}, 0.5f);

37. Pen pen = new Pen(Color.Red, 3);
e.Graphics.DrawPath(pen, gp);
Region rgn= new Region(gp);
LinearGradientBrush brush = new LinearGradientBrush(
new Point(0, 0),new Point(100, 100),
Color.DarkRed ,Color.Pink
);
e.Graphics.FillRegion(brush, rgn);
gp.Dispose();
brush.Dispose();
37

38.  Үүсгэсэн график дүрслэлүүдэд Graphics объектын
дараах методуудын ашиглан хувиргалт хийж
болно.
цэгийн TranslateTransform() – дүрсийн эхлэлийн
координатыг өөрчлөнө.
e.Graphics.TranslateTransform(10, 50);
38

39. өнцөгөөр RotateTransform() – дүрсийг өгөгдсөн
эргүүлнэ.
e.Graphics.RotateTransform(30);
39

40.  ScaleTransform() – дүрсийн хэмжээг ихэсгэнэ.
e.Graphics.ScaleTransform(5, 5);
 ResetTransform() – хувиргалтыг цуцлана.
40

41. • Image класс нь зурагтай ажиллах суурь класс буюу
үүсчихсэн зургийг удирдахад ашигглагдана.
нь үүсчихсэн зураг болон зурах
нэгдлээр шинэ зураг үүсгэхэд
• Bitmap класс
үйлдлүүдийн
ашиглагдана.
41

42. • Уг классууд нь
• Зургийг удирдах зорилгоор санах ойд хадгалах
• Файлаас зургийг дуудах ба зургийн тухай төрөл
бүрийн мэдээллийг өгөх
• Зургийг JPEG, GIF гэх мэтчилэн тодорхойлосон
форматаар хадгалах
• Зургийг эргүүлэх
• Бусад классуудтай хамтран зургийг зохион
байгуулах боломжийг олгоно.
42

43. • FromFile() – зургийг тодорхойлсон байрлал дэхь
файлаас үүсгэнэ
• FromStream() – зургийг тодорхойлсон өгөгдлийн
урсгалаас үүсгэнэ
• Save() – зургийг файлруу эсвэл өгөгдлийн
урсгалруу, зургийн төрлийг ImageFormat төрлийн
утгаар тодорхойлон хадгална.
– Bmp, Icon, Jpeg, Wmf, Png гэхмэт
43

44. • RotateFilp() – RotateFlipType төрлийн утгаар
эргүүлэлтийг хийнэ.
– Rotate90FlipY
– RotateNoneFlipX
– Rotate180FlipNone
– Rotate270FlipXY
• RawFormat – зургийн төрлийг ImageFormat төрлөөр
буцаана.
44

45. 45
Хэрэглээ
• PictureBox контрол нь зурган
мэдээллийг харуулахад хэрэглэгдэнэ.
• Форм дээр зургийн хүрээг дүрслэх ба
bitmap /.bmp/, GIF /.gif/, JPEG /.jpg/,
metafile /.wmf/, icon /.ico/нийтлэг
форматтай зургийг дэмжинэ.
Тайлбар

46. 46
Гишүүд
Image Зургийн хайрцагт харуулах зургийг
тодоххойлно.
ErrorImage Харуулах зурагт алдаа гарсан үед харуулах
зургийг тодорхойлно.
SizeMode Ажиллах горимд зургийн байрлал
хэмжээг тодорхойлно.
ImageLocation Тухайн контролд харуулах зургийн замыг
тодорхойлох ба буцаана.
Load() Ажиллах горимд зургийг хайрцагт ачаална.

47. 47
Normal - зураг тухайн контролын зүүн дээд буланд
байрлах ба хэрвээ зураг том хэмжээтэй бол зургийн
баруун дээд булан нь харагдана.
Хэрвээ зургийн хэмжээ том бол захын
CenterImage - зураг контролын төвд байрлана.
хэсггд нь
харагдахгүй таслагдана.
StretchImage – зургийн хэмжээ контролын хэмжээнд
хөрвөнө.
AutoSize – контролын хэмжээ зургийн хэмжээнд
тохирч харагдана.

48. 48

49. private Image CreatePicture() {
Image canvas = new Bitmap(50, 50);
Graphics artist = Graphics.FromImage(canvas);
artist.Clear(Color.Lime);
artist.FillEllipse(Brushes.Red, 3, 30, 30, 30);
artist.DrawBezier(new Pen(Color.Blue, 3), 0, 0, 40,
15, 10, 35, 50, 50);
artist.Dispose();
return canvas;
}
49

50. private Image myPicture = null;
private void Form4_Load(object sender, EventArgs e)
{
myPicture = CreatePicture();
}
private void pictureBox1_Paint(object sender,
PaintEventArgs e)
{
e.Graphics.DrawImage(myPicture, 30, 50);
}
50

51. private void Form4_Load(object sender, EventArgs e){
myPicture = CreatePicture();
pictureBox1.Image = myPicture;
pictureBox1.SizeMode = PictureBoxSizeMode.StretchImage;
}
51