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

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

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

Оглавление

13.1. Элемент кіравання для ўстаўкі малюнка (Image)

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

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

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

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

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

Прыклад 13.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.

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

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

Уласцівасць

Прызначэнне

Picture

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

Autosize

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

Stretch

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

Center

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

Transparent

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

Proportional

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

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

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

void __fastcall TForm1::Button1Click(TObject *Sender)

{

  Image2 -> Top = 370;

  Image2 -> Left = rand() % 350 + 100;

  Image2 -> Visible = true;

}

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

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

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

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

13.2. Метады канвы

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

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

Разгледзім метад FloodFill, які дазваляе вырабляць заліванне абмежаванай вобласці на канве. Першыя два параметры метаду (x, y) — каардынаты пункту, якi ляжыць унутры вобласці. Мяжа вобласці залівання вызначаецца спалучэннем параметраў Color і FillStyle. Калі для параметру Fillstyle вызначыць значэнне fsBorder, то будзе зафарбаваная вобласць, абмежаваная колерам Color (прыклад 13.5). Калі для параметру Fillstyle вызначыць значэнне fsSurface, то колер Color заменіцца, а іншыя колеры ўнутры вобласці застануцца нязменнымі (прыклад 13.6). Колер і стыль, якім будзе вырабляцца заліўка, вызначаюцца ўласцівасцямі Brush.

Прыклад 13.7. Стварыць праект «Раскраска». У праекце рэалізаваць наступныя магчымасці: загрузка графічнага файла, заліўка абмежаванай вобласці па кліку мышы, захаванне змененага файла.

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

  1. Змясціць на форму дзве кнопкі, кампанент Image, кампанент Label, дыялогі: ColorDialog, OpenPictureDialog і SavePictureDialog.
  2. Для кнопкі Button1 змяніць уласцівасць Caption — Загрузить файл.
  3. Для кнопкі Button2 змяніць уласцівасць Caption — Сохранить файл.
  4. Ачысціць уласцівасць Caption у кампанента Label. Метка будзе выкарыстоўвацца для вываду імя файла. Кампанент размясціць у верхнім левым вуглу формы.
  5. Напісаць апрацоўшчык падзеі OnClick для кампанента Button1.
  6. Напісаць апрацоўшчык падзеі OnClick для кампанента Button2.
  7. Напісаць апрацоўшчык падзеі onMouseDown для кампанента Image1.

7.1.Падзея OnMouseDown вяртае каардынаты пункту, у якім карыстальнік клікнуў мышшу. Гэтыя каардынаты можна выкарыстоўваць для метаду FloodFill.

7.2. Выбар колеру залівання павінен здзяйсняцца з выкарыстаннем стандартнага дыялогу ColorDialog.

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

Малюнак для размалёўкі змясціць у папку \Win32\Debug. У гэтай папцы захоўваецца адкампіляваны файл праекта. Калі ў падзеі OnFormCreate прапісаць каманды, якія вызначаюць гэтую папку як бягучую (гл. прыклад 7.12), то пры націску на кнопку Загрузить файл, малюнак будзе бачны адразу.

Малюнак захоўваецца ў фармаце BMP. Калі ва ўласцівасцях кампанента SavePictureDialog пашырэнне не прапісана, то пры захаванні файла, карыстальнік павінен дапісаць яго самастойна.

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

Прыклад 13.8. Дапоўніць праект «Раскраска». Дадаць кнопкі «Нарисовать трубу» і «Облако». Рэалізаваць адпаведныя апрацоўшчыкі падзей.

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

  1. Дадаць на форму дзве кнопкі.
  2. Для кнопкі Button3 змяніць уласцівасць Caption — «Нарисовать трубу».
  3. Для кнопкі Button4 змяніць уласцівасць Caption — «Облако».
  4. Напісаць апрацоўшчык падзеі OnClick для кампанента Button3.
    4.1. Для малявання мяжы трубы прымяніць метад LineTo.
    4.2. Для залівання трубы можна выкарыстоўваць стыль bsCross «у клетку» у метаду Brush.
    4.3. Пасля залівання неабходна вярнуць значэнне стылю bsSolid, усталяванае па змоўчанні.

