Print bookPrint book

§ 4. Элементы кіравання для работы з графікай

Site: Профильное обучение
Course: Інфармацыйныя тэхналогіі. 11 клас (Базавы ўзровень)
Book: § 4. Элементы кіравання для работы з графікай
Printed by: Гость
Date: Friday, 4 April 2025, 9:19 PM

Table of contents

§ 4.1. Элементы кіравання для работы з графікай

Пры стварэнні дадатку нярэдка ўзнікае неабходнасць упрыгожыць яго графічным відарысам. У гэтым выпадку можна выкарыстаць кампанент Image (відарыс). На панэлі кампанентаў Additional кампанент відарыс паказаны ў выглядзе  , імя аб'екта — Image. Кампанент Image, змешчаны на форму, атрымлівае імя ImageN, дзе N — нумар 1, 2, 3… (прыклад 4.1).

Некаторыя ўласцівасці кампанента Image прыведзены ў табліцы  (прыклад 4.2).

Выкарыстоўваючы ўласцівасць Picture, можна выбраць і загрузіць відарыс на этапе праектавання дадатку. Відарыс можа быць выбраны ў акне рэдактара відарысаў (кнопка   каля ўласцівасці Picture ў акне інспектара аб'ектаў). У гэтым выпадку малюнак захоўваецца ў файле формы і для работы дадатку асобнага файла з малюнкам не патрабуецца.

Кампанент падтрымлівае ўстаўку малюнкаў у фарматах JPEG, PNG, BMP. Калі патрабуецца апрацоўка відарыса (любыя змяненні малюнка), то малюнак павінен быць захаваны ў фармаце BMP. Для малюнкаў фармату PNG з празрыстым фонам пры загрузцы захоўваецца празрыстасць.

Уласцівасць Picture кампанента Image валодае метадамі LoadFromFile і SaveToFile, якія выкарыстоўваюцца для загрузкі і захавання відарыса. Метад LoadFromFile можа быць выкарыстаны для загрузкі відарыса пры адкрыцці дадатку. У гэтым выпадку файл з малюнкам павінен знаходзіцца ў папцы праекта (ці неабходна прапісаць поўны шлях да файла).

Прыклад 4.3. Стварыць праект, у якім змясціць фонавы відарыс на форме. Пры націсканні на кнопку па-над фонавым відарысам павінен з'явіцца іншы відарыс.

Этапы выканання задання

  1. Змясціць на форму два кампаненты Image і кнопку.
  2. Загрузіць у кампанент Image1 фонавы відарыс. Задайце памеры Image1: Height = 370, Width = 550. Уласцівасць Stretch = True.
  3. Для кампанента Image2 устанавіць значэнні для ўласцівасці Visible = False (відарыс нябачны пры запуску дадатку). Памеры Height = 120, Width = 200. Уласцівасць Stretch = True.
  4. Загрузіць відарыс у кампанент Image2. Відарыс можа быць фармату PNG з празрыстым фонам ці фармату BMP з фонам аднароднага колеру (у гэтым выпадку значэнне ўласцівасці Transparent = True).
  5. Напісаць апрацоўшчык падзеі OnClick для кампанента Button1.

Прыклад 4.1. Кампанент Image (відарыс) на форме:

Прыклад 4.2. Некаторыя ўласцівасці кампанента Image (відарыс).

Уласцівасць

Прызначэнне

Picture

Выкарыстоўваецца для адлюстравання відарысаў

Autosize

Пры значэнні True памер кампанента будзе аўтаматычна падганяцца пад памер змешчанага ў яго малюнка

Stretch

Пры значэнні True малюнак будзе займаць увесь кампанент. Пры гэтым магчыма скажэнне відарыса

Center

Пры значэнні True малюнак будзе адцэнтраваны адносна кампанента

Transparent

Значэнне True паказвае, што фон відарыса становіцца празрыстым. Гэта можна выкарыстоўваць для накладання відарысаў адзін на адзін (дзейнічае толькі для файлаў .bmp)

Proportional

Значэнне True паказвае, што пры змяненні памераў відарыса будуць захоўвацца прапорцыі

Прыклад 4.3. Форма на этапе канструявання:

Апрацоўшчык падзеі OnClick для Button1.

procedure TForm1.Button1Click(Sender: TObject);
begin
   Image2.Top := 220;
   Image2.Left := Random(300);
   Image2.Visible := True;
end;

Дадатак у час работы:

Да націскання на кнопку:

Пасля націскання на кнопку:

Паколькі гарызантальнае становішча мядзведзя задаецца выпадковым чынам, то пры кожным націсканні на кнопку мядзведзь будзе прарысаваны ў новым месцы.

4.2. Пабудова графікаў функцый

Некаторыя кампаненты ў Delphi, такія як форма, кампанент Image і інш., маюць уласцівасць Canvas (канва, палатно). Канва ўяўляе сабой вобласць, на якой можна маляваць ці выводзіць на яе растравыя відарысы. Сістэма каардынат у канвы такая ж, як і для кожнага кампанента ў Delphi — пункт з каардынатамі (0, 0), змешчаная ў верхнім левам вугле, вось ОY накіравана ўніз. Кожны пункт канвы мае каардынаты X і Y. Каардынаты мераюцца ў пікселях. Найважнейшая ўласцівасць пікселя — яго колер. Колер пікселя канвы вызначаецца значэннем уласцівасці Pixels. Гэта ўласцівасць уяўляе сабой двухвымерны масіў, у якім захоўваецца колер кожнага пікселя. Для задання колеру ў Delphi можна выкарыстаць некалькі спосабаў (прыклад 4.4).

Клас TCanvas змяшчае вялікую колькасць уласцівасцей і метадаў, якія дазваляюць будаваць відарысы. Шмат якія з метадаў канвы супадаюць з працэдурамі, што выкарыстоўваліся ў бібліятэцы GraphABC асяроддзя праграміравання PascalABC.Net Апісанне гэтых метадаў прыведзена ў дадатку.

Прыклад 4.5. Стварыць праект, у якім пабудаваць графік функцыі y = xsinx на прамежку, зададзеным карыстальнікам.

Этапы выканання задання 

  1. Змясціць на форму кампаненты: Image, два кампаненты Label, два кампаненты Edit і кампанент Button.
  2. Змяніць уласцівасці Caption у кампанентаў Label1, Label2 на x0 і xn адпаведна.
  3. Змяніць уласцівасці Text у кампанентаў Edit1 і Edit2 на -20 і 20 адпаведна.
  4. Змяніць уласцівасці Caption у кампанента Button1 на «Пабудаваць графік».
  5. Напісаць апрацоўшчык падзеі OnClick для кампанента Button1, у якім графік функцыі будаваць па пунктах.

5.1. Намаляваць восі каардынат у выглядзе дзвюх перпендыкулярных ліній, перакрыжаваных у цэнтры кампанента Image.
5.2. Колькасць пунктаў, якія ўтвараюць графік функцыі, павінен быць не меншай за  10000 (n = 10000 ),  каб атрымаць бачнасць суцэльнай лініі.
5.3. Шаг змянення значэння x вызначаецца як  
5.4. Пры пабудове трэба ўлічваць маштаб: шырыня кампанента Image павінна адпавядаць даўжыні зададзенага прамежку. Тады маштабны каэфіцыент можна разлічыць па формуле 
5.5. Паколькі змяшчэнне восей каардынат на экране не супадае са змяшчэннем восей, прынятым у матэматыцы, то трэба ператварыць каардынаты: пункту (0; 0) павінны адпавядаць пункт у цэнтры кампанента Image. Для гэтага атрыманае значэнне x неабходна павялічыць на значэнне  cx = Image1.Widt div2, а значэнне у на cy = Image1.Height div2. Паколькі вось Y накіравана ўніз, а не ўверх, то значэнне y неабходна змяніць, памяняўшы знак на процілеглы. На канве будзе зафарбоўвацца пункт з каардынатамі ( xekr = x · k + cx,  yekr = –y · k + cy).
5.6. Неабходна ўлічваць, што пры вылічэнні значэння x і y будуць рэчыўнымі, а значэнні каардынат на канве могуць быць толькі цэлымі. Таму перад прарысоўкай пункта неабходна ператварыць рэчаісныя лікі ў цэлыя з дапамогай функцыі trunc.

Калі дадатку, які працуе, змяніць канцы прамежку, то графік будзе прарысаваны па-над ужо наяўным (прыклад 4.6). Каб пазбегнуць такой сітуацыі, перад пабудовай графіка неабходна ачысціць кампанент. Для гэтага можна выкарыстоўваць каманду:

  Image1.Picture := Nil;

Прыклад 4.4. Спосабы задання колеру ў  Delphi:

  1. Заданне колеру з дапамогай канстант. Значэнні канстантаў пачынаюцца на спалучэнне літар cl. Далей можа ісці імя колеру (напрыклад, clSkyBlue — нябесна-сіні, clRed — чырвоны) ці элементаў Windows, колер якіх залежыць ад настроек карыстальніка (clBtnFace — колер паверхні кнопкі, clActivCaption — колер радка загалоўка актыўнага акна). Спіс магчымых значэнняў можна паглядзець у інспектары аб'ектаў у любога кампанента, які валодае ўласцівасцю Color, ці паглядзець у дадатку.
  2. Заданне колеру з дапамогай шаснаццацярычных лікаў. Пары лічбаў шаснаццацярычнага ліку задаюць інтэнсіўнасць сіняга, зялёнага і чырвонага колераў адпаведна. Напрыклад, $FF0000 — сіні колер, $00FF00 — зялёны колер, $000000 — чорны колер, $FFFFFF — белы колер.
  3. Шаснаццацярычныя лікі можна перавесці ў дзесятковую сістэму лічэння і карыстацца гэтымі значэннямі.
  4. Для задання колеру можна выкарыстаць функцыю RGB, тры параметры якой задаюць інтэнсіўнасць чырвонага, сіняга і зялёнага колераў адпаведна. Значэнні параметраў могуць змяняцца ад 0 да 255. 

Прыклад 4.5. Форма на этапе канструявання:

Апрацоўшчык падзеі OnClick для кампанента Button1

procedure TForm1.Button1Click(Sender: TObject);
var x0, xn, x, y, h, k :real;
    x_ekr, y_ekr, c_x, c_y, n, i :integer;
 begin
  // колькасць пунктаў
  n := 10000;
  // канцы прамежка
  x0 := StrToFloat(Edit1.Text);
  xn := StrToFloat(Edit2.Text);
  // цэнтр вобласці пабудовы
  c_x := Image1.Width div 2;
  c_y := Image1.Height div 2;
  // маштабны каэфіцыент
  k := Image1.Width / (xn - x0);
  // шаг
  h := (xn - x0) / n;
  // восі
  Image1.Canvas.MoveTo(0, c_y);
  Image1.Canvas.LineTo(2*c_x, c_y);
  Image1.Canvas.MoveTo(c_x, 0);
  Image1.Canvas.LineTo(c_x, 2*c_y);
  x := x0;
  for i := 1 to n do
  begin
    y := x * sin(x);
    //ператварэнне каардынат
    x_ekr := trunc(x * k) + c_x;
    y_ekr := trunc(-y * k) + c_y;
    //пабудова  пункта сінім колерам
    Image1.Canvas.Pixels[x_ekr, y_ekr] := clBlue;
    //наступны пункт
    x := x + h;
  end;
end;

 Дадатак у час работы:

Прыклад 4.6. Змяненне пачатковых значэнняў канцоў прамежку:

Канстанта Nil мае значэнне «нічога». Фармальна — гэта значэнне паказальніка, які не спасылаецца ні на які аб'ект.

4.3. Пабудова дыяграм

Асноўныя прынцыпы пабудовы гістаграм і кругавых дыяграм разбіраліся ў 10-м класе (прыклады 4.6 і 6.8). Выкарыстоўваючы аналагічныя метады канвы, дыяграмы можна пабудаваць у Delphi.

Прыклад 4.7. Стварыць праект, у якім пабудаваць гістаграму па даных масіву з n элементаў (n = 10). Масіў апісаць з канстантнымі данымі ці даныя ў масіў дабавіць выпадковым чынам.

1. Змясціць на форму кампаненты: відарыс (Image) і два кампаненты Button.

2. Змяніць уласцівасці Caption у кампанента Button1 на «Дыяграма з канстантнымі данымі».

3. Змяніць уласцівасці Caption у кампанента Button2 на «Дыяграма з выпадковымі данымі».

4. Напісаць апрацоўшчык падзеі OnClick для кампанента Button1, у якім дыяграма будуецца з дапамогай прамавугольнікаў.

4.1. Знайсці максімальны элемент у масіве — max.
4.2. Разлічыць маштабны каэфіцыент: .
4.3. У цыкле будаваць n прамавугольнікаў аднолькавай шырыні. Шырыня прамавугольніка   .

5. Апрацоўшчык для кампанента Button2 будзе адрознівацца ад апрацоўшчыка для кампанента Button1 толькі спосабам атрымання элементаў масіву.

5.1.  Масіў павінен быць апісаны ў раздзеле
var a: array[1..10] of integer;
5.2. Элементы масіву са значэннямі ад 20 да 100 можна атрымліваць наступным чынам:

randomize;
for i := 1 to n do
   a[i] := random(80) + 20;

Прыклад 4.7. Форма на этапе канструявання:

Апрацоўшчык падзеі OnClick для кампанента Button1:

procedure
TForm1.Button1Click(Sender: TObject);
const a: array[1..10] of integer =
 (10, 14, 22, 75, 63, 12, 37, 61, 42, 48);
     n = 10;
var max, x, y1, y2, h, i, cr, cg, cb : integer;
    m :real;
begin
  max := a[1];
  for i := 2 to n do
    if a[i] > max then
      max := a[i];
  h:= trunc(Image1.Width/(2*n+1));
  m:= Image1.Height / max;
  x:= h;
  for i := 1 to n do
  begin
    cr := random(256);
    cg := random(256);
    cb := random(256);
    Image1.Canvas.Brush.Color := RGB(cr, cg, cb);
    y1 := Image1.Height;
    y2 := y1 - trunc(a[i] * m);
    Image1.Canvas.Rectangle(x, y1, x+h, y2);
    x := x + 2 * h;
  end;
end;

Дадатак у час работы:

4.4. Анімацыя

Эфект анімацыі дасягаецца за кошт таго, што перад поглядам карыстальніка адбываецца хуткая змена відарысаў. Кожны з кадраў анімацыі застаецца на экране вельмі невялікі прамежак часу.

Для замеру інтэрвалаў часу можна выкарыстоўваць кампанент таймер. Кампанент Timer змешчаны на панэлі System і паказаны ў выглядзе . Кампанент Timer, змешчаны на форму, атрымлівае імя — TimerN, дзе N — нумар 1, 2, 3… (прыклад 4.8).

Некаторыя ўласцівасці кампанента Timer прыведзены ў табліцы (прыклад 4.9).

Кампанент мае адзіны апрацоўшчык —  OnTimer, у якім апісваюцца дзеянні, якія адбываюцца па заканчэнні інтэрвалу спрацоўвання таймера.

Прыклад 4.10. Стварыць праект, у якім самалёт будзе пралятаць над горадам.

Этапы выканання задання

  1. Змясціць на форму два кампаненты Image, кампаненты Timer і Button.
  2. Загрузіць малюнак горада ў кампанент Image1.
  3. Напісаць апрацоўшчык падзеі OnCreate для формы, і апісаць пачатковае становішча самалёта, паказаўшы каардынаты верхняга левага вугла Image2 за межамі формы. Загрузіць у Image2 малюнак з файла (файл павінен быць размешчаны ў папцы ...\Win32\Debug).
  4. Змяніць ўласцівасці Caption у кампанента Button1 на «Паляцелi!».
  5. Устанавіць значэнне False у ўласцівасці таймера Enabled у інспектары аб'ектаў.
  6. Устанавіць у інспектары аб'ектаў час спрацоўвання таймера роўным 10.
  7. Напісаць апрацоўшчык падзеі OnClick для кампанента Button1, у якім запусціць таймер.
  8. У інспектары аб'ектаў устанавіць празрыстасць для кампанента Image2 (Transparent = True).
  9. Напісаць апрацоўшчык падзеі OnTimer, і мяняць у ім значэнне ўласцівасці Left у кампанента Image2. Калі самалёт вылецеў за мяжу, то вярнуць яго ў пачатковае становішча.
Калі пры працы дадатку ўзнікае мігаценне, то неабходна ўстанавіць значэнне True для ўласцівасцяў формы AlphaBlend і DoubleBuffered.

Прыклад 4.8. Кампанент таймер на форме:

Кампанент Timer не бачны пры рабоце дадатку, таму месца яго змяшчэння на форме не мае значэння.

Прыклад 4.9. Некаторыя ўласцівасці кампанента таймер.

Уласцівасць

Прызначэнне

Enabled

Значэнне True абазначае, што таймер запушчаны

Interval

Час у мілісекундах, праз які адбываецца спрацоўванне таймера і выклік апрацоўшчыка OnTimer

Прыклад 4.10. Форма на этапе канструявання:

Апрацоўшчык падзеі OnCreate для формы:

procedure
TForm1.FormCreate(Sender: TObject);
begin


Image2.Picture.LoadFromFile ('plane.bmp');

   x := -Image2.Width;

   y := 20;

   Image2.Left := x;

   Image2.Top := y;

end;

Апрацоўшчык падзеі OnClick для кампанента Button1:

procedure TForm1.Button1Click(Sender: TObject);
begin
   Timer1.Enabled := True;
end;

Апрацоўшчык падзеі OnTimer для кампанента Timer1:

procedure TForm1.Timer1Timer(Sender: TObject);
begin
   x := x + 1;
   Image2.Left := x;
   if Image2.Left >
Image1.Width + Image2.Width
then
      x := -Image2.Width;
end;

Дадатак у час работы:

Пытанні да параграфа

1. Які кампанент выкарыстоўваецца для размяшчэння відарысаў?

2. Якая ўласцівасць дазваляе загрузіць гатовы відарыс у кампанент Image?

3. З дапамогай якой уласцівасці можна ўстанавіць празрысты фон для відарыса?

4. Што такое канва?

5. Які метад канвы дазваляе зафарбаваць піксель?

6. Які кампанент выкарыстоўваецца для адліку часу?

Практыкаванні

 

1. Дабаўце ў праект з прыкладу 4.4. яшчэ адну жывёлу (напрыклад, вавёрку). Для змяшчэння вавёркі дабавіць яшчэ адну кнопку. Месцазнаходжанне вызначаць выпадковым чынам у верхавіне якога-небудзь дрэва.

2. Дабаўце ў праект 4.5 наступныя магчымасці.

2.1. Восі каардынат са стрэлкамі і подпісамі.
2.2. Адзінкавы адрэзак на восі  X.
2.3. Графік функцыі y = 0.3x2 – 4x + 2, у той жа сістэме каардынат, чырвоным колерам.

3. Змяніце праект з прыкладу 4.8 так, каб будавалася лінейная дыяграма (слупкі змешчаны гарызантальна).

4*. Змяніце праект з прыкладу 4.8 так, каб значэнні ў масіў можна было ўводзіць. Для гэтага неабходна лікі запісваць у кампанент Edit, счытваць радок з лікаў і прабелаў, вылучаць лічбы і ператвараць іх у лікавыя значэнні.

5. Змяніце праект прыкладу 4.10. Замяніць самалёт на верталёт і дабавіць кнопку «Стоп», пры націсканні на якую верталёт спыніцца. *Пасля спынення верталёта павінен з'явіцца парашут з грузам, які апусціцца ўніз.

6*. Стварыце анімацыю руху Месяца вакол Зямлі. Для разліку каардынат верхняга левага вугла Image2, які змяшчае Месяц, можна выкарыстаць параметрычнае ўраўненне акружнасці:  x = Rsin(t), y = Rcos(t), дзе R — радыус, а t — параметр, што змяняе сваё значэнне ад 0 да 2π.