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 nagyon 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 megfelelő é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 egy metó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ött vonal rajzolása

Ha nem csak néhány pontból álló alakzatot kell kirajzolnunk, hanem sokszöget, akkor használjuk 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ött vonalat tudunk rajzolni, amelyben 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 ) - segí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);