Tegning

Generelt om tegning

Vinduets koordinatsystem

Alle former som kan tegnes i vinduet krever at du spesifiserer en posisjon. Koordinater er målet relativ til øverst venstre hjørnet i vinduet, hvor x-koordinater øker mot høyre og y-koordinater øker nedover.

Bilde som viser x og y-aksen i vinduet

Du kan også bruke følgende program for å visualisere hvilket koordinat musepekeren er på:

#include "AnimationWindow.h"

int main() {
    TDT4102::AnimationWindow window;

    while(!window.should_close()) {
        TDT4102::Point mouseCoordinates = window.get_mouse_coordinates();
        std::string coordinateText = std::to_string(mouseCoordinates.x) + ", " + std::to_string(mouseCoordinates.y);
        window.draw_text(mouseCoordinates, coordinateText);

        window.next_frame();
    }

    return 0;
}

Rekkefølge av tegneoperasjoner

Du kan tenke på vinduet som et slags maleri. Det betyr at når du tegner over noe du har tegnet tidligere blir det «malt over».

For eksempel, dette er resultatet når rektangelen tegnes først og sirklen sist:

Grønn sirkel over et blått rektangel

Og dette er resultatet dersom rektangelen tegnes sist:

Blått rektangel over en grønn sirkel

Basisformer

Om du ønsker å teste de kodeeksemplene som er vist, kan du bruke følgende eksempelet hvor du erstatter linjen som er markert:

#include "AnimationWindow.h"

int main() {
    TDT4102::AnimationWindow window;

    // Erstatt denne linjen med eksemplet som du ønsker å prøve

    window.wait_for_close();
}

Sirkler

For å tegne sirkler kan du bruke draw_circle() funksjonen. Denne krever et punkt hvor midtpunktet skal tegnes, og en radius som definerer hvor stor den skal være:

    TDT4102::Point circleOrigin {150, 150};
    int radius = 100; 
    window.draw_circle(circleOrigin, radius);

    window.draw_circle({150, 150}, 100);

Bilde som viser en blå sirkel

Det er mulig å endre på sirklens farge:

    TDT4102::Point circleOrigin {150, 150};
    int radius = 100;
    TDT4102::Color fillColor = TDT4102::Color::dark_orange;
    window.draw_circle(circleOrigin, radius, fillColor);

Bilde som viser en mørke-oransje sirkel

Og en kantlinje med en gitt farge: 

    TDT4102::Point circleOrigin {150, 150};
    int radius = 100;
    TDT4102::Color fillColor = TDT4102::Color::dark_orange;
    TDT4102::Color borderColor = TDT4102::Color::black;
    window.draw_circle(circleOrigin, radius, fillColor, borderColor);

Bilde som viser en mørke-oransje sirkel med svart kantlinje

Trekanter

Trekanter tegnes mellom tre punkt og draw_triangle() funksjonen:

    TDT4102::Point vertex0 {150, 50};
    TDT4102::Point vertex1 {50, 200};
    TDT4102::Point vertex2 {250, 200};
    window.draw_triangle(vertex0, vertex1, vertex2);

Bilde som viser en gul trekant

Og som før kan fargen endres:

    TDT4102::Point vertex0 {150, 50};
    TDT4102::Point vertex1 {50, 200};
    TDT4102::Point vertex2 {250, 200};
    TDT4102::Color fillColor = TDT4102::Color::indigo;
    window.draw_triangle(vertex0, vertex1, vertex2, fillColor);

Bilde som viser en lilla trekant

Rektangel

Rektangel tegnes fra et punkt som tilsvarer øverst venstre hjørnet samt høyde og bredde. Den tegnes med draw_rectangle() funksjonen:

    TDT4102::Point topLeftCorner {50, 50};
    int width = 150;
    int height = 100;
    window.draw_rectangle(topLeftCorner, width, height);

Bilde som viser et blågrønt rektangel

Som alle andre former kan fargen endres:

    TDT4102::Point topLeftCorner {50, 50};
    int width = 150;
    int height = 100;
    TDT4102::Color fillColor = TDT4102::Color::light_sea_green;
    window.draw_rectangle(topLeftCorner, width, height, fillColor);

Og kantfargen kan også endres som i sirkler:

    TDT4102::Point topLeftCorner {50, 50};
    int width = 150;
    int height = 100;
    TDT4102::Color fillColor = TDT4102::Color::light_sea_green;
    TDT4102::Color edgeColor = TDT4102::Color::lime;
    window.draw_rectangle(topLeftCorner, width, height, fillColor, edgeColor);

Bilde som viser et grønt rektangel

Quad

