Лекция 10 - кырг

План

1. Графика

2. Координата системасы

3. Башкаруу элементине растрдык сүрөттү чыгаруу

4. GDI+ графикалык ядросунун жардамында вектордук графиканы колдонуу

5. Graphics объектиси

6. Point (чекит) объектиси

7. Rectangle (тик бурчтук) объектиси

8. Pen (перо) объектиси

9. Brush (кисть) объектиси

10. Объект Font (шрифт) объектиси

11. Координаталарды өзгөртүп түзөө

12. Мисал. Функциянын графикасын түзүү

13. Түсүн берүү

14. Анимацияны кошуу

1. Графика

Бардык графикалык сүрөттөр вектордук жана растрдык болуп бөлүнөт. Вектордук сүрөттөрдө, алар түзүлгөн, чекиттердин жайгашуусу, геометрикалык фигурлардын математикалык аныкталышынын негизинде белгиленет. Растрдык сүрөт да чекиттерден турат. Бирок ар бир чекит өзүнчө аныкталат.

Вектордук жана растрдык графиканын негизги айырмачылыгы, бул вектордук графика экрандын мүмкүнчүлүгүнө байланыштуу эмес. Экрандын кандай мүмунчүлүгү болбосун, вектордук графика, өзүндө берилген сандагы пиксельдерден турат. Экрандын мүмкүнчүлүгү канчалык чоң болсо, растрдык сүрөт физикалык ошончолук кичине өлчөмдө болот.

Практикалык тарабынан караганда бардык башкаруу элементтеринде сүрөт тартуу мүмкүнчүлүгүн берет. Көбүнчө графика эки объекттерде чыгарылат: Form жана PictureBox.

Координата системасы

Ар бир форма жана ар бир PictureBox графикалык талаасы өзүнүн координата системасына ээ. Мисалы

X=0 Y=0

X

Форма же

Графикалык талаа

Y

Унчукпасты менен эсептин башы жогорку сол жакта болот. Х огу оңго багытталган, Y огу төмөн карай багытталган. Координата системасы унчукпастыкта графикалык элементтердин – пикселдердин жолчолорунан жана мамычаларынан турат. Пиксель – бул минималдуу болгон чекит, анын физикалдык өлчөмү операциялык системада орнотулган экрандын мүмкүнчүлүгүнө байланыштуу. Жолчолорду жана мамычаларды номерлөө 0дон башталат. (9, 4) координаталуу чекит пикселдин №9-мамычасынын №4-жолчосунда жайгашуусун түшүндүрөт.

Пиксель (0, 0)

Координаната системасы пикселдердин жолчолору жана мамычалары сыяктуу

1. Башкаруу элементине растрдык сүрөттү чыгаруу

Башкаруу элементине сүрөттү иштеп чыгуу баскычында жүктөсө болот. Ал үчүн, бул объектти белгилеп жана анын касиеттер терезесинде Image касиетин табуу керек.

Кийин касиеттин маани талаасында көп чекит баскычын басуу керек. Жооп катары Open (ачуу) диалогтук терезеси ачылат, андан сүрөттү камтыган файлды тандоо керек.

Сүрөттүн жана башкаруу элементтинин ортосундагы өлчөмдөрдү дал келтирүү үчүн башкаруу элементинин SizeMode касиетин пайдалануу керек. Бул касиет кийинки маанилерге ээ болушу мумкүн:

Normal – сүрөттүн өлчөмү өзгөрбөт;

CenterImage – сүрөт башкаруучу элементтин борборунда жайгашат (эгер сүрөттүн өлчөмү башкаруу элементтин өлчөмүнөн кичичне болсо);

StretchImage – сүрөттүн өлчөмү башкаруу элементтин өлчөмүнө карай ылайыкташтырылат;

AutoSize – башкаруу элементтин өлчөмү сүрөттүн өлчөмүнө карай ылайыкташтырылат.

Сүрөттү башкаруу элементине аткаруу баскычында жүктөсө болот (проекттин Debugging абалында). Төмөндөгү инструкция pbxMoney графикалык талаасында dollars.gif файлында сакталуучу сүрөттү жайгаштырат:

pbxMoney.Image = System.Drawing.Bitmap.FromFile ("D:\Сүрөттөр\dollars.gif")

