dotNETportal.cz

Úvod

Když jsem se rozhodoval jakou síťovou aplikaci budu popisovat, jako první mě napadnul chatovací prográmek. Řekl jsem si ale, že půjdu o kousek dál a pokusím se popsat krok za krokem vývoj jednoduché sdílené kreslící tabule (podobnou jako znáte například z MSN Live Messangeru). To znamená, že tu nebudeme řešit jen základní komunikaci, ale i nějakou tu synchronizaci a jednoduchý protokol s několika příkazy.

Základní funkce

Ve výsledku bude program podporovat tyto funkce:

• možnost relaci založit a připojit se na ní
• kreslení čar na straně serveru i klienta
• změna barvy a tloušťky čáry

Potřebné znalosti

Pokusím se v článku popsat vše, co je nutné provést, abyste dosáhli stejného výsledku jako zde. Chci klást nějvětší důraz na vysvětlení síťových prvků, proto například o vykreslování tolik rozprávět nebudu. O tom si můžete přečíst v článku Hungry Snake. Kdyby vám i přesto nebylo něco jasné, zeptejte se v diskuzi.

Rozvržení

Založíme si projekt typu Windows Application. Aplikace poběží na formuláři, který má neměnnou velikost a bude obsahovat menu, kreslící plochu a stavový panel.

Začneme nastavením vlastnosti formuláře FrameBorderStyle na FixedSingle a MaximizeBox na False, čímž dosáhneme, že formulář nebude možné maximalizovat, ani ho žádným jiným způsobem zmenšit, či zvětšit.

Pak se vrhneme na horní menu. Na formulář vložíme objekt MenuStrip z Toolboxu (kategorie Menus&Toolbars), který se automaticky nalinkuje jako hodnota vlastnosti formuláře MainMenuStrip (tím se stane výchozím menu na formuláři). Teď už můžete pomocí Window Designeru navrhnout menu stejně jako na obrázku:

TIP: Vodorovné oddělovací čáry uděláme tak, že jako Text zadáme - (pomlčku)

TIP: Příkaz Odpojit znepřístupníte v kontextovém menu odškrtnutím položky Enabled

Teď vložíme StatusStrip (stejná kategorie jako MenuStrip), který nám pomůže informovat uživatele o stavu připojení. Nezapomeňte nastavit SizingGrid na False - odstraníte tím malou mřížku vpravo dole na změnu velikosti formuláře .   Aby se na StatusStripu mohlo něco zobrazovat, přidáme do něj StatusLabel jako na obrázku:

Na StatusLabel pak klikneme a nastavíme mu jméno na StripInfo a text na Připraven.

Poslední, co nám zbývá, je vložit na formulář PictureBox, do kterého budeme vykreslovat. Jeho jméno bude PicTabule. Formulář by teď měl vypadat asi takto:

Vykreslování

To, co je na kreslící tabuli, budeme muset mít někde uložené. V našem případě bude vhodné použít objekt Drawing.Bitmap. Funkce pro vykreslování nám pak zprostředkuje Drawing.Graphics. Jejich deklaraci a inicializaci provedeme takto:

     Dim grp As Drawing.Graphics ' nabízí provádění grafických operací 
     Dim TBitmap As Drawing.Bitmap ' uložistě grafického obsahu tabule 
  
     Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 
         TBitmap = New Bitmap(PicTabule.Width, PicTabule.Height) ' inicializujeme nový objekt Bitmap s velikostí tabule 
         grp = Graphics.FromImage(TBitmap) ' navážeme na TBitmap objekt grp, který umožní vykreslování 
         grp.Clear(Color.Black) ' nastavíme barvu tabule na černou 
         grp.SmoothingMode =Drawing2D.SmoothingMode.AntiAlias ' aktivujeme vyhlazování čar 
     End Sub 

Aby se obsah TBitmap vykresloval do PictureBoxu, bude potřeba vložit tento kód:

  
     Private Sub PicTabule_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles PicTabule.Paint 
         ' vykreslíme obsah TBitmap na formulář do PicTabule 
         e.Graphics.DrawImage(TBitmap, 0, 0) 
     End Sub 

Nesmíme zapomenout na tlačítka "Smazat tabuli" a "Konec" v menu:

  
     Private Sub ToolStripMenuItem_SmazatTabuli_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles ToolStripMenuItem_SmazatTabuli.Click 
         grp.Clear(Color.Black) ' smažeme tabuli 
         PicTabule.Invalidate() ' a překreslíme ji 
     End Sub 
  
     Private Sub StripMenuItemKonec_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles StripMenuItemKonec.Click 
         End ' klepnuli jsme na Konec 
     End Sub 
   
A nakonec ještě kód, který dovolí myší kreslit čáry:

  
         Dim PosledniBod As Point ' bude potřeba si pamatovat poslední bod, kam se kreslilo 
         Dim drawWidth As Integer = 10 ' šířka kreslené čáry 
         Dim drawColor As Color = Color.White ' barva štětce 
         Dim Kresleni As Boolean	' aktivuje se stisknutím levého tlačítka na kreslící tabuli a indikuje začátek kreslení 
  
         Private Sub PicTabule_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicTabule.MouseDown 
                 If e.Button = Windows.Forms.MouseButtons.Left Then 
                         PosledniBod = e.Location ' počátek kreslení je nyní nastaven jako pozice myši 
                         grp.FillEllipse(New Pen(drawColor).Brush, New RectangleF(e.X - drawWidth / 2, e.Y - drawWidth / 2, drawWidth, drawWidth)) ' vykreslíme první bod (zakulacení počátku čáry) 
                         PicTabule.Invalidate() ' nechame překreslit PicTabule 
                         Kresleni = True	' aktivujeme kreslici moc 
                 End If 
         End Sub 
  
         Private Sub PicTabule_MouseMove(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicTabule.MouseMove 
                 If e.Button = Windows.Forms.MouseButtons.Left And Kresleni = True Then 
                         grp.DrawLine(New Pen(drawColor, drawWidth), PosledniBod, e.Location) ' vykreslíme čáru z posledního bodu, kde byla myš 
                         grp.FillEllipse(New Pen(drawColor).Brush, New RectangleF(e.X - drawWidth / 2, e.Y - drawWidth / 2, drawWidth, drawWidth)) ' vykreslíme zakončovací bod (zakulacení konce čáry) 
                         PicTabule.Invalidate() ' nechame překreslit PicTabule 
                         PosledniBod = e.Location ' poslední bod, ze kterého se kreslilo je nyní opět aktuální pozice myši 
                 End If 
         End Sub 
  
         Private Sub PicTabule_MouseUp(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles PicTabule.MouseUp 
                 If e.Button = Windows.Forms.MouseButtons.Left Then 
                         Kresleni = False ' puštěním levého tlačítka myši opouštíme kreslící mód 
                 End If 
         End Sub 
 

To bude prozatím vše. Výsledek by měl vypadat stejně jako na obrázku níže.

Zatím náš prográmek neumí nic víc, než kreslit čáru, ale v dalším díle se už konečně vrhneme na samotnou komunikaci přes TCP/IP protokol.

První verzi kreslící tabule z tohoto dílu si můžete stáhnout zde: