24/25 Programiranje 4

Zadatak:

Na formu postaviti dugme i panel po kojem se crta:

• Button (name: btnDrawLine, Text: "Nacrtaj liniju").
• Panel (name: drawingPanel, dimenzije: 400x300 px).

Dvoklikom na dugme generisati događaj Click. u koji se dodaje sledeći kod:

    private void btnDrawLine_Click(object sender, EventArgs e)
    {
        // Kreiranje Graphics objekta za crtanje na panelu
        using (Graphics g = drawingPanel.CreateGraphics())
        using (Pen pen = new Pen(Color.Blue, 2)) // Plava olovka sa debljinom od 2 piksela
        {
            // Crtanje linije od tačke (50, 50) do tačke (350, 250)
            g.DrawLine(pen, 50, 50, 350, 250);
        }
    }
}

Objašnjenje:

1. Graphics objekat: Kreira se pomoću CreateGraphics metode, koja omogućava crtanje na kontrolama poput Panel.

2. Pen objekat:  Olovka definiše izgled linije: boju, debljinu i stil. U ovom primeru koristimo plavu boju i debljinu od 2 piksela.

3. Crtanje linije:  Koriste se početne koordinate (50, 50) i krajnje koordinate (350, 250).

4. Korišćenje using:  Osigurava pravilno oslobađanje resursa za Graphics i Pen objekte.

Proširenje zadatka

1. Izbor boje:  Povezati dijalog za izbor boje (ColorDialog) sa olovkom.

   private void btnPickColor_Click(object sender, EventArgs e)
   {
       using (ColorDialog colorDialog = new ColorDialog())
       {
           if (colorDialog.ShowDialog() == DialogResult.OK)
           {
               selectedColor = colorDialog.Color;
           }
       }
   }

Dinamičke koordinate:
Dodajte TextBox za unos koordinata (x1, y1, x2, y2) kako bi korisnik mogao da definiše liniju.

Dodatni zadatak:

1. Implementirati crtanje više linija koje formiraju oblik (npr. trougao ili zvezdu).
2. Dodati dugme za brisanje panela korišćenjem Invalidate metode:

     private void btnClearPanel_Click(object sender, EventArgs e)
     {
         drawingPanel.Invalidate(); // Čisti sadržaj panela
     }

Zadatak:

Na formu postaviti dugme i panel po kojem se crta:

• Button (name: btnDrawRectangle, Text: "Nacrtaj pravougaonik").
• Panel (name: drawingPanel, dimenzije: 400x300 px).

Dodavanje funkcionalnosti

1. Kliknite dva puta na dugme btnDrawRectangle da biste generisali događaj Click.
2. Dodajte sledeći kod:

    private void btnDrawRectangle_Click(object sender, EventArgs e)
    {
        // Kreiranje Graphics objekta za crtanje na panelu
        using (Graphics g = drawingPanel.CreateGraphics())
        using (Pen pen = new Pen(Color.Green, 3)) // Zeleno olovka, debljina 3 piksela
        {
            // Crtanje pravougaonika sa gornjim levim uglom (50, 50) i dimenzijama 200x100
            g.DrawRectangle(pen, 50, 50, 200, 100);
        }
    }
}

Objašnjenje koda

1. Graphics objekat:   Kreiran pomoću CreateGraphics, omogućava crtanje na kontrolama (ovde na Panel).

2. Pen objekat:

   • Definiše boju, debljinu i stil ivica pravougaonika.
   • U primeru koristimo zelenu boju i debljinu od 3 piksela.

3. Crtanje pravougaonika:

   • Početne koordinate su (50, 50).
   • Širina pravougaonika je 200, a visina 100.

4. Korišćenje using:  Osigurava automatsko oslobađanje resursa za Graphics i Pen objekte.

Proširenje funkcionalnosti

1. Popunjavanje pravougaonika:
   Koristite FillRectangle metodu da biste popunili pravougaonik bojom:

     using (SolidBrush brush = new SolidBrush(Color.LightBlue))
     {
         g.FillRectangle(brush, 50, 50, 200, 100);
     }

     int width = int.Parse(txtWidth.Text);
     int height = int.Parse(txtHeight.Text);
     g.DrawRectangle(pen, 50, 50, width, height);

Testiranje aplikacije

1. Pokrenite aplikaciju.
2. Kliknite na dugme "Nacrtaj pravougaonik" i posmatrajte prikaz na panelu.
3. Eksperimentišite sa bojom, debljinom i dimenzijama pravougaonika.

Moguće izmene

1. Dodajte dugme za popunjavanje pravougaonika pomoću FillRectangle.
2. Implementirajte unos koordinata (x, y) pomoću TextBox kontrola.
3. Dodajte opciju za crtanje pravougaonika sa zaobljenim uglovima korišćenjem metoda kao što je DrawArc.

Zadatak:

Na formu postaviti dugme i panel po kojem se crta:

