Печатать книгуПечатать книгу

§ 14. Інтэрактыўная графіка

Сайт: Профильное обучение
Курс: Інфарматыка. 11 клас (Павышаны ўзровень)
Книга: § 14. Інтэрактыўная графіка
Напечатано:: Гость
Дата: Суббота, 19 Апрель 2025, 12:38

Оглавление

14.1. Паняцце аб інтэрактыўнай графіцы

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

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

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

Пры стварэнні інтэрактыўнай графікі карыстальнік можа выконваць наступныя дзеянні:

  • заданне значэнняў параметраў для формы, памеру, колеру малюнка;
  • змяненне маштабу малюнка;
  • павароты і зрухі малюнка;
  • увод і рэдагаванне асобных элементаў малюнка.

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

У асяроддзі CBuilder выбар каманд можна здзяйсняць з дапамогай элементаў кіравання: кнопак, тэкставых палёў, пераключальнікаў і г. д.

Прыклад 14.1. Пасіўная графіка — графік функцыі y = x2sin(x) на прамежку
[-10; 10].

Інтэрактыўнае кіраванне працэсам пабудовы графіка функцыі[1]:

Вынік:


[1] https://math.semestr.ru/math/plot.php

Прыкладам інтэрактыўнай графікі з'яўляецца праект[1] «Набярыце Месяц (Dial A Moon)», дзе можна ўказаць дату і час і ўбачыць, у якой фазе знаходзіцца месяц. Падборка цікавых праектаў інтэрактыўнай графікі сабрана на сайце «Прафесійны канструктар лэндынгаў для бізнесу».[2] (Лэндынг — аўтаномная інтэрнэт-старонка, на якую патэнцыйны кліент трапляе пасля кліку па рэкламнай аб'яве або ў выніку пошуку).

Паводле даследаванняў, чалавек запамінае каля 10% інфармацыі, якую чуе, 20% ад прачытанага. Людзі запамінаюць каля 80% таго, што бачаць і робяць. У гэтым выпадку аб'ядноўваюцца два канала ўспрымання інфармацыі: візуальны і кінэстэтычны (адчуванні становішча і руху органаў цела). Інтэрактыўная інфаграфіка прымушае чалавека здзяйсняць якія-небудзь мэтанакіраваныя дзеянні падчас чытання, што значна палягчае перадачу і засваенне інфармацыі.

[1] https://svs.gsfc.nasa.gov/cgi-bin/details.cgi?aid=4236

[2 https://lpgenerator.ru/blog/2017/11/30/luchshie-primery-ispolzovaniya-interaktivnoj-infografiki-na-lendingah/

14.2. Пабудова малюнка ў залежнасці ад памеру і становішча

Прыклад 14.2. Стварыць праект, у якім будзе будавацца малюнак «сердечка». Карыстальнік задае вышыню і шырыню малюнка. Месцазнаходжанне малюнка будзе вызначацца клікам мышы (у пункце, дзе клікнулі, павінен размяшчацца цэнтр малюнка). Калі малюнак цалкам не змяшчаецца ў вобласці малявання, то варта вывесці адпаведнае паведамленне.

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

  1. Размясціць на форме кампаненты: Image і два кампаненты LabeledEdit для ўводу памераў малюнка.
  2. Напісаць апрацоўшчык падзеі OnMouseDown для кампанента Image1.
    2.1. Па кліку мышы малюем «сердечко».
    2.2. Для малявання аднаго відарыса апішам функцыю heart. Гэтая функцыя павінна стаць метадам формы, таму яе аб'яву трэба дадаць ў загалоўкавы файл. Для таго каб функцыя была вызначана ў вобласці бачнасці класа формы перад яе загалоўкам неабходна прапісаць void __fastcall TForm1::.
    2.3. Малюнак «сердечка» можна разбіць на часткі: роўнабаковы трохвугольнік і два паўкруга.
    2.3.1. Для пабудовы трохвугольніка будзем выкарыстоўваць метад канвы Polygon. У гэтага метаду два параметры — масіў пунктаў і нумар пункту ў масіве, які трэба злучыць з нулявым. Масіў з трох пунктаў можна апісаць наступным чынам:
    TPoint t[3] = {{x4,y4},{x6,y6},{x3,y3}};
    2.3.2. Для пабудовы паўкруга будзем выкарыстоўваць метад канвы Pie.
    2.4. Усе каардынаты для малявання разлічваюцца адносна цэнтральнай кропкі і памераў малюнка, уведзеных карыстальнікам.
    2.5. Малюнак будзем будаваць з чырвонай мяжой і зальём яго чырвоным колерам.
  3. Праверыць, ці змесціцца малюнак у вобласць малявання, можна лічачы, што прамавугольнік, вызначаны дыяганаллю (x1; y1) — (x2; y2), павінен змяшчацца ў кампанент Image1.

Прыклад 14.3. Стварыць праект, у якім можна будзе выбіраць, як размяшчаць «сердечки»:

а) адно «сердечко» у выпадковым месцы Image;
б) «сердечки» размешчаны па адным у шэраг уздоўж левага краю Image;
в) «сердечки» раўнамерна запаўняюць увесь Image.