Проекттин аткарылуу процесинде проекттин коду аркылуу сүрөттү өзгөртсө болот. Башкаруу элементинин Image касиети бул объект, ошондой эле сүрөттүү манипуляциялоо үчүн касиеттерге жана ыкмаларга ээ.

Аткаруу баскычында башкаруу элементтеги сүрөттү өчүрсө болот. Кийинки инструкция pbxMoney графикалык талаасынан сүрөттү өчүрөт:

If Not (pbxMoney.Image Is Nothing) Then

pbxMoney.Image.Dispose()

pbxMoney.Image = Nothing

End If

RotateFlip ыкмасынын жардамында сүрөттү бурууга же күзгүлүк чагылдырууга болот. Кийинки листингте Button1 баскычын ар бир басууда PictureBox1 объектисиндеги сүрөттүн сааттын желеси боюнча 90 градуска бурулат

Листинг. Сүрөттүн бурулуусун аткаруучу Button1_Click подпрограммасы.

Private Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)_ Handles Button1.Click

PictureBox1.Image.RotateFlip(RotateFlipType.Rotate90FlipNone) PictureBox1.Refresh()

End Sub

Бул жерде Rotate90FlipNone аргументтин бөлүгү сүрөттүн бурулуу ыкмасын аныктайт.

1. Графикалык ядронун жардамында вектордук графиканы колдонуу

GDI (Graphics Design Interface) – бул графика түзүү үчүн, тексттерди жана сүрөттөрдү чыгарууга арналган, класстар топтомунун интерфейсин түзөт. GDI+ класстары кийинки модулдарда жайгашат: System.Drawing, System.Drawing.Drawing2D, System.Drawing.Imaging жана System.Drawing.Text. Проектте керектүү модулдарды колдонуу үчүн, аларды проекттин кодунун башында көрсөтүп, проектке импорттоо зарыл:

Imports System.Drawing, System.Drawing.Drawing2D, System.Drawing.Imaging, System.Drawing.Text

Сүрөт тартуунун башында, сүрөт, сүрөттүн тиби жана инструмент жайгашуучу бетин тандоо керек. Тартуу үчүн бет катары Graphics объектиси колдонулат. Объекттин дал келүүчү ыкмасын тандап, керектүү геометрикалык фигураны тартууга болот.

Кийин инструмент тандалат. Инструмент болуп Pen (перо) объектиси же Brush (кисть) объектиси болушу мүмкүн. Перо сызыктарды жана контурларды тартууга арналган. Кисть жардамында толтурулган контурду тартса болот. Pen объектисинин негизги мүнөздөмөсү бул түсү жана сызыктын жоондугу. Brush объектисинин негизги мүнөздөмөлөрү бул түсү жана фигураны толтуруу үлгүсү.

Button1_Click подпрограммасы көк түстөгү горизанталдуу түз сызыкты тартат. Form1_Paint подпрограммасы кызыл түстөгү түз сызыкты тартат. Paint окуясы, объект же анын бөлүгү жылдырылгандан, чоңойтулгандан, башка терезе менен тосулгандан же өлчөмүн өзгөрткөндөн соң көрүнүктүү болуп калганда аткарылат.

Түз сызыктарды тартуу мисалдары

Листинг 2. Button1_Click и Form1_Paint подпрограммалары

Dim G As Graphics

Dim P1 As Pen = New Pen(Color.Blue, 2)

Private Sub Button1_Click(ByVal sender _ As Object, ByVal e _

As System.EventArgs) Handles Button1.Click G = Me.CreateGraphics

G.DrawLine(P1, 10, 165, 160, 165)

End Sub