• Button (name: btnDrawSquare, Text: "Nacrtaj kvadrat").
• Panel (name: drawingPanel, dimenzije: 400x300 px).

Dodavanje funkcionalnosti

1. Kliknite dva puta na dugme btnDrawSquare da biste generisali događaj Click.
2. Dodajte sledeći kod:

    private void btnDrawSquare_Click(object sender, EventArgs e)
    {
        // Kreiranje Graphics objekta za crtanje na panelu
        using (Graphics g = drawingPanel.CreateGraphics())
        using (Pen pen = new Pen(Color.Red, 3)) // Crvena olovka, debljina 3 piksela
        {
            // Definisanje koordinata i dimenzije kvadrata
            int x = 50, y = 50, strana = 100;

            // Crtanje kvadrata
            g.DrawRectangle(pen, x, y, strana, strana);
        }
    }
}

Objašnjenje koda

1. Graphics objekat:   Kreiran pomoću CreateGraphics, omogućava crtanje na kontrolama (ovde na Panel).

2. Pen objekat:

   • Definiše boju, debljinu i stil ivica kvadrata.
   • U primeru koristimo crvenu boju i debljinu od 3 piksela.

3. Definisanje koordinata i dimenzija:

   • Korisimo promenljive x, y za početne koordinate i side za dužinu stranice kvadrata.

4. Korišćenje using:  Osigurava automatsko oslobađanje resursa za Graphics i Pen objekte.

Proširenje funkcionalnosti

1. Popunjavanje kvadrata bojom:
   Koristite metodu FillRectangle za popunjavanje kvadrata bojom:

     using (SolidBrush brush = new SolidBrush(Color.Yellow))
     {
         g.FillRectangle(brush, x, y, strana, strana);
     }

     int strana = int.Parse(txtSideLength.Text);
     
     g.DrawRectangle(pen, x, y, strana, strana);

Testiranje aplikacije

1. Pokrenite aplikaciju.
2. Kliknite na dugme "Nacrtaj kvadrat" i posmatrajte prikaz na panelu.
3. Izmenite dimenzije i boje u kodu ili pomoću dodatnih kontrola da biste testirali različite opcije.

Moguće izmene

1. Dodajte dugme za popunjavanje kvadrata bojom pomoću FillRectangle.
2. Implementirajte unos koordinata (x, y) pomoću TextBox kontrola.
3. Dodajte dugme za crtanje više kvadrata na različitim koordinatama.
4. Napravite funkciju koja crta mrežu kvadrata (npr. šahovsku tablu) koristeći petlje.

for (int i = 0; i < 5; i++)
{
    for (int j = 0; j < 5; j++)
    {
        g.DrawRectangle(pen, x + i * strana, y + j * strana, strana, strana);
    }
}

Zadatak:

Na formu postaviti dugme i panel po kojem se crta:

• Button (name: btnDrawEllipse, postaviti Text svojstvo na "Nacrtaj elipsu").
• Panel (name: drawingPanel, dimenzije postaviti na 400x300 px).

Dodavanje funkcionalnosti

1. Kliknite dva puta na dugme btnDrawEllipse da biste generisali događaj Click.
2. Dodajte sledeći kod:

    private void btnDrawSquare_Click(object sender, EventArgs e)
    {
        // Kreiranje Graphics objekta za crtanje na panelu
        using (Graphics g = drawingPanel.CreateGraphics())
        using (Pen pen = new Pen(Color.Green, 3)) // Zelena olovka, debljina 3 piksela
        {
            // Definisanje koordinata i dimenzija elipse
            int x = 50, y = 50, sirina = 150, visina=100;

            // Crtanje elipse
            g.DrawEllipse(pen, x, y, sirina, visina);
        }
    }
}

Objašnjenje koda

1. Definisanje koordinata i dimenzija:   x i y predstavljaju početne koordinate gornjeg levog ugla pravougaonika, dok su sirina i visina dimenzije tog pravougaonika.
2. DrawEllipse:  Crta elipsu unutar definisanog pravougaonika.
3. Pen:  Koristi se za crtanje ivica elipse, definišući boju i debljinu.
4. using:  Osigurava automatsko oslobađanje resursa korišćenih za crtanje.

Proširenje funkcionalnosti

1. Popunjavanje elipse:
   Koristite metodu FillEllipse za popunjavanje elipse bojom:

     using (SolidBrush brush = new SolidBrush(Color.LightBlue))
     {
         g.FillEllipse(brush, x, y, sirina, visina);
     }

     int sirina = int.Parse(txtSirina.Text);
     int visina = int.Parse(txtVisina.Text);
     g.DrawEllipse(pen, x, y, sirina, visina);

for (int i = 0; i < 5; i++)
{
    g.DrawEllipse(pen, x + i * 20, y + i * 20, width, height);
}

Testiranje aplikacije