En quad er et rektangel hvor hvert hjørne kan flyttes uavhengig av hverandre. Den tegnes med draw_quad() funksjonen:

    TDT4102::Point vertex0 {180, 80};
    TDT4102::Point vertex1 {50, 120};
    TDT4102::Point vertex2 {120, 250};
    TDT4102::Point vertex3 {250, 180};
    window.draw_quad(vertex0, vertex1, vertex2, vertex3);

Bilde som viser en lyseblå quad

Fargen kan justeres:

    TDT4102::Point vertex0 {180, 80};
    TDT4102::Point vertex1 {50, 120};
    TDT4102::Point vertex2 {120, 250};
    TDT4102::Point vertex3 {250, 180};
    TDT4102::Color fillColor = TDT4102::Color::violet;
    window.draw_quad(vertex0, vertex1, vertex2, vertex3, fillColor);

Bilde som viser en rosa quad

Linjer

Du kan tegne linjer ved å bruke draw_line() funksjonen. Linjer tegnes mellom to punkt:

    TDT4102::Point lineStart {50, 50};
    TDT4102::Point lineEnd {280, 290};
    window.draw_line(lineStart, lineEnd);

Bilde som viser en linje

I tillegg kan linjens farge endres:

    TDT4102::Point lineStart {50, 50};
    TDT4102::Point lineEnd {280, 290};
    TDT4102::Color lineColor = TDT4102::Color::firebrick;
    window.draw_line(lineStart, lineEnd, lineColor);

Bilde som viser en linje

Arc

En bue er en sirkel som tegnes delvis, mellom et start og sluttvinkel relativ til sirklens midtpunkt:

Bilde som viser vinkler

Merk at sluttvinkelen må være større enn startvinkelen, og alle vinklene må være mellom 0 og 360 grader.

Høyden og bredden spesifiserer sirklens størrelse, og gjør det mulig å strekke sirklen:

Bilde som viser ellipser

Med disse parameterene til sammen kan du tegne en bue ved å bruke draw_arc() funksjonen:

    TDT4102::Point centerPoint {100, 50};
    int width = 200;
    int height = 370;
    int startDegree = 270;
    int endDegree = 360;
    window.draw_arc(centerPoint, width, height, startDegree, endDegree);

Bilde som viser en kurve tegnet med draw_arc funksjonen

Lik som linjer er det mulig å endre fargen:

    TDT4102::Point centerPoint {100, 50};
    int width = 200;
    int height = 370;
    int startDegree = 270;
    int endDegree = 360;
    TDT4102::Color lineColor = TDT4102::Color::lime;
    window.draw_arc(centerPoint, width, height, startDegree, endDegree, lineColor);

Bilde som viser en kurve tegnet med draw_arc funksjonen og endret farge

Avanserte former

Tekst

For å tegne tekst i vinduet brukes draw_text() funksjonen. Denne tar inn et sted på skjermen, og en tekst streng som skal vises som parametere:

    TDT4102::Point location {100, 100};
    std::string message = "Greetings from outer space!";
    window.draw_text(location, message);

Bilde som viser tekst

Du kan endre fargen på teksten:

    TDT4102::Point location {100, 100};
    std::string message = "Greetings from outer space!";
    TDT4102::Color textColor = TDT4102::Color::deep_skyblue;
    window.draw_text(location, message, textColor);

Bilde som viser blå tekst

Og størrelsen:

    TDT4102::Point location {100, 100};
    std::string message = "Greetings from outer space!";
    TDT4102::Color textColor = TDT4102::Color::deep_skyblue;
    int fontSize = 120;
    window.draw_text(location, message, textColor, fontSize);

Bilde som viser stor blå tekst

Om du ønsker skrifttypen kan du bruke en Font verdi som siste parameter: 

    TDT4102::Point location {100, 100};
    std::string message = "Greetings from outer space!";
    Color textColor = TDT4102::Color::deep_skyblue;
    int fontSize = 120;
    TDT4102::Font fontFace = TDT4102::Font::times_bold;
    window.draw_text(location, message, textColor, fontSize, fontFace);

Bilde som viser stor blå tekst med endret font

Her er et oversikt over de forskjellige skrifttyper som er tilgjengelig og hvordan de ser ut:

FontEksempel Tekst
Font::arialBeskrivende tekst
Font::arial_boldBeskrivende tekst
Font::arial_italicBeskrivende tekst
Font::arial_bold_italicBeskrivende tekst
Font::courierBeskrivende tekst
Font::courier_boldBeskrivende tekst
Font::courier_italicBeskrivende tekst
Font::courier_bold_italicBeskrivende tekst
Font::timesBeskrivende tekst
Font::times_boldBeskrivende tekst
Font::times_italicBeskrivende tekst
Font::times_bold_italicBeskrivende tekst