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:
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);
![Bilde som viser et JPG fil i arbeidsområdet i Visual Studio Code](../../images/rectangle_2.png)
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:
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 | |
Font::arial_bold | |
Font::arial_italic | |
Font::arial_bold_italic | |
Font::courier | |
Font::courier_bold | |
Font::courier_italic | |
Font::courier_bold_italic | |
Font::times | |
Font::times_bold | |
Font::times_italic | |
Font::times_bold_italic |
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:
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;
}