5. Напісаць апрацоўшчык падзеі OnClick для кампанента Button4.

5.1. Для малявання воблака дастаткова намаляваць тры перасякальных авала.
5.2. У авалаў трэба прыбраць мяжу. Для гэтага трэба ўсталяваць стыль psClear для Pen.
5.3. Пасля малявання неабходна вярнуць значэнне стылю, усталяванае па змоўчанні — psSolid.

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

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

Прыклад 13.5. Заліўка чырвоным колерам вобласці, абмежаванай лініяй чорнага колеру:

Image1 -> Canvas -> Brush -> 

Color = clRed;

Image1 -> Canvas -> FloodFill

(50, 50, clBlack, fsBorder)

Прыклад 13.6. Перафарбоўка белага колеру ў чырвоны:

Image1 -> Canvas -> Brush -> 

Color = clRed;

Image1 -> Canvas -> FloodFill

(200, 50, clWhite, fsSurface);

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

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

void __fastcall TForm1::Button1Click
(TObject *Sender)

{

  if (OpenPictureDialog1 -> Execute()) {

    String S = OpenPictureDialog1 ->

    FileName;

    Label1 -> Caption = S;

    Image1 -> Picture -> LoadFromFile(S);

  }

}

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

void __fastcall TForm1::Button2Click
                (TObject *Sender)

{

  if (SavePictureDialog1 -> Execute()){

    Image1 -> Picture -> SaveToFile (SavePictureDialog1 -> FileName);

  }

}

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

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

{

  TColor c = Image1 -> Canvas -> Pixels[X][Y];

  if (ColorDialog1 -> Execute()){

    Image1 -> Canvas -> Brush ->

    Style = bsSolid;

    Image1 -> Canvas -> Brush ->

    Color = ColorDialog1 -> Color;

span lang="EN-US" style="font-family: 'Courier New'; color: black; font-size: medium;">    Image1 -> Canvas ->

    FloodFill(X, Y, c, fsSurface);

  }

}

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

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

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

void __fastcall TForm1::

Button3Click(TObject *Sender)

{

  Image1 -> Canvas -> Pen -> Width = 5;

  Image1 -> Canvas -> MoveTo(570, 232);

  Image1 -> Canvas -> LineTo(570, 130);

  Image1 -> Canvas -> LineTo(510, 130);

  Image1 -> Canvas -> LineTo(510, 180);

  Image1 -> Canvas -> Brush ->

          Color = clRed;

  Image1 -> Canvas -> Brush ->

          Style = bsCross;

  Image1 -> Canvas -> FloodFill

  (550, 150, clBlack, fsBorder);

  Image1 -> Canvas -> Brush ->

          Style = bsSolid;

}

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

void __fastcall TForm1::

Button4Click(TObject *Sender)

{

  Image1 -> Canvas -> Pen -> 

            Style = psClear;

  Image1 -> Canvas -> Brush ->

          Color = clSkyBlue;

  Image1 -> Canvas -> 

    Ellipse(30, 30, 190, 85);

  Image1 -> Canvas -> 

    Ellipse(70, 20, 240, 70);

  Image1 -> Canvas -> 

    Ellipse(80, 40, 220, 100);

  Image1 -> Canvas -> Pen -> 

            Style = psSolid;

}

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

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

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

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

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

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

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

6. Як працуе метад FloodFill?

7. У чым розніца ў выкарыстаннi параметраў fsSurface i fsBorder для метаду FloodFill?

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

   

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

2. Дадайце ў праект 13.7 наступнае:

  1. Праверце, як будзе працаваць праграма, калі ў падзеях для Button3 і Button4 прыбраць у канцы аднаўленне стылю Brush і Pen.
  2. Дадайце яшчэ адну кнопку, пры націску на якую на малюнку з'явіцца які-небудзь элемент (ганак, аканіцы, дрэва і г. д.). Напішыце адпаведны апрацоўшчык падзеі. Для вызначэння каардынатаў пікселяў можна адкрыць малюнак у Paint.

3. Прыдумайце свой уласны сюжэт рэалізацыі размалёўкі па аналогіі з праектам 13.7.