borland_cpp_builder

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. 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. 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.

______________________________________________________________________

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.

______________________________________________________________________

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;

}