Выбар неабходна здзяйсняць з дапамогай адпаведных кнопак.

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

  1. Размясціць на форме: кампанент Image і тры кнопкі.
  2. Будзем выкарыстоўваць функцыю малявання «сердечка» з прыкладу 14.2.
  3. Напісаць апрацоўшчык падзеі OnClick для кампанента Button1. Малюем адно «сердечко». Памер і месцазнаходжанне вызначаем выпадковым чынам.
  4. Напісаць апрацоўшчык падзеі OnClick для кампанента Button2. У цыкле мяняем вертыкальную каардынату, якая вызначае месцазнаходжанне  «сердечка». Памер — 30 на 30 пікселяў. Цыкл выконваецца, пакуль вертыкальная каардыната менш вышыні Image1.
  5. Напісаць апрацоўшчык падзеі OnClick для кампанента Button3. Выкарыстоўваем два ўкладзеных цыклы, у якіх будуць мяняцца гарызантальная і вертыкальная каардынаты, якія вызначаюць месцазнаходжанне «сердечка». Памер — 30 на 30 пікселяў. Цыклы выконваюцца, пакуль каардынаты менш памераў Image1.
  6. У пачатку кожнага апрацоўшчыка неабходна чысціць Image1 ад папярэдніх малюнкаў.

Прыклад 14.2. Даданне метаду heart у загалоўкавы файл формы:

Разлік элементаў малюнка:

Значэнні ўводзяцца карыстальнікам, значэнне d = w/2. Значэнні x0, y0 вызначаюцца клікам мышы, астатнія каардынаты вылічаюцца па наступных формулах:

x1 = x0 – w/2; y1 = y0 – h/2;
x2 = x0 + w/2; y2 = y0 + h/2;
x3 = x1; y3 = y1 + d/2;
x4 = x2; y4 = y3;
x5 = x3 + d; y5 = y3;
x6 = x5; y6 = y2;

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

void __fastcall TForm1::heart(int x0, int y0, 
                              int w, int h)

{

  Image1 -> Canvas -> Pen -> Color = clRed;

  Image1 -> Canvas -> Brush -> Color = clRed;

  int d = w / 2;

  int x1 = x0 - w/2, y1 = y0 - h/2;

  int x2 = x0 + w/2, y2 = y0 + h/2;

  int x3 = x1, y3 = y1 + d/2;

  int x4 = x2, y4 = y3;

  int x5 = x3 + d, y5 = y3;

  int x6 = x5, y6 = y2;

  Image1 -> Canvas -> Pie(x1, y1, x5, y5 + d / 2, x5, y5, x3, y3);

  Image1 ->Canvas -> Pie(x5, y5 - d / 2, x4, y4 + d / 2, x4, y4, x5, y5);

  TPoint t[3] = {{x4,y4},{x6,y6},{x3,y3}};

  Image1 ->Canvas ->Polygon(t, 2);

}

//---------------------------------