Private Sub Form1_Paint (ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles MyBase.Paint

Dim P2 As Pen = New Pen(Color.Red, 2) G = Me.CreateGraphics

G.DrawLine(P2, 10, 15, 110, 115)

End Sub

Форманын кодунун биринчи жолчосунда Graphics типтеги G өзгөрмөсү жарыялнган. Экинчи жолчосунда көк түстүү жоондугу эки пикселдүү сызыкты тартуучу перо түзүлгөн. Эки өзгөрмө тең форманын бардык процедураларында жеткиликтүү, анкени алар процедуранын тышында жарыяланган.

Button1_Click подпрограммасынын биринчи инструкциясы, учурдагы формада сүрөт тартуу үчүн G бетин түзөт. Экинчи инструкциясы, көк түстөгү сызыкты тарткан, DrawLine ыкмасына кайрылат. Бул ыкманын биринчи аргументи – перо, ал сүрөт тартуу үчүн колдонулат. Калган төрт аргументи – түз сызык байланыштыруучу, биринчи экинчи чекиттердин x1, y1, x2, y2 координаталары.

Form1_Paint подпрограммасынын биринчи инструкциясы бир пикселдүү кызыл түстөгү сызыкты тартуу үчүн P2 перосун түзөт. Экинчи инструкциясы сүрөт тартуу үчүн учурдагы формада G бетин түзөт. Үчүнчү инструкциясы, кызыл түстөгү түз сызыкты тартуучу DrawLine методуна кайрылат.

Эгер форма башка терезе менен тосулуп же минималдаштырылып жана кайра ачылса, анда Button1_Click подпрограммасы менен тартылган көк сызык жоголуп кетет. Андай болбош үчүн, графикалык кодду форманын Paint окуясынын подпрограммасына жайгаштыруу керек. Мындай учурда формада графика, анын ар бир түзүлүшүндө жана жаңыланышында кайрадан тартылып турат. Form1_Paint подпрограммасы менен, формада тартылган кызыл сызык, форма менен манипуляцияларды жүргүзгөндө жоголбойт.

Graphics классынын базалык ыкмалары кийинки таблицада жайгашкан:

Кайсы бир түс менен боелгон, фигураларды тартуучу да ыкмалар бар. Мындай ыкмалар «Draw» префиксинин ордуна «Fill» префиксин колдонушат, мисалы FillEllipse.

1. Graphics объектиси

Эгер башкаруучу элементтин Graphics касиети болсо, анда ал объектте сүрөт тартууга болот. Graphics касиети, башкаруу элементинин бетинде тартуу үчүн керек болгон, ыкмалардын топтомун камсыздап берүүчү бир ысымдуу объектти кайтарат. Конкреттүү башкаруу элементи менен байланышкан, объектти чыгарып алуу үчүн, ушул башкаруу элементинин CreateGraphics ыкмасын чакыруу керек. Мисалы, PictureBox1 башкаруу элементинде тартуу үчүн, биринчиден, Graphics тибиндеги объекттик өзгөрмөнү жарыялап, PictureBox1 башкаруу элементинин CreateGraphics кайтарылган ыкмасы аркылуу баштоо керек:

Dim G As Graphics

G = PictureBox1.CreateGraphics

Эгерде формада сүрөт тартуу керек болсо, анда ушул форманын CreateGraphics ыкмасы аркылуу, Graphics объектисин түзүү керек:

Dim G As Graphics

G = Me.CreateGraphics

Graphics объектисинин бир нече базалык касиеттери бар. PageUnit касиети Graphics объектисинде координаталарды берүү үчүн колдонулуучу, өзгөрүү бирдигин аныктайт.

1. Point (чекит) объектиси

(x, y) координаталары менен аныкталуучу, жумушчу бетиндеги чекит. Жаңы объекттин түзүлүүсү:

Dim P As Point

P = New Point(65, 80)

X и Y аргументтери катары бүтүнсандуу маанилер берилет. Бул жыйынтыкты башка жол менен алууга болот:

Dim P As Point

P.X = 65

P.Y = 80

1. Rectangle (тик бурчтук) объектиси

Жогорку сол бурчтун, туурасынын жана бийиктигигинин координаталары берилген, тик бурчтук:

Dim r As Rectangle

r = New Rectangle(X, Y, туурасы, бийиктиги)

Мисалы:

r = New Rectangle(80, 95, 200, 100)

Эгер бул тик бурчтукту тартуу керек болсо, анда DrawRectangle же FillRectangle ыкмасына аргумент катары бериш керек болот.

1. Pen (перо) объектиси

Graphics бетинде сызыкты же контур фигураларын тартуу мүмкүнчүлүгүн берген виртуалдык перо. Pen объектисин түзүүдө, пикселдер менен сызыктын түсү жана жоондугу берилет. Pen жаңы объектисин түзүү үчүн Pens кийирилген топтомун колдонсо болот. Бул перо жоондугу бир пикселдүү сызыкты тартат. Түсүн берсе болот. Pens.Rot туюнтмасын, жоондугу бир пиксель болгон кызыл түстөгү сызыкты тартуучу Pen объектиси керек болгон, бардык жерде колдонсо болот.

Pen объектисинин кээ бир касиеттери:

• Color. Сызыктын түсүн берет.

• StartCap/EndCap. Сызыктын кесиндисинин башкы/соңку белгисин аныктайт.

• DashCap. Штрих жана пунктирлердин бүтүү стилин аныктайт.

• DashStyle. Сызыктын стилин аныктайт

1. Brush (кисть) объектиси

Геометриялык фиругаларды түс менен боёо үчүн инструмент. Өзүнчө мындай тип жок. Brush тибиндеги өзгөрмөнү жарыялоого болбойт. Кийинки типтерди колдонууга болот:

Берилген түс менен фигураны толугу менен боёо үчүн SolidBrush объектисин түзүү керек:

Dim b1 As SolidBrush

b1 = New SolidBrush(Color.Green)

SolidBrush аргументинде Color объектисинин жардамында кистин түсү берилет. задается цвет кисти. Фигураны штрихтөө үчүн башка кисть түзүү керек:

Dim b2 As HatchBrush

b2 = New HatchBrush(HatchStyle.DarkDownwardDiagonal, Color.Red,Color.Gray)

HatchBrush биринчи аргументи берилген тизмеден штрихтөөнүн тибин көрсөтөт. Экинчи аргумент – штрихтөөнүн түсү. Үчүнчү – фон түсү.

1. Font (шрифт) объектиси

DrawString ыкмасынын жардамында чыгарылган жолчо колдонгон шрифт. Мисалы, шрифтти аныктоо үчүн Font жаңы объектисин түзүү, шрифтин тибин, өлчөмүн жана стилин тандоо керек. Кийин бул объектти аргумент катары DrawString ыкмасына берүү керек.

1. Координаталарды оңдоп түзөө

Унчукпастык менен өлчөө бирдиги пиксель болот. Физикалык жана графикалык элементтер менен иштөөдө, өлчнөө бирдиги дюйм или миллиметр болсо, ыңгайлуу болот. Тандалган өлчөө бирдиктери Graphics объектисинин PageUnit касиети менен аныкталат. Эгер бул касиетке GraphicsUnit.Millimeter маанисин берсек, анда өлчөө бирдиги катары то миллиметр колдонулат. Учурдагы монитордун мүмкүнчүлүгу Graphics объектисинин DpiX жана DpiY касиеттеринин маанисин кайтарат. Эгер өлчоо бирдиги катары миллиметр тандалса, анда бир линиянын жоондугу бир пиксель, миллиметрде берилген туюнтма 1/Graphics.DpiX ге барабар болот. Мисалы, өлчөө бирдиги миллиметр болгондо, жоондугу үч пикселдүү сызыкты тартуучу, перону түзүү үчүн кийинки инструкция аткарылат:

Dim p As New Pen(Color.Black, 3 / G.DpiX)

Бул инструкциянын алдында кийинки инструкция жазылса туура болот:

Dim G As Graphics

G = Me.CreateGraphics

G.PageUnit = GraphicsUnit.Millimeter

Колдонуучунун өзүнүн жеке өлчө бирдигин түзүүгө мүмкүнчүлүгү бар.

Компьютердик графикада координатаны өзгөртүп түзөөнүн 3 түрү бар: масштабтоо, жылдыруу жана буруу. Масштабтоодо сүрөттүн өлчөмү өзгөрөт, бирок формасы эмес. Жылдырууда X жана Y огу боюнча жылат. Бурууда, берилген бурчтун мааниси боюнча бурулат.

Өзгөртүп түзөө боюнча маалымат Graphics объектисинин 3 ыкмасынын жардамында берилет: ScaleTransform, TranslateTransform, RotateTransform.

ScaleTransform ыкмасы эки аргументке ээ – горизонталдуу жана вертикалдуу масштабтоо коэффициенти:

Graphics.ScaleTransform(Sx, Sy)

Эгер коэффициент бирден кичине болсо, сүрөт кысылат, ал эми бирден чоң болсо чоюлат.

TranslateTransform ыкмасы эки аргументке ээ – горизонталдуу жана вертикалдуу жылдыруу:

Graphics.TranslateTransform(Tx, Ty)

Tx и Ty аргументтеринин мааниси учурдагы системанын бирдигинде берилет. Эгер тиешелүү аргументтер оң болсо, сүрөт оңго жана астыга жылдырылат. Эгер аргумент терс болсо, анда сүрөт солго жана жогоруга жылдырылат.

RotateTransform ыкмасы бир аргументке ээ – градуста берилген буруу бурчу. Буруу, координата башынын тегерегинде, саат желеси боюнча жүргүзүлөт:

Graphics.RotateTransform(r)

Эгер сүрөттү чыгаруудан соң, башка оңдөп түзөө менен жаңы сүрөттү чыгаруу керек болсо, анда Graphics объектисинин ResetTransform ыкмасын чакырып, мурунку оңдоп түзөөнү алып салуу керек.

1. Түсүн берүү

Түстүү сүрөттөрдө ар бир пиксель 4 байт аркылуу түсү аныкталат. Ар бир түс үч базалык түстү: кызыл, жашыл, көк, аралаштыруу менен түзүлөт.

Үч байт базалык түстөрдүн чымыркануусун берет: Red (кызыл), Green (жашыл) жана Blue (көк).Ар бир базалык түстүн чымыркануусу 0 дон 255ке чейинки мааниге ээ болушу мүмкүн. 0 – тиешелүү түс толугу менен жок, 255 – максималдуу чымыркануусу. Төртүнчү байт бул жерде түстүн тунуктугун берет. 0 – абсолуттук тунук түс, 255 – абсолуттук тунук эмес түс. Толук палитрада 16 миллион түс бар.

Түстү аныктоо үчүн Color объектиси FromARGB ыкмасына ээ:

Color.FromArgb(Red, Green, Blue)

Мисал

Dim C1, C2 As Color

C1 = Color.FromArgb(255, 255, 0)

C2 = Color.FromArgb(192, 255, 255, 0)

Бул жерде Color тибиндеги эки өзгөрмө жарыяланган. C1 өзгөрмөсү тунук эмес таза сары түстү берет. C2 өзгөрмөсү 25 пайыздуу тунуктуктагы сары түстү берет.

1. Анимацияны кошуу

Анимация – бул объекттерге кыймыл эффектисин кошуу, түрүн, өлчөмүн жана түсүн өзгөртүү.

Форма же объектти боюнча PictureBox объектисин жаңы абалга жылдыруу үчүн Location касиетин колдонсо болот:

объект.Location = New Point(X, Y)

объект – объектти жылдыруунун аты, X жана Y – жылдырылуучу объекттин жаңы абалынын солдогу жогорку бурчунун координатасы. Мисалы:

Button1.Location = New Point(0, 0)

Баскычты форманын солдогу жогору бурчка жылдырат, мурунку абалына көз каранды. Бул бир жолдуу жылдыруу.

1. Растрдык сүрөт менен вектордук сүрөттүн айырмасы кандай?

2. Экрандын мүмкүнчүлүгү чоңойгондо растрдык сүрөттүн өлчөмү кандай өзгөрөт?

3. Форманын кайсы чекити координата системасынын башы болуп эсептелет?

4. Эмне үчүн арналган жана кайсы жерде жайгашкан бул инструкция: Imports System.Drawing, System.Drawing.Drawing2D, _ System.Drawing.Imaging, System.Drawing.Text?

5. Pen жана Brush объектиси эмнеге арналган?

6. Кийинки инструкциянын жүргүзүлүшү:

Dim G As Graphics

G = Me.CreateGraphics?

1. Кийинки инструкциянын жүргүзүлүшү:

Dim P As Pen = New Pen(Color.Blue, 2)?

1. Кийинки инструкциянын жүргүзүлүшү:

Dim B As New SolidBrush(Color.Red)?

1. Кийинки инструкциянын жүргүзүлүшү:

G.DrawLine(Pens.Black, 310, 170, 310, 115)?

1. Кийинки инструкциянын жүргүзүлүшү:

Dim P1 As Pen = New Pen(Color.Blue, 2)? G.DrawRectangle(P1, 50, 130, 120, 80)?

1. Кийинки инструкциянын жүргүзүлүшү:

Dim P1 As Pen = New Pen(Color.Blue, 2)? G.DrawEllipse(P1, 310, 150, 40, 40)?

1. Кийинки инструкциянын жүргүзүлүшү:

Dim B As New SolidBrush(Color.Red)? G.FillEllipse(B, 10, 40, 100, 50)?