Programujeme vo Visual Basicu IV.
Peter Hrdlica / 19. 09. 2006, 14:11
V dnešnom dieli si ukážeme prácu s grafickými prvkami vo VB. Zoznámime sa s ovládacími prvkami PictureBox, Image a s prvkami VScrollBar a HScrollBar a vytvoríme si prvú malú aplikáciu.
Ovládací prvok – Image
Image je grafický prvok, ktorý sa používa na načítanie obrázkov buď za behu aplikácie, alebo pri jej návrhu. Image slúži hlavne na dekoráciu aplikácie a i keď je to grafický prvok, nie je do neho možné kresliť, na to slúži prvok PictureBox (vysvetlíme si ho v nasledujúcej kapitole). Vytvorte si na formulár jeden prvok Image. Ihneď je viditeľné, že tento prvok nemá vlastné pozadie (farbu na pozadí, je teda transparentný - priesvitný). Pri vlastnosti Picture nájdete “...“, kliknite na ne a vyberte si akýkoľvek obrázok na Vašom disku. Ako iste vidíte, po načítaní obrázka sa prvok Image nastaví na potrebnú veľkosť, aby sa do neho vošiel celý obrázok. Ak teraz začnete prvku Image rôzne meniť veľkosť, tak sa obrázok buď zreže, alebo zostane vedľa obrázku voľné miesto (v rámci prvku Image). Nájdite preto teraz vo vlastnostiach položku Stretch (angl. roztiahnuť) a nastavte ju na hodnotu True. Od teraz sa bude veľkosť obrázku meniť s veľkosťou prvku Image. Jednoduchý príklad použitia prvku ako dekorácie aplikácie je Splash Screen. Splash Screen je okno, ktoré sa zobrazí pri spúšťaní niektorých aplikácií a po dobu kým je toto okno viditeľné sa načítajú rôzne potrebné súčasti programu(napr. aj VB má pri spúšťaní vlastný Splash Screen).
Nakreslite si na formulár prvok Image a do handleru Form_Load() – dvojité poklepanie na formulár, napíšte Image1.Picture = LoadPicture (cesta). Slovo cesta môžeme nahradiť reťazcom cieľovej cesty dvomi spôsobmi. Môžeme si zadeklarovať premennú cesta a do nej najskôr cestu načítať : cesta = “C:Documents And SettingsPicturessample.jpg”, alebo slovo cesta nahradiť : LoadPicture (“C:Documents And SettingsPicturessample.jpg”). Handler teda aj s deklaráciou premennej môže vyzerať takto:
Dim cesta As String
Private Sub Form_Load()
cesta = "C:Documents and SettingPicturessample.jpg"
Image1.Picture = LoadPicture(cesta)
End Sub
Ovládacie prvky – VscrollBar a HScrollBar
Scrollbar slúži na posúvanie obrazovky (známi z Internet Exploreru, Microsoft Wordu, atd). HScrollbar je horizontálny a Vscrollbar je vertikálny. Použitie prvkov ScrollBar si ukážeme hneď na jednoduchom príklade. Nakreslime teda na formulár jeden ľubovoľný ScrollBar a jeden prvok Label. V panely vlastností vyhľadajte položku Max, tá udáva maximálnu hodnotu, ktorú môže prvok dosiahnuť. Rovnako Min určuje minimálnu hodnotu prvku ScrollBar(Min má najväčšie využite napr. pri textových editoroch, aby ste text nepísali na okraj papiera). Implicitne nastavená hodnota položky Max je 32767, čo je zároveň vrchná hranica premennej Integer. Nastavme max napr. na hodnotu 100. ďalšou vlastnosťou bez ktorej sa nezaobídete je vlastnosť Value (angl. hodnota). Tá nám udáva aktuálnu hodnotu prvku ScrollBar.
Ak Value budete pokúšať meniť za behu programu na hodnotu vyššiu ako je Max, tak to bude viesť k zrúteniu aplikácie.
Handler bude vyzerať takto:
Private Sub HScroll1_Change()
Label1.Caption = HScroll1.Value
End Sub
Slovami povedané: vlastnosti Caption prvku Label priradíme hodnotu Value prvku HScrollBar.
Do prvku Label sa vypíše hodnota prvku HcrollBar.
Ovládací prvok – Picture Box
PictureBox je takisto grafický ovládací prvok, do ktorého sa dajú načítať obrázky podobne ako do prvku Image, ale častejšie sa využíva na kreslenie. Prvou viditeľnou zmenou po nakreslení PictureBoxu na formulár bude jeho vlastné pozadie, ktoré je implicitne nastavené na šedé. Toto možno zmeniť aj v paneli nástrojov vlastnosťou BackColor, alebo i za behu programu napr. Picture1.BackColor ="&H00FFFFFF&". &H00FFFFFF& je vo VB kód pre bielu farbu. Po načítaní obrázku do PictureBoxu sa jeho tvar podľa obrázku podobne ako pri prvku Image nezmení a zároveň nemá vlastnosť Stretch.
Prvá malá aplikácia –Miešanie farieb
Pozorný čitateľ, ktorý dospel až do tohto bodu by mal byť schopný túto aplikáciu bez problémov naprogramovať. Bude sa jednať o malý program, ktorý bude miešať farby. Miešanie bude prebiehať v palete RGB (angl. red, green, blue) – budú sa miešať jednotlivé zložky farieb a to červená, zelená a modrá. Navrhnite si teda formulár zhruba takto:
Rozbor:
Private Sub HScroll1_Change()
Picture1.BackColor = RGB(HScroll1.Value, HScroll2.Value, HScroll3.Value)
lblred.Caption = HScroll1.Value
End Sub
Private Sub HScroll2_Change()
Picture1.BackColor = RGB(HScroll1.Value, HScroll2.Value, HScroll3.Value)
lblgreen.Caption = HScroll2.Value
End Sub
Private Sub HScroll3_Change()
Picture1.BackColor = RGB(HScroll1.Value, HScroll2.Value, HScroll3.Value)
lblblue.Caption = HScroll3.Value
End Sub
Ako je vidieť, stále meníme farbu pozadia prvku Picture1 a to zabezpečuje funkcia
RGB. Všeobecný zápis funkcie je takýto : RGB ( červená, zelená, modrá), HScrollBar1.Value môžeme nahradiť premennými, alebo priamo číslami, avšak nahradenie číslom je jednorázové a nezmeniteľné užívateľom. Preto sa používajú častejšie práve premenné, lebo tie sú variabilné – meniteľné a môže ich meniť aj užívateľ programu.
Podoba programu na miešanie farieb za behu.
Kreslenie v prvku PictureBox
Najprv sa naučíme nakresliť jeden bod pri kliknutí myšou v prvku PictureBox. Na formulári nám bude postačovať jeden prvok PictureBox, ktorému priradíme biele pozadie. Otvoríme si klasicky handler pre tento prvok dvojitým poklepaním na neho avšak teraz budeme na prvok kresliť nie pri udalosti Click, ale pri udalosti MouseDown, to znemená, že bod sa nakreslí, keď sa stlačí tlačidlo myši (prečo sa použije handler pre udalosť MouseDown a nie Click je zrejmé z postupu pre kreslenie pri pohybe myši).
Zmena handleru (udalosti) pre ovládací prvok.
Príkaz na kreslenie bodu je jednoduchý: If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0) a stačí ho len vložiť do spomínaného handlera. Príkaz môže povedať slovami asi takto: „Ak je stlačené ľavé tlačidlo myši (číslo 1 je pre ľavé, 2 pre pravé a 3 pre obe naraz), potom nakresli na PictureBox bod so súradnicami X,Y – X,Y sú súradnice aktuálnej pozície myši, a čiernou farbou. Použil som paletu RGB, keďže sme sa s ňou už zaoberali.
Ak chceme aby program kreslil body aj pri pohybe myši po “plátne“, musíme zapísať tento istý príkaz do handleru MouseMove. Ďalšou dôležitou vecou je nakresliť bod takisto pri pustení tlačidla myši, v opačnom prípade by sa posledný bod nenakreslil, lebo pri pustení tlačidla sa rozoznáva udalosť MouseUp a nie MouseMove. Rovnako ak by sme neuviedli kreslenie bodu pri udalosti MouseDown, bol by vynechaný prvý bod. Celý výsledný kód bude teda vyzerať nasledovne:
Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0)
End Sub
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0)
End Sub
Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0)
End Sub
Keď však začnete kresliť, zbadáte, že ak rýchlejšie pohnete myšou, tak sa čiara pretrhne a bude prerušovaná. Každá bodka znamená rozoznanie udalosti MouseMove, z toho je zrejmé, že VB pri rýchlejšom pohybe nestíha túto udalosť rozoznať, preto sa kreslená čiara preruší.
Zmenu veľkosti kresleného bodu vykonáme zmenou vlastnosti DrawWidth prvku PictureBox. Ako príklad si na formulár nakreslime textové pole, do ktorého budeme zadávať požadovanú veľkosť bodu. Celý handler bude vyzerať nasledovne:
Private Sub Text1_Change()
If Text1.Text = "" Then Text1.Text = "1"
Picture1.DrawWidth = Text1.Text
End Sub
Podmienený príkaz If nachádzajúci sa v handlery zabezpečí, že sa aplikácia nezrúti pri vymazávaní textového poľa. Slovami povedané: „Ak sa stane, že textové pole zostane prázdne, vlož do neho 1!“ Ešte je však stále možnosť, že sa aplikácia zrúti a to pri zadaní písmena do textového poľa, avšak tým sa teraz zaoberať nebudeme.
Úlohy
Image je grafický prvok, ktorý sa používa na načítanie obrázkov buď za behu aplikácie, alebo pri jej návrhu. Image slúži hlavne na dekoráciu aplikácie a i keď je to grafický prvok, nie je do neho možné kresliť, na to slúži prvok PictureBox (vysvetlíme si ho v nasledujúcej kapitole). Vytvorte si na formulár jeden prvok Image. Ihneď je viditeľné, že tento prvok nemá vlastné pozadie (farbu na pozadí, je teda transparentný - priesvitný). Pri vlastnosti Picture nájdete “...“, kliknite na ne a vyberte si akýkoľvek obrázok na Vašom disku. Ako iste vidíte, po načítaní obrázka sa prvok Image nastaví na potrebnú veľkosť, aby sa do neho vošiel celý obrázok. Ak teraz začnete prvku Image rôzne meniť veľkosť, tak sa obrázok buď zreže, alebo zostane vedľa obrázku voľné miesto (v rámci prvku Image). Nájdite preto teraz vo vlastnostiach položku Stretch (angl. roztiahnuť) a nastavte ju na hodnotu True. Od teraz sa bude veľkosť obrázku meniť s veľkosťou prvku Image. Jednoduchý príklad použitia prvku ako dekorácie aplikácie je Splash Screen. Splash Screen je okno, ktoré sa zobrazí pri spúšťaní niektorých aplikácií a po dobu kým je toto okno viditeľné sa načítajú rôzne potrebné súčasti programu(napr. aj VB má pri spúšťaní vlastný Splash Screen).Nakreslite si na formulár prvok Image a do handleru Form_Load() – dvojité poklepanie na formulár, napíšte Image1.Picture = LoadPicture (cesta). Slovo cesta môžeme nahradiť reťazcom cieľovej cesty dvomi spôsobmi. Môžeme si zadeklarovať premennú cesta a do nej najskôr cestu načítať : cesta = “C:Documents And SettingsPicturessample.jpg”, alebo slovo cesta nahradiť : LoadPicture (“C:Documents And SettingsPicturessample.jpg”). Handler teda aj s deklaráciou premennej môže vyzerať takto:
Dim cesta As String
Private Sub Form_Load()
cesta = "C:Documents and SettingPicturessample.jpg"
Image1.Picture = LoadPicture(cesta)
End Sub
Ovládacie prvky – VscrollBar a HScrollBar
Scrollbar slúži na posúvanie obrazovky (známi z Internet Exploreru, Microsoft Wordu, atd). HScrollbar je horizontálny a Vscrollbar je vertikálny. Použitie prvkov ScrollBar si ukážeme hneď na jednoduchom príklade. Nakreslime teda na formulár jeden ľubovoľný ScrollBar a jeden prvok Label. V panely vlastností vyhľadajte položku Max, tá udáva maximálnu hodnotu, ktorú môže prvok dosiahnuť. Rovnako Min určuje minimálnu hodnotu prvku ScrollBar(Min má najväčšie využite napr. pri textových editoroch, aby ste text nepísali na okraj papiera). Implicitne nastavená hodnota položky Max je 32767, čo je zároveň vrchná hranica premennej Integer. Nastavme max napr. na hodnotu 100. ďalšou vlastnosťou bez ktorej sa nezaobídete je vlastnosť Value (angl. hodnota). Tá nám udáva aktuálnu hodnotu prvku ScrollBar. Ak Value budete pokúšať meniť za behu programu na hodnotu vyššiu ako je Max, tak to bude viesť k zrúteniu aplikácie.
Handler bude vyzerať takto:
Private Sub HScroll1_Change()
Label1.Caption = HScroll1.Value
End Sub
Slovami povedané: vlastnosti Caption prvku Label priradíme hodnotu Value prvku HScrollBar.
Do prvku Label sa vypíše hodnota prvku HcrollBar.
Ovládací prvok – Picture Box
PictureBox je takisto grafický ovládací prvok, do ktorého sa dajú načítať obrázky podobne ako do prvku Image, ale častejšie sa využíva na kreslenie. Prvou viditeľnou zmenou po nakreslení PictureBoxu na formulár bude jeho vlastné pozadie, ktoré je implicitne nastavené na šedé. Toto možno zmeniť aj v paneli nástrojov vlastnosťou BackColor, alebo i za behu programu napr. Picture1.BackColor ="&H00FFFFFF&". &H00FFFFFF& je vo VB kód pre bielu farbu. Po načítaní obrázku do PictureBoxu sa jeho tvar podľa obrázku podobne ako pri prvku Image nezmení a zároveň nemá vlastnosť Stretch.
Prvá malá aplikácia –Miešanie farieb
Pozorný čitateľ, ktorý dospel až do tohto bodu by mal byť schopný túto aplikáciu bez problémov naprogramovať. Bude sa jednať o malý program, ktorý bude miešať farby. Miešanie bude prebiehať v palete RGB (angl. red, green, blue) – budú sa miešať jednotlivé zložky farieb a to červená, zelená a modrá. Navrhnite si teda formulár zhruba takto:
Rozbor:
- Maximálnu hodnotu prvku HScrollBar nastavíme na 255. Kombinácia troch farieb nám potom dá hodnotu 16581375
- Napravo od každého z prvkov Label s popisom o ktorú farbu sa jedná sa nachádza ďalší prvok Label, ktorý má momentálne vlastnosť Caption = “”. Neskôr budú tieto popisy ukazovať hodnoty daných farieb. Sú pomenované lblred, lblgreen a lblblue.
Private Sub HScroll1_Change()
Picture1.BackColor = RGB(HScroll1.Value, HScroll2.Value, HScroll3.Value)
lblred.Caption = HScroll1.Value
End Sub
Private Sub HScroll2_Change()
Picture1.BackColor = RGB(HScroll1.Value, HScroll2.Value, HScroll3.Value)
lblgreen.Caption = HScroll2.Value
End Sub
Private Sub HScroll3_Change()
Picture1.BackColor = RGB(HScroll1.Value, HScroll2.Value, HScroll3.Value)
lblblue.Caption = HScroll3.Value
End Sub
Ako je vidieť, stále meníme farbu pozadia prvku Picture1 a to zabezpečuje funkcia
RGB. Všeobecný zápis funkcie je takýto : RGB ( červená, zelená, modrá), HScrollBar1.Value môžeme nahradiť premennými, alebo priamo číslami, avšak nahradenie číslom je jednorázové a nezmeniteľné užívateľom. Preto sa používajú častejšie práve premenné, lebo tie sú variabilné – meniteľné a môže ich meniť aj užívateľ programu.
Podoba programu na miešanie farieb za behu.
Kreslenie v prvku PictureBox
Najprv sa naučíme nakresliť jeden bod pri kliknutí myšou v prvku PictureBox. Na formulári nám bude postačovať jeden prvok PictureBox, ktorému priradíme biele pozadie. Otvoríme si klasicky handler pre tento prvok dvojitým poklepaním na neho avšak teraz budeme na prvok kresliť nie pri udalosti Click, ale pri udalosti MouseDown, to znemená, že bod sa nakreslí, keď sa stlačí tlačidlo myši (prečo sa použije handler pre udalosť MouseDown a nie Click je zrejmé z postupu pre kreslenie pri pohybe myši).
Zmena handleru (udalosti) pre ovládací prvok.
Príkaz na kreslenie bodu je jednoduchý: If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0) a stačí ho len vložiť do spomínaného handlera. Príkaz môže povedať slovami asi takto: „Ak je stlačené ľavé tlačidlo myši (číslo 1 je pre ľavé, 2 pre pravé a 3 pre obe naraz), potom nakresli na PictureBox bod so súradnicami X,Y – X,Y sú súradnice aktuálnej pozície myši, a čiernou farbou. Použil som paletu RGB, keďže sme sa s ňou už zaoberali.
Ak chceme aby program kreslil body aj pri pohybe myši po “plátne“, musíme zapísať tento istý príkaz do handleru MouseMove. Ďalšou dôležitou vecou je nakresliť bod takisto pri pustení tlačidla myši, v opačnom prípade by sa posledný bod nenakreslil, lebo pri pustení tlačidla sa rozoznáva udalosť MouseUp a nie MouseMove. Rovnako ak by sme neuviedli kreslenie bodu pri udalosti MouseDown, bol by vynechaný prvý bod. Celý výsledný kód bude teda vyzerať nasledovne:
Private Sub Picture1_MouseDown(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0)
End Sub
Private Sub Picture1_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0)
End Sub
Private Sub Picture1_MouseUp(Button As Integer, Shift As Integer, X As Single, Y As Single)
If Button = 1 Then Picture1.PSet (X, Y), RGB(0, 0, 0)
End Sub
Keď však začnete kresliť, zbadáte, že ak rýchlejšie pohnete myšou, tak sa čiara pretrhne a bude prerušovaná. Každá bodka znamená rozoznanie udalosti MouseMove, z toho je zrejmé, že VB pri rýchlejšom pohybe nestíha túto udalosť rozoznať, preto sa kreslená čiara preruší.
Zmenu veľkosti kresleného bodu vykonáme zmenou vlastnosti DrawWidth prvku PictureBox. Ako príklad si na formulár nakreslime textové pole, do ktorého budeme zadávať požadovanú veľkosť bodu. Celý handler bude vyzerať nasledovne:
Private Sub Text1_Change()
If Text1.Text = "" Then Text1.Text = "1"
Picture1.DrawWidth = Text1.Text
End Sub
Podmienený príkaz If nachádzajúci sa v handlery zabezpečí, že sa aplikácia nezrúti pri vymazávaní textového poľa. Slovami povedané: „Ak sa stane, že textové pole zostane prázdne, vlož do neho 1!“ Ešte je však stále možnosť, že sa aplikácia zrúti a to pri zadaní písmena do textového poľa, avšak tým sa teraz zaoberať nebudeme.
Úlohy
- Upravíme program na kreslenie tak, aby sa veľkosť bodu menila pomocou jedného z prvkov ScrollBar
- Upravíme program na kreslenie tak, aby sa dala meniť farba kresleného bodu za pomoci premennej, ktorá bude farbu reprezentovať (typu String) a za pomoci prvkov Label, alebo PictureBox s farebnými pozadiami. Uvediem príklad: farba =Label1.BackColor a priradenie farby: Picture1.PSet (X,Y) , farba.
- Upravíme program na kreslenie podobne ako v príklade 2 avšak užívateľ si bude môcť namiešať farbu palety RGB sám.