void __fastcall TForm1::Image1MouseDown
(TObject *Sender, TMouseButton Button, 
TShiftState Shift,   int X, int Y)

{

  int width = StrToInt(LabeledEdit1 ->Text);

  int height = StrToInt(LabeledEdit2 ->Text);

  if (X - width / 2 < 0 || Y - height / 2 < 0 ||

     X + width / 2 > Image1 -> Width ||

     Y + height / 2 > Image1 -> Height)

    ShowMessage("Не поместится");

  else

    heart(X, Y, width, height);

}

Дадатак у час працы:

 Прыклад 14.3. Апрацоўшчыкі падзей для кнопак:

void __fastcall TForm1::Button1Click
                (TObject *Sender)

{

  Image1 -> Canvas -> Pen -> Color = clWhite;

  Image1 -> Canvas -> Brush -> Color = clWhite;

  Image1 -> Canvas -> Rectangle(0, 0,

      Image1 -> Width, Image1 -> Height);

  int width = rand() % 300 + 30;

  int height = rand() % 300 + width;

  int x = rand() %(Image1 ->Width - 2 * width) + width / 2;

  int y = rand() %(Image1 ->Height - 2 * height) + height / 2;

  heart(x, y, width, height);

}

//---------------------------------

void __fastcall TForm1::Button2Click
               (TObject *Sender)

{

  Image1 -> Canvas -> Pen -> Color = clWhite;

  Image1 -> Canvas -> Brush -> Color = clWhite;

  Image1 -> Canvas -> Rectangle(0, 0,

      Image1 -> Width, Image1 -> Height);

  for (int y = 16; y < Image1 -> Height - 16; y += 45)

    heart(16, y, 30, 30);

}

//---------------------------------

void __fastcall TForm1::Button3Click
                (TObject *Sender)

{

  Image1 -> Canvas -> Pen -> Color = clWhite;

  Image1 -> Canvas -> Brush -> Color = clWhite;

  Image1 -> Canvas -> Rectangle(0, 0,

      Image1 -> Width, Image1 -> Height);

  for (int x = 16; x < Image1 -> Width - 16; x += 45)

    for (int y = 16; y < Image1 -> Height - 16; y += 45)

      heart(x, y, 30, 30);

}

Дадатак у час працы:

14.3. Бітавыя вобразы

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

Сфармаваць бітавы вобраз можна шляхам загрузкі з bmp-файла або шляхам капіравання фрагмента з іншага бітавага вобраза, у тым ліку і з паверхні кампанента Image.

У праграме бітавы вобраз — гэта аб'ект тыпу TBitmap. Клас TBitmap, вызначаны ў CBuilder як Graphic:: TBitmap. Гэты клас падтрымлівае як растравыя малюнкі ў выглядзе масіва пікселяў, так і малюнкі ў фармаце BMP. Некаторыя ўласцівасці і метады аб'екта TBitmap прыведзены ў прыкладзе 14.4.

Апісанне бітавай матрыцы з імем Pict здзяйсняецца наступным чынам:

Graphics::TBitmap *Pict = new Graphics::TBitmap();

— паказальнік на месца ў памяці, дзе будзе размешчаны аб'ект, які захоўвае малюнак.

