borland cpp builder cw4

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 1
______________________________________________________________________

PROGRAMOWANIE OBIEKTOWE

ĆWICZENIE 4

C++ BUILDER 6.0 PE

•

Projektowanie prostego edytora grafiki

•

Obiekt TPanel

•

Obiekt TButton

•

Obiekt TScrollBar

•

Obiekt TColorDialog

•

Obiekt TLabel

•

Obiekt TImage

•

Obiekt TSaveDialog

•

Obiekt TOpenDialog

•

Obiekt TShape

•

Zdarzenia: OnMouseUp, OnMoseDown, OnMouseMove

•

Metoda FormCreate

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Wstęp

Wykonaj prostą aplikację, która będzie służyła do edycji map bitowych

o rozdzielczości nie większej od 400 x 800 pikseli.

Aplikacja musi umożliwiać użytkownikowi rysowanie, kasowanie rysunku,

wybór szerokości i koloru pędzla, odczyt i zapis rysunku do pliku dyskowego
o rozszerzeniu BMP oraz zakończenie pracy.

Nasz projekt będzie zawierał następujące obiekty:

•

TPanel;

- górny panel zawierający przyciski

•

TButton;

- przycisk “Kolor pędzla”

•

TScrollBar;

- suwak “Szerokość pędzla”

•

TColorDialog;

- okno dialogowe wyboru koloru

•

TLabel;

- napis “Szerokość pędzla”

•

TImage;

- obszar rysowania

•

TSaveDialog;

- okno dialogowe zapisu rysunku do pliku

•

TOpenDialog;

- okno dialogowe odczytu rysunku z pliku

•

TShape;

- kółeczko pokazujące aktualny kolor

Nasz projekt plikacji zapiszemy w plikach rozpoczynających się od nazwy Grafika4.

Utwórz projekt aplikacji za pomocą polecenia File

New

Application

Zapisz projekt aplikacji za pomocą polecenia File

Save All ...

Zapisz projekt do plików:

•

formularza do Malarz4Unit1.cpp,

•

głównego pliku projektu Malarz4.bpr

Zmień tytuł formularza Form1 na Malarz4.

Ustaw opcje projektu za pomocą polecenia Project

Options ...

a w oknie zmień następujące opcje:

Polecenie: Project

Options

Application

Load Icon

W polu „Nazwa pliku” ustaw Malarz4.ico.

Po zatwierdzeniu w panelu „Icon” pojawi się właściwa ikona.

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 3
______________________________________________________________________

Przejdź do zakładki „Linker”
Wyłącz opcję „Use dynamic RTL”.

Przejdź do zakładki „Packeges”
Wyłącz opcję „Build with runtime packages”.

Zatwierdź opcje projektu Malarz4 za pomocą przycisku „OK.” i przejdź do następnego
rozdziału.

II.

Tworzenie panelu i obszaru rysowania

Projektowanie obiektu z klasy TPanel

Zaprojektujemy teraz górny panel zawierający kontrolki sterujące aplikacją.

Z zakładki Standard wybieramy obiekt klasy TPanel i przenosimy go na formularz.

Za pomocą klawisza F11 przechodzimy do okna Object Inspector. Wybieramy
zakładkę Properties i wyszukujemy właściwość „Align”. Wybieramy wartość aTop.

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Projektowanie obiektu z klasy TImage

Zaprojektujemy obszar służący do rysowania.

Z zakładki Additional wybieramy obiekt klasy TImage i przenosimy go na formularz.

Za pomocą klawisza F11 przechodzimy do okna Object Inspector. Wybieramy
zakładkę Properties i wyszukujemy właściwość „Align”. Wybieramy wartość aClient.

Przygotowaliśmy szkielet naszej aplikacji.

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 5
______________________________________________________________________

III.

Tworzenie obiektów na panelu

Zaprojektujemy teraz kontrolki sterujące na górnym panelu.

Projektowanie obiektu z klasy TLabel

Z zakładki Standard wybieramy obiekt klasy TLabel i przenosimy go na panel Panel1.

Właściwość Caption ustawiamy na „Szerokosc pędzla”.

Projektowanie obiektu z klasy TScrollBar

Z zakładki Standard wybieramy obiekt klasy TSrollBar i przenosimy go na panel
Panel1.

Projektowanie obiektu z klasy TShape

Z zakładki Additional wybieramy obiekt klasy TShape i przenosimy go na panel
Panel1.

Projektowanie obiektów z klasy TButton

Z zakładki Standard wybieramy obiekt klasy TButton i przenosimy go na formularz.

Za pomocą klawisza F11 przechodzimy do okna Object Inspector. Wybieramy
zakładkę Properties i wyszukujemy właściwość „Caption”.

Wstawiamy 5 przycisków i ustawiamy dla nich napisy:

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Dla Button1 we właściwości Caption wpisujemy tekst „Wyczysc”.

