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 i høyre retningen og y-koordinater øker nedover.

Du kan også bruke følgende programmet for å visualisere hvilket koordinat musen din peker til:

#include "std_lib_facilities.h"
#include "AnimationWindow.h"

int main()
{
    AnimationWindow window;

    while(!window.should_close()) {
        Point mouseCoordinates = window.get_mouse_coordinates();
        string coordinateText = to_string(mouseCoordinates.x) + ", " + 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:

Og dette er resultatet dersom rektangelen tegnes sist:

Basisformer

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

#include "std_lib_facilities.h"
#include "AnimationWindow.h"

int main()
{
    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:

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

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

Det er mulig å endre på sirklens farge:

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

Og en kantlinje med en gitt farge:

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

Trekanter

Trekanter tegnes mellom tre punkt og draw_triangle() funksjonen:

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

Og som før kan fargen endres:

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

Rektangel

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

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

Som alle andre former kan fargen endres:

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

Og kantfargen kan også endres som i sirkler:

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

Quad

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

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

Fargen kan justeres:

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

Linjer

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

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

I tillegg kan linjens farge endres:

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

Arc

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

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:

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

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

Lik som linjer er det mulig å endre fargen:

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

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:

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

Du kan endre fargen på teksten:

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

Og størrelsen:

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

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

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

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

Font	Eksempel Tekst
Font::arial	Beskrivende tekst
Font::arial_bold	Beskrivende tekst
Font::arial_italic	Beskrivende tekst
Font::arial_bold_italic	Beskrivende tekst
Font::courier	Beskrivende tekst
Font::courier_bold	Beskrivende tekst
Font::courier_italic	Beskrivende tekst
Font::courier_bold_italic	Beskrivende tekst
Font::times	Beskrivende tekst
Font::times_bold	Beskrivende tekst
Font::times_italic	Beskrivende tekst
Font::times_bold_italic	Beskrivende tekst

Bilder

For å kunne tegne et bilde må den lastes inn fra en fil. Finn gjerne et bilde på din datamaskin, eller om du har behov for et vilkårlig bilde kan du alternativt bruke denne:

Kopier bildet inn på prosjektet i samme mappen som inneholder «.vscode» og «builddir» mappene:

Slik laster du inn ditt bilde, og tegner den i vinduet:

    Point topLeftCorner {50, 100};
    Image image("img.jpg");
    window.draw_image(topLeftCorner, image);

Om ditt bilde har et annet navn enn «img.jpg» må du endre navnet som er definert i koden slik at den er akkurat det samme som navnet på filen:

Merk: når du skal tegne et bilde i en animasjon bør du ikke laste inn bildet innenfor while løkken. Om du hadde flyttet image variablen inn på while-løkken, så hadde bildet blitt lastet inn på nytt hver eneste gang et bilde blir tegnet.

#include "AnimationWindow.h"
#include "std_lib_facilities.h"

int main()
{
    AnimationWindow window;

    // VIKTIG: Image variabler bør ikke defineres innenfor while-løkken
    Image image("img.jpg");

    while(!window.should_close()) {
        Point topLeftCorner {50, 100};
        window.draw_image(topLeftCorner, image);
        window.next_frame();
    }

    return 0;
}

Noen bilder er for stor eller for liten å vise i sin orginale størrelse. Det er derfor mulig å spesifesere et alternativ størrelse når du skal tegne bildet. For eksempel, her brukes muspekeren til dette:

#include "AnimationWindow.h"
#include "std_lib_facilities.h"

int main()
{
    AnimationWindow window;

    Image image("img.jpg");

    while(!window.should_close()) {
        Point topLeftCorner {0, 0};
        Point mouse = window.get_mouse_coordinates();
        int imageWidth = mouse.x;
        int imageHeight = mouse.y;
        window.draw_image(topLeftCorner, image, imageWidth, imageHeight);
        window.next_frame();
    }

    return 0; 
}