Для вываду бітавага вобраза на канву можна скарыстацца метадам Draw (х, y, Pict). Параметры x, y вызначаюць месцазнаходжанне верхняга левага вугла малюнка, які захоўваецца ў пераменнай Pict (аб'ект тыпу TBitmap).

Прыклад 14.5. Стварыць праект, у якім па кліку мышы па-над фонавым малюнкам лесу неабходна намаляваць карцінкі звяроў, якія захоўваюцца ў файлах. Для карэктнай працы ўсе малюнкі павінны быць у BMP фармаце. Малюнкі варта захаваць у папцы Win32\Debug. Малюнкі, на якіх намаляваныя звяры, павінны мець аднастайны фон[1].

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

  1. Змясціць на форму кампанент Image.
  2. У падзеі OnCreat для формы загрузіць фонавы малюнак у кампанент Image1. Малюнак неабходна загружаць у сваіх рэальных памерах (уласцівасць Scratch = false). У адваротным выпадку пры кліку па малюнку каардынаты пункту не будуць адпавядаць рэальнаму малюнку.
  3. Напісаць апрацоўшчык падзеі OnMouseDown для кампанента Image.

3.1. Стварыць аб'ект Pict для захоўвання бітавага вобраза;
3.2. З дапамогай дыялогу OpenPictureDialog1 загрузіць малюнак у памяць.
3.3. Устанавіць празрысты колер для фону.
3.4. Вывесці малюнак метадам Draw.

Бітавыя вобразы могуць выкарыстоўвацца для залівання фігур, намаляваных на канве. Для гэтага ўласцівасці Brush -> Bitmap трэба прысвоіць значэнне бітавага вобраза.

Image1->Canvas->Brush->Bitmap = Pict;

Пасля гэтай каманды ўсе фігуры, для якіх вызначаны пэндзаль, будуць заліты растравым малюнкам, які захоўваецца ў бітавым вобразе Pict.

Калі памеры бітавага ладу менш, чым вобласць заліўкі, то вобласць залівання замяшчаецца малюнкамі, якія захоўваюцца ў бітавай матрыцы. Калі вобласць заліўкі менш, то будзе бачная толькі частка малюнка (прыклад 14.6).

Калі пасля заліўкі растравым малюнкам патрабуецца зноў вярнуцца да заліўкі колерам, то бітавы вобраз павінен быць выдалены з уласцівасці пэндзля. Для гэтага можна скарыстацца камандай:

Image1->Canvas->Brush->Bitmap = NULL;

[1] Пры неабходнасці малюнак трэба папярэдне апрацаваць ў графічным рэдактары.

Выкарыстанне бітавых вобразаў дазваляе маляваць на нябачных віртуальных паверхнях — у літаральным сэнсе ў аператыўнай памяці. Пры вывадзе графічнай інфармацыі атрымоўваецца пазбегнуць эфекту мігцення, які ўзнікае пры непасрэднай мадыфікацыі знешняга выгляду элементаў кіравання на форме. Асноўная перавага выкарыстання бітавых вобразаў — скорасць апрацоўкі і вываду малюнкаў.

Прыклад 14.4. Некаторыя ўласцівасці аб'екта TBitmap.

Уласцівасць

Прызначэнне

Canvas

Вызначае палатно для малюнка бітавага вобраза

Empty

Паказвае, ці змяшчае аб'ект бітавы вобраз

Height

Вышыня малюнка ў пікселях

Transparent

Вызначае, ці павінен малюнак быць «празрыстым»

TransparentColor

Вызначае, які з колераў будзе празрыстым пры маляванні бітавага вобраза

Width

Паказвае шырыню малюнка ў пікселях

Некаторыя метады аб'екта TBitmap.

Метад Assign капіруе малюнак з іншага графічнага аб'екта.

Метады LoadFromFile і SaveToFile выкарыстоўваюцца для чытання малюнка з файла і запісу яго ў файл.

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

Апрацоўшчык падзеі OnCreat.

void __fastcall TForm1::FormCreate(TObject *Sender)

{

  Image1 ->Picture ->LoadFromFile("лес.bmp");

  OpenPictureDialog1 -> InitialDir =

  ExtractFilePath(ParamStr(0));

}

Апрацоўшчык падзеі OnMouseDown.

void __fastcall TForm1::Image1MouseDown
                TObject *Sender, 
                TMouseButton Button, 
                TShiftState Shift, int X, int Y)

{

  if (OpenPictureDialog1 ->Execute()){

    Graphics::TBitmap *Pict = 

    new Graphics::TBitmap();

    Pict ->LoadFromFile

    (OpenPictureDialog1 ->FileName);

    Pict ->Transparent = true;

    Pict ->TransparentColor =

    Pict ->Canvas ->Pixels[0][0];

    Image1 ->Canvas ->Draw(X, Y, Pict);

  }

}

Дадатак у час працы:

