22. GDI+ programok alapjai

A Windows Form Applicationokban a grafikus programok használatához létre kell hoznunk egy festővásznat (Canvas), más néven egy grafikus felületet és kell rátennünk a form-ra.

Ehhez használnunk kell az alábbi eléregyártott könyvtárakat:

using System.Drawing;

Ha az alkalmazásunkban több helyen akarjuk használni a grafikát, akkor érdemes egy helyen létrehozni és az alkalmazásra nézve globálissá tenni a grafikus felületet.

  • Pen(Szín, [vastagság] ) - Egy tollat definiálhatunk megadott színnel és vastagsággal Vannak előre definiált színek: Color.Red, Color.Black, color.Blue, stb..., de saját magunk is összeállíthatunk színt, amiről később írok,
  • SolidBrush(Szín) - Ha kitöltött formákat akarunk rajzolni, akkor ecsetet kell definiálnunk. A szín ugyanaz, mint a Pen-nél.
using System;
using System.Collections.Generic;
using System.Drawing;
using System.Windows.Forms;

namespace grafikapelda{
    /// <summary>
    /// Description of MainForm.
    //// </summary>
    public partial class MainForm : Form
    {
        Graphics g;
        Brush b;            // Egy ecset létrehozáswa
        Pen p;              // Egy toll létrehozása
        public Mainform(){
            InitializeComponent();
            g = this.CreateGraphics();
            b = new SolidBrush(Color.Blue); // Egy ecset létrehozása kék színnel
            p = new Pen(Color.Black, 2);    // Egy toll létrehozása Fekete színnel, két pixel vastagon
        }
        ......
        ......
        ......
     }
}        

​Akkor térjünk rá a rajzoló utasításokra. Miután létrehoztuk a grafikus felületet a Form-on, utána létrejött egy két dimenziós koordinátarendszer, amelynek Form bal felső sarkában van az origója. A vízszintes (x) koordináták jobbra növekednek és balra csökkennek, Lehetnek negatív koordináták is, ekkor nem lesznek láthatók a kirajzolt pontok.

A függőleges koordináták lefelé növekednek, tehát nagynon sok esetben az általunk matek órán megszokottakhoz képest fejre kell állítanunk minden megjelenítendő dolgot. honnan tudjuk, hogy milyen széles és magas lesz a rajzterületünk, illetve hol lesz a rajzterület középpontja?

A form szélességét és magasságát az alábbi tulajdonságokat kell lekérni:

  • this.With - a form szélessége
  • this.Height - A form magassága
int xcenter = this.Width  / 2;  // Meghatározzuk a form szélességének felét.
int ycenter = this.Height / 2;  // Meghatározzuk a form magasságának felét

Vonal rajzolása

  • new Point (xkoordináta, ykoordináta) - Egy pont létrehozása a grafikus felületen
  • DrawLine( toll, egyik pont, másik pont)

Az alábbiakban from bal felső sarkából húzunk egyenest a Form középpontjába.

int xcenter = this.Width  / 2;  // Meghatározzuk a form szélességének felét
int ycenter = this.Height / 2;  // Meghatározzuk a form magasságának felét
Pen  toll   = new Pen(Color.Yellow);   //létrehozom a tollat
Point p1 = new Point(0,0);             //Definiálom a két pontot
Point p2 = new Point(xcenter, ycenter);
g.DrawLine(toll, p1, p2);              //Rajzolom a vonalat