1. Pokrenite aplikaciju.
2. Kliknite na dugme "Nacrtaj elipsu" i posmatrajte prikaz na panelu.
3. Eksperimentišite sa različitim dimenzijama, bojama i koordinatama.

Metoda DrawArc

Sintaksa:

public void DrawArc(Pen pen, float x, float y, float width, float height, float startAngle, float sweepAngle);

• pen: Olovka (Pen) koja definiše boju, širinu i stil linije.
• x i y: Koordinate gornjeg levog ugla pravougaonika u kojem je elipsa upisana.
• width i height: Širina i visina pravougaonika (odnosno elipse).
• startAngle: Početni ugao luka u stepenima (računa se od horizontalne ose u smeru kazaljke na satu).
• sweepAngle: Dužina luka u stepenima (pozitivan broj za smer kazaljke na satu, negativan za suprotno).

Primer koda

U sledećem primeru crta se kružni luk unutar pravougaonika dimenzija 200x200, počevši od ugla 0° do 120°:

  private void Form1_Paint(object sender, PaintEventArgs e)
  {

     // Pristup Graphics objektu
     Graphics g = e.Graphics;

     // Definicija olovke za crtanje
     Pen pen = new Pen(Color.Blue, 2);

     // Dimenzije pravougaonika
     float x = 50; // X koordinata
     float y = 50; // Y koordinata
     float width = 200; // Širina pravougaonika
     float height = 200; // Visina pravougaonika

     // Uglovi za luk
     float startAngle = 0; // Početni ugao
     float sweepAngle = 120; // Dužina luka

     // Crtanje kružnog luka
     g.DrawArc(pen, x, y, width, height, startAngle, sweepAngle);

     // Oslobađanje resursa olovke
     pen.Dispose();
  }

Objašnjenja

1. Definicija pravougaonika i ugla:

   • Pravougaonik dimenzija (x, y, width, height) određuje područje unutar kojeg se elipsa (a samim tim i luk) iscrta.

2. Crtanje luka:

   • startAngle je ugao od 0 stepeni, što odgovara "3 sata" na kružnom satu.
   • sweepAngle definiše dužinu luka (120° u smeru kazaljke na satu).

Rezultat

Nakon pokretanja aplikacije, pojaviće se prozor sa kružnim lukom u plavoj boji, debljine linije 2 piksela. Luk će biti deo elipse dimenzija 200x200 i protezaće se od 0° do 120° u smeru kazaljke na satu.

Za crtanje stringa (tekstualnog banera) koristi se metoda DrawString. Ova metoda omogućava prikaz teksta na definisanoj lokaciji unutar grafičkog konteksta (obično unutar kontrola poput Form ili PictureBox).

1. Početak

Otvoriti projekat tipa Windows Forms Application ...

2. Dodavanje Paint događaja

Da biste koristili Graphics, potrebno je obrađivati događaj Paint koji se automatski poziva kada se forma crta (ili osvežava).

1. Na vašoj formi ( Form1 ) u Properties prozoru izaberite Paint iz liste događaja forme. Dvoklikom kreirajte događaj.

3. Korišćenje DrawString metode

U metodi Form1_Paint, treba da se piše kod za crtanje stringa.

// Paint događaj forme
  private void Form1_Paint(object sender, PaintEventArgs e)
  {
      // Kreiranje Graphics objekta
      Graphics g = e.Graphics;

      // Tekst za crtanje
      string text = "Dobrodošli na naš baner!";

      // Font za tekst
      Font font = new Font("Arial", 24, FontStyle.Bold);

      // Boja teksta
      Brush brush = Brushes.Blue;

      // Lokacija teksta
      PointF location = new PointF(50, 100);

      // Crtanje stringa
      g.DrawString(text, font, brush, location);

      // Oslobađanje resursa
      font.Dispose();
  }

4. Objašnjenja 

1. Graphics g = e.Graphics;
   
   • e.Graphics predstavlja grafički kontekst prozora koji se crta.
2. Tekstualni sadržaj
   
   • string text = "Dobrodošli na naš baner!";
     Ovo je tekst koji će se prikazati na ekranu.
3. Font i stilovi
   
   • Font font = new Font("Arial", 24, FontStyle.Bold);
     Definiše se font, veličina (24 piksela), i stil (Bold - podebljano).
4. Četkica za boju
   
   • Brush brush = Brushes.Blue;
     Koristi se četkica za crtanje teksta u plavoj boji.
5. Lokacija teksta
   
   • PointF location = new PointF(50, 100);
     Ovo je početna tačka teksta (50 piksela od leve ivice i 100 od vrha forme).
6. Crtanje teksta
   
   • g.DrawString(text, font, brush, location);
     Ova metoda koristi definisani tekst, font, boju i lokaciju za prikaz.

5. Dodavanje efekata

Za dinamičke banere, možete koristiti timer za animaciju teksta. Na primer, da tekst "klizi" s leva na desno...