Прыклад 14.6. Заліўка з выкарыстаннем бітавых вобразаў:

Код апрацоўшчыка націску кнопкі «Эллипс» (для прамавугольніка аналагічна):

Graphics::TBitmap *Pict = 

  new Graphics::TBitmap();

Pict -> LoadFromFile("розы.bmp");

Image1 -> Canvas-> Brush -> Bitmap = Pict;

Image1 -> Canvas-> Ellipse(10, 10, 500, 350);

Image1 -> Canvas-> Brush -> Bitmap = NULL;

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

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

1. Што разумеюць пад інтэрактыўнай графікай?

2. Якімі параметрамі інтэрактыўнага малюнка карыстальнік можа кіраваць?

3. Якім чынам карыстальнік можа кіраваць інтэрактыўным малюнкам?

4. Што разумеюць пад бітавымі вобразамі?

5. Як апісаць бітавы вобраз?

6. Як выкарыстоўваць бітавы вобраз для заліўкі фігур?

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

  

1. Дадайце ў праект з прыкладу 14.2. пералічаныя магчымасці:

  1. Выбар колеру для малявання «сердечка».
  2. Кнопку «Очистка», якая будзе чысціць вобласць малявання (намаляваць прамавугольнік белага колеру, які супадае па памерах з кампанентам Image).

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

  1. Намаляваць на экране квадрат, з бакамі паралельнымі бакам экрана. Даўжыня боку квадрата ўводзіцца, месцазнаходжанне верхняга левага вугла вызначаецца клікам мышы.
  2. Намаляваць на экране прамавугольную трапецыю. Даўжыні асноў, вышыні і каардынаты верхняга левага вугла трапецыі ўводзяцца. (Трапецыю размясціць так, каб яе асновы былі раўналежныя адной з бакоў экрана.)
  3. Намаляваць на экране два квадрата, з бакамі паралельнымі бакам экрана. Адзін з квадратаў ляжыць у іншым, так што квадраты маюць агульны цэнтр (пункт перасячэння дыяганалей). Даўжыні бакоў квадратаў уводзяцца, цэнтр квадрата вызначаецца клікам мышы.
  4. Намаляваць на экране ромб. Даўжыні дыяганалей ромба ўводзяцца, каардынаты пункту перасячэння дыяганалей вызначаюцца клікам мышы. (Ромб размясціць так, каб яго дыяганалі былі раўналежныя бакам экрана.)
  5. Намаляваць на экране квадрат, з бакамі паралельнымі бакам экрана. Даўжыня боку квадрата і каардынаты верхняга левага вугла ўводзяцца. Апісаць акружнасць вакол квадрата.
  6. Намаляваць на экране трохвугольнік, які зададзены каардынатамі сваіх вяршынь. Правесці медыяны трохвугольніка. Пункт перасячэння медыян вылучыць кантрасным колерам. (Пабудаваць круг радыусу 3.)

3. Дадайце ў праект з прыкладу 14.3. наступны:

  1. Выбар колеру і памеру для малявання «сердечка».
  2. Кампанент CheckBox, з дапамогай якога можна вызначыць, што колер будзе задавацца выпадковым чынам.
  3. Кампаненты CheckBox, з дапамогай якіх можна выбіраць уздоўж якой мяжы Image (злева, справа, зверху, знізу, па дыяганалі) маляваць «сердечки».

4. Змяніце праект прыкладу з 14.3 так, каб маляваліся не «сердечки», а наступныя фігуркі. Прадумайце кіраванне вываду малюнка на экран.

  1. квадрацікі;
  2. роўнастаронні трохвугольнікі;
  3. грыбочкі: 
  4. пірамідкі: 
  5. флажкі: 
  6. прапануйце свае фігуркі.

5. Дадайце магчымасць заліўкі хаты растравым малюнкам (змяніць праект з прыкладу 13.8).

Прыкладны выгляд формы

Клік мышшу па малюнку, калі CheckBox не актыўны

Клік мышшу па малюнку, калі CheckBox актыўны

Вынік зафарбоўкі