//A középpontból tovább is lehet húzni mondjuk a jobb alsó sarokba a vonalat így.
g.DrawLine(new Pen(Color.Red), new Point(xcenter, ycenter), new Point(this.Width, this.Height);

A fenti példában a második vonalat úgy húztam, hogy nem külön változóba tettem a megfeléelő értékeket, hanem ott a paraméternél definiáltam helyben.

Hogyan tudunk egy pontot kirajzolni?

Hát olyan vonalat húzunk, amelynek a hossza csak 1 egység.

Körök rajzolása.

Téglalaphoz az alábbi lehetőségeink vannak.

  • Rectangle(x, y, szélesség, magasság) - A bal felső sarok koordinátáit kell megadni, illetve a téglalap szélességét és magasságát
  • DrawRectangle(toll, teglalap) - A megadott tollal és a megadott területre rajzol egy téglalapot
  • FillRectangle(ecset, téglalap) - Kitöltött téglalapot rajzol, a megadott ecsettel és megadott méretben.
Graphics g = this.createGraphics();
Pen toll = new Pen(Color.Red,5);
Rectangle teglalap = new Rectangle(10, 10, 25, 300);
g.DrawRectangle( toll, teglalap);

SolidBrush sb = new SolidBrush(Color.Green);
g.FillRectangle(sb, 10,200, 400, 200); // Közvetlenül is megadhatjuk a téglalap adatait);

Ellipszisek / körök rajzolása

  • DrawEllipse(toll, teglalap) - Az ellipszis körvonalát rajzolja meg
  • FillEllipse(ecset, téglalap) - kitöltött ellipszist rajzol

Minden kör és ellipszis bezárható egy téglalapba, ezért ahogyan korábban is kell deklarálni egy téglalapot, majd azt használni.

Graphics g = this.createGraphics();
Pen toll = new Pen(Color.Red,5);
Rectangle teglalap = new Rectangle(10, 10, 25, 300);
g.DrawEllipse( toll, teglalap);

SolidBrush sb = new SolidBrush(Color.Green);
g.FillEllipse(sb, 10,200, 400, 200); // Közvetlenül is megadhatjuk a téglalap adatait);

Egy kis matematika

Az ellipszisnek két tengelye van, az egyszerűség kedvéért nevezzük vízszintes és függőleges tengelyeknek. A fenti téglalap szélessége és magassága határozza meg az ellipszis két tengelyét.

Másképpen is meg lehet határozni az ellipszis méreteit:

  • DrawEllipse(toll, xbal felső sarok, y bal felső sarok,  víszintes tengely, függőleges tengely)
Graphics g = this.createGraphics();
SolidBrush sb = new SolidBrush(Color.Green);
g.FillEllipse(sb, 10,10, 400, 200); // Közvetlenül is megadhatjuk az ellipszis két tengelyét.;

Kör rajzolása

Egy kört úgy tudunk rajzolni, hogy olyan ellipszist rajzolunk, amelynek a két tengelye egyforma hosszú. Ehhez érdemes készíteni egymetódust, amelyet a programunkból meghívunk, valahogy így:

public static void DrawCircle(this Graphics g, Pen p, float xc, float yc, float sugar)
{
    g.DrawEllipse(p, xc - sugar, yc - sugar, sugar + sugar, sugar + sugar);
}

public static void FillCircle(this Graphics g, Brush b, float xc, float yc, float sugar)
{
    g.FillEllipse(b, xc - sugar, yc - sugar, sugar + sugar, sugar + sugar);
}

......
//A hívása:

DrawCircle(g, p, 200, 200, 60);  // Rajzol a (200,200) koordinátájú pontba 60 egység sugarú kört
FillCircle(g, b, 100, 100, 50);  // Rajzol a (100,100) koordinátájú pontba 50 egység sugarú teli kört

Töröttvonal rajzolása

Ha nem csak néhány pontból álló alakzatot kell kirajzolnunk, ahanem sokszöget, akkor használjukj az alábbiakat. Bek kell tennünk az alábbi könyvtárat.

using System.Drawing.Drawing2D;

  • DrawPolygon(toll, Pontokból álló tömb) - Az utasítással a megadott tollal tetszőleges hosszúságú olyan töröttvonalat tudunk rajzolni, amelybnek a pontjait a pontokból álló tömb határozza meg.
Graphics g = this.CreateGraphics();
 
Pen toll = new Pen(Color.Orange,3);
 
//Szagatott vonalas görbe rajzolása
toll.DashStyle = DashStyle.Dot;

//Sokszög rajzolása
g.DrawPolygon(toll2,new Point[] { new Point(10,10), 
                                  new Point(20,10), 
                                  new Point(30,30), 
                                  new Point(40,50),
                                  new Point(50,100),
                                  new Point(70,200)
                               }
              );
  • DrawPie(toll, float x,float y, float szelesseg, float magassag, float kezdoszog, float zaroszog ) - sgeítségével egy tortát tudunk rajzolni, amelynek egy téglalap adatai, illetve a kezdő szög és a végszög adatait kell megadni. Sajnos mindent lebegőpontos formában!
  • FillPie(toll, float x,float y, float szelesseg, float magassag, float kezdoszog, float zaroszog )  - Teli tortát lehet rajzolni
Graphics g = this.CreateGraphics();
 
Brush br = new SolidBrush(Color.LightBlue);

// A torta helye és méretei.
int x = 0;
int y = 0;
int w = 200;
int h = 100;
             
// Kezdő és vég szögek fokokban
int startszög =  0;
int végszög = 45;
             
// Kitöltött tortát rajzol
g.FillPie(br, x, y, w, h, startszög, végszög);