Dla Button2 we właściwości Caption wpisujemy tekst „Kolor”.

Dla Button3 we właściwości Caption wpisujemy tekst „Otworz”.

Dla Button4 we właściwości Caption wpisujemy tekst „Zapisz”.

Dla Button5 we właściwości Caption wpisujemy tekst „Koniec”.

Zmiana właściwości obiektu Shape1

Zaznaczamy obiekt Shape1.

Właściwość Shape ustawiamy na „stCircle”.

Właściwość „Min” ustawiamy na 5, a „Max” na 40.

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 7
______________________________________________________________________

Właściwość Brush->Color ustawiamy na „clBlack”
Właściwość Brush->Style ustawiamy na „bsSolid”

Teraz nasze obiekty (kontrolki) umieszczone na panelu wyglądają następująco:

IV.

Tworzenie obiektów dialogowych

Zaprojektujemy teraz obiekty związane z przyciskami Kolor, Otwórz, Zapisz.

Projektowanie obiektu z klasy TColorDialog

Przejdź do zakładki Dialogs.

Na obszar obiektu Image1 wstaw obiekt ColorDialog1.

Projektowanie obiektu z klasy TOpenDialog

Na obszar obiektu Image1 wstaw obiekt OpenDialog1.

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Projektowanie obiektu z klasy TSaveDialog

Na obszar obiektu Image1 wstaw obiekt SaveDialog1.

Zmiana właściwości obiektu z klasy OpenDialog1

Zaznacz obiekt OpenDialog1. Przejdź do okna „Object Inspector”.

Zmień następujące właściwości:

•

„DefaultExt” na bmp,

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 9
______________________________________________________________________

•

„Filter” na „Mapa bitowa” - *.bmp (w oknie „Filter editor” – jak na poniższym
rysuneku),

•

„Title” na „Otwórz rysunek z pliku”,

Zmiana właściwości obiektu z klasy SaveDialog1

Zaznacz obiekt SaveDialog1. Przejdź do okna „Object Inspector”.

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Zmień następujące właściwości:

•

„DefaultExt” na bmp,

•

„Filter” na „Mapa bitowa” - *.bmp (w oknie „Filter editor” – jak na poniższym
rysuneku),

•

„Title” na „Otwórz rysunek z pliku”,

Tworzenie metod dla zdarzeń

Zaprojektujemy teraz metody dla zdarzeń występujących w naszym projekcie.

Zdarzeniami tymi będą:

•

Przyciśnięcie przycisku myszy,

•

Przesunięcie myszy (przy naciśniętym przycisku myszy),

•

Zwolnienie przycisku myszy,

•

Kliknięcie przycisku „Wyszysc”,

•

Kliknięcie przycisku „Kolor”,

•

Kliknięcie przycisku „Otworz”,

•

Kliknięcie przycisku „Zapisz”,

•

Kliknięcie przycisku „Koniec”

•

Kliknięcie lub przesunięcie paska przewijania „ScrollBar1”,

•

Przyciśnięcie przycisku myszy w obiekcie Image1,

•

Przesunięcie myszy w obiekcie Image1 (przy naciśniętym przycisku myszy),

•

Zwolnienie przycisku myszy w obiekcie Image1,

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 11
______________________________________________________________________

UWAGA:
Z ćwiczeń 1,2,3 wynieśliśmy już umiejętność znajdowania zdarzeń i wiązania z nimi
kodu w C++ - teraz tylko krótkie przypomnienie:

Wyszukanie zdarzenia:
Obiekt Form1 zaznaczamy w oknie „Object TreeView”

W oknie (F11) Object Inspector wybieramy zakładkę „Events”

Wybieramy zdarzenie „OnMouseDown” (przyciśnięcie przycisku myszy)

Klikamy dwa razy i pojawia się okno edycji kodu C++ metody związanej z wybranym
zdarzeniem:

Wpisujemy kod metody (najlepiej dodawać na początku krótki komentarz opisujący co
dana metoda robi):

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Po tym krótkim przypomnieniu przystępujemy do programowania metod.

Programowanie metody FormMouseDown

Po wybraniu zdarzenia OnMouseDown w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

Uwaga: prezentowany kod zawiera także nagłówek, który jest tworzony automatycznie
przez C++ Builder, wpisuj więc tylko ciało metody.

void __fastcall TForm1::FormMouseDown(TObject *Sender, TMouseButton
Button,

TShiftState Shift, int X, int Y)

{
//reakcja na przycisniecie przycisku myszy

rysuj = true;

Canvas->MoveTo(X,Y);

}

Programowanie metody FormMouseMove

Po wybraniu zdarzenia OnMouseMove w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

Uwaga: prezentowany kod zawiera także nagłówek, który jest tworzony automatycznie
przez C++ Builder, wpisuj więc tylko ciało metody.

void __fastcall TForm1::FormMouseMove(TObject *Sender, TShiftState Shift,
int X, int Y)
{
//reakcja na przesuniecie myszy

Canvas->Pen->Color = ColorDialog1->Color;

if (rysuj)

Canvas->LineTo(X,Y);

}

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 13
______________________________________________________________________

Programowanie metody FormMouseUp

Po wybraniu zdarzenia OnMouseUp w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

Uwaga: prezentowany kod zawiera także nagłówek, który jest tworzony automatycznie
przez C++ Builder, wpisuj więc tylko ciało metody.

void __fastcall TForm1::FormMouseUp(TObject *Sender, TMouseButton Button,
TShiftState Shift, int X, int Y)
{
//reakcja na zwolnienie przycisku myszy

rysuj = false;

}

Programowanie metody Button1Click – przycisk „Wyczyść”

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::Button1Click(TObject *Sender)
{

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

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

Image1->Canvas->Rectangle(0,0,Form1->Width,Form1->Height);

}

Programowanie metody Button2Click – przycisk „Kolor”

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::Button2Click(TObject *Sender)
{

if (ColorDialog1->Execute())

{
Shape1->Brush->Color=ColorDialog1->Color;
Image1->Canvas->Pen->Color = ColorDialog1->Color;
}

}

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Programowanie metody Button3Click – przycisk „Otwórz”

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::Button3Click(TObject *Sender)
{

if(OpenDialog1->Execute())

Image1->Picture->LoadFromFile(OpenDialog1->FileName);

}

Programowanie metody Button4Click – przycisk „Zapisz”

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::Button4Click(TObject *Sender)
{

if(SaveDialog1->Execute())

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

}

Programowanie metody Button5Click – przycisk „Koniec”

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::Button5Click(TObject *Sender)
{

Application->Terminate();

}

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 15
______________________________________________________________________

Programowanie metody ScrollBar1Change – pasek „Szerokość pędzla”

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::ScrollBar1Change(TObject *Sender)
{

Image1->Canvas->Pen->Width = ScrollBar1->Position;
Shape1->Width = ScrollBar1->Position;
Shape1->Height = ScrollBar1->Position;

}

Dodanie zmiennej globalnej „rysuj”

Przejdź do okna kodu C++ (klawisz F12) na zakładce wybierz „Open Source/Header
File”

W oknie pliku nagłówkowego Malarz4Unit1.h wpisz deklarację:

W sekcji „private” klasy TForm1 dopisujemy deklarację:

private:

// User declarations

bool rysuj;

Zmienna ta będzie wykorzystywana przez metody :

•

FormMouseDown

•

FormMouseMove

•

FormMouseUp

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

Przystąpmy teraz do programowania właściwych metod służących do rysowania w
obszarze Image1:

Programowanie metody Image1MouseDown

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::Image1MouseDown(TObject *Sender,

TMouseButton Button, TShiftState Shift, int X, int Y)

{

rysuj = true;
Image1->Canvas->MoveTo(X,Y);
Image1->Cursor=crCross;

}

Programowanie metody Image1MouseMove

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

//reakcja na przesunięcie myszy
if (rysuj)

Image1->Canvas->LineTo(X,Y);

Programowanie metody Image1MouseUp

Po wybraniu zdarzenia OnClick w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::Image1MouseUp(TObject *Sender, TMouseButton
Button,

TShiftState Shift, int X, int Y)

{

rysuj = false;
Image1->Cursor=crDefault;

}

C++ Builder. Programowanie obiektowe. Ćwiczenie 4. 17
______________________________________________________________________

VI.

Tworzenie metody startowej okna

Programowanie metody FormCreate

Zaprojektujemy teraz metodę, która będzie uruchamiana podczas pierwszego otwierania
formularza, czyli startu naszej aplikacji.

Przejdź do formularza Form1 (klawisz F12).

Wybierz w oknie Object Inspector „Form1” i kliknij dwa razy na zdarzenie
„OnCreate”

Po wybraniu zdarzenia OnCreate w oknie edycji kodu C++ metody związanej
z wybranym zdarzeniem wpisujemy następujący kod:

void __fastcall TForm1::FormCreate(TObject *Sender)
{

Image1->Canvas->Brush->Color = clWhite;
Image1->Canvas->Pen->Color = clBlack;
Image1->Canvas->Rectangle(0,0,Form1->Width,Form1->Height);
Image1->Canvas->Pen->Width = ScrollBar1->Position;
Shape1->Width = ScrollBar1->Position;
Shape1->Height = ScrollBar1->Position;

}

C++ Builder. Programowanie obiektowe. Ćwiczenie 4.

______________________________________________________________________

VII.

Podsumowanie

Nasz projekt zawiera następujące obiekty:

Przetestujemy teraz działanie aplikacji: