laboratório de programação i
DESCRIPTION
Laboratório de Programação I. Carlos Oberdan Rolim Ciência da Computação Sistemas de Informação. Canvas. Introdução. Possibilidade de criar linhas, circulos, retangulos e outros gráficos Microsoft criou a Graphical Device Interface (GDI) DLL que contém um conjunto de funções para desenhos. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/1.jpg)
Laboratório de Programação I
Carlos Oberdan Rolim
Ciência da ComputaçãoSistemas de Informação
![Page 2: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/2.jpg)
Canvas
![Page 3: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/3.jpg)
Introdução
Possibilidade de criar linhas, circulos, retangulos e outros gráficos
Microsoft criou a Graphical Device Interface (GDI)
DLL que contém um conjunto de funções para desenhos
![Page 4: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/4.jpg)
Canvas
Nas aplicações Windows basta criar um contexto para desenhar
Contexto representado através de um Canvas
O contexto utiliza um sistema de coordenadas partido do canto superior esquerdo do monitor
![Page 5: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/5.jpg)
Canvas
Tudo que vai ser desenhado baseia-se nessa origem e nas coordenadas X e Y
![Page 6: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/6.jpg)
TCanvas
O objeto TCanvas contém tudo que precisa-se para desenhar
Linhas e seus derivados
Circulos
Curvas
Textos
![Page 7: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/7.jpg)
Linhas
Linha é a união de dois pontos (inicio e fim)
![Page 8: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/8.jpg)
Linhas
Primeiro move-se até onde sejar começar a linha com a função MoveTo()
void __fastcall MoveTo(int X, int Y);
X representa a distancia horizontal da origem(0,0)
Y representa a distancia vertical da origem (0,0)
![Page 9: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/9.jpg)
Linhas
Para finalizar a linha basta dizer onde a linha vai terminar com a função LineTo()
void __fastcall LineTo(int X, int Y);
X representa a distancia horizontal onde a linha vai terminar partido da origem(0,0)
Y representa a distancia vertical onde a linha vai terminar
![Page 10: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/10.jpg)
Linhas
Canvas->MoveTo(60, 20);
Canvas->LineTo(60, 122);
Canvas->LineTo(264, 122);
Canvas->LineTo(60, 20);
Chamadas subsequentes de LineTo() continua a partir da última coordenada definida pelo LineTo() anterior
![Page 11: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/11.jpg)
Polylines
É um conjunto de linhas conectadas
As coordenadas são armazenadas em um array do tipo TPoint
O método usado para desenhar é
void __fastcall Polyline(const Types::TPoint* Points, const int Points_Size);
Point = os valores dos pontosPoints_Size = o número de membros do array
• Quando inicializado é criada um linha de Point[0] até Point[1]
![Page 12: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/12.jpg)
Polylines
TPoint Pt[7];
Pt[0] = Point(20, 50);
Pt[1] = Point(180, 50);
Pt[2] = Point(180, 20);
Pt[3] = Point(230, 70);
Pt[4] = Point(180, 120);
Pt[5] = Point(180, 90);
Pt[6] = Point(20, 90);
Canvas->Polyline(Pt, 7);
![Page 13: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/13.jpg)
Múltiplas PolylinesPode ser usada a função PolyPolyline()
TPoint Pt[15]; DWORD lpPts[] = { 4, 4, 7 }; // Triangulo da esquerda Pt[0] = Pt[3] = Point(50, 20); Pt[1] = Point(20, 60); Pt[2] = Point(80, 60); // Segundo triangulo Pt[4] = Pt[7] = Point(70, 20); Pt[5] = Point(100, 60); Pt[6] = Point(130, 20); // Hexagono Pt[8] = Pt[14] = Point(145, 20); Pt[9] = Point(130, 40); Pt[10] = Point(145, 60); Pt[11] = Point(165, 60); Pt[12] = Point(180, 40); Pt[13] = Point(165, 20); HDC hDC = Canvas->Handle; PolyPolyline(hDC, Pt, lpPts, 3);
lpPts = array onde cada posição indica o número de vertices (linhas) que cada polyline correspondente vai ter (número de pontos necessários)
![Page 14: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/14.jpg)
Poligonos
Polylines foi desenhada uma linha partindo do ponto inicial até chegar ao ponto final
Não há conexão ou relação entre os dois pontos extremos
Um poligono é uma polyline fechada
Em outras palavras um poligono é definido de forma que a linha inicial é ligada com a linha final
Usa a função
void __fastcall Polygon(const TPoint * Points, const int Points_Size);
![Page 15: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/15.jpg)
Poligonos
TPoint Pt[7];
Pt[0] = Point(20, 50);
Pt[1] = Point(180, 50);
Pt[2] = Point(180, 20);
Pt[3] = Point(230, 70);
Pt[4] = Point(180, 120);
Pt[5] = Point(180, 90);
Pt[6] = Point(20, 90); experimente comentar essa linha
Canvas->Polygon(Pt, 7); e mude o valor 7 para 6
![Page 16: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/16.jpg)
Multiplos Poligonos
TPoint Pt[12];
int lpPts[] = { 3, 3, 3, 3 };
// Top TrianglePt[0] = Point(125, 10);Pt[1] = Point( 95, 70);Pt[2] = Point(155, 70);
// Left TrianglePt[3] = Point( 80, 80);Pt[4] = Point( 20, 110);Pt[5] = Point( 80, 140);
// Bottom TrianglePt[6] = Point( 95, 155);Pt[7] = Point(125, 215);Pt[8] = Point(155, 155);
// Right TrianglePt[9] = Point(170, 80);Pt[10] = Point(170, 140);Pt[11] = Point(230, 110);
HDC hDC = Canvas->Handle;PolyPolygon(hDC, Pt, lpPts, 4);
![Page 17: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/17.jpg)
Retangulos
Forma geometrica composta por quatro cantos (pontos)
![Page 18: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/18.jpg)
Retangulos
Função
void __fastcall Rectangle(int X1, int Y1, int X2, int Y2);
Exemplo:
Canvas->Rectangle(20, 20, 226, 144);
![Page 19: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/19.jpg)
Retangulos
Ou então usar as coordenadas representadas através de um objeto do tipo Rect ou TRect
RECT Recto;
Recto.left = 328;
Recto.top = 125;
Recto.right = 48;
Recto.bottom = 25;
Canvas->Rectangle(Recto);
![Page 20: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/20.jpg)
Círculos / Elipses
Elipses são desenhadas no interior de retangulos segundo suas coordenadas
![Page 21: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/21.jpg)
Elipses
Função
void __fastcall Ellipse(int X1, int Y1, int X2, int Y2);
Exemplo:
Canvas->Ellipse(20, 20, 226, 144);
Ou então com um objeto TRect
TRect Recto(328, 125, 28, 8);
Canvas->Ellipse(Recto);
![Page 22: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/22.jpg)
Retângulo arredondado
Pode-se criar retângulos com os cantos arredondados
![Page 23: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/23.jpg)
Retângulos arredondados
Função
void __fastcall RoundRect(int X1, int Y1, int X2, int Y2, int X3, int Y3);
Exemplo
Canvas->RoundRect(20, 20, 275, 188, 42, 38);
![Page 24: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/24.jpg)
Pie
Pie é uma fração de uma elipse delimitada por duas linhas que cortam a elipse partindo do centro em direção a borda
![Page 25: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/25.jpg)
Pie
Função
void __fastcall Pie(int X1, int Y1, int X2, int Y2, int X3, int Y3, int X4, int Y4);
Exemplo
Canvas->Pie(40, 20, 226, 144, 155, 32, 202, 115);
![Page 26: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/26.jpg)
Arcs
Arcs é uma porção ou segmento de uma elipse. Ou seja, é uma elipse não completa
Usa mesmas coodernadas da elipse como base
![Page 27: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/27.jpg)
Arcs
Função
void __fastcall Arc(int X1, int Y1, int X2, int Y2, int X3, int Y3, int X4, int Y4);
Exemplo
Canvas->Arc(20, 20, 226, 144, 202, 115, 105, 32);
![Page 28: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/28.jpg)
Arcs
Pode-se definir a direção do ARC
AD_CLOCKWISE – Sentido horario
AD_COUNTERCLOCKWISE – Sentido anti-horario
HDC hDC = Canvas->Handle;
SetArcDirection(hDC, AD_COUNTERCLOCKWISE);
Canvas->Arc(20, 20, 226, 144, 202, 115, 105, 32);
SetArcDirection(hDC, AD_CLOCKWISE);
Canvas->Arc(10, 10, 250, 155, 240, 85, 24, 48);
![Page 29: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/29.jpg)
Chords
São como arcs porém fechados através de uma linha
![Page 30: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/30.jpg)
Chords
Função
void __fastcall Chord(int X1, int Y1, int X2, int Y2, int X3, int Y3, int X4, int Y4);
Exemplo
Canvas->Chord(20, 20, 226, 144, 202, 115, 105, 32);
![Page 31: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/31.jpg)
Curvas de Bezier
São um tipo de arc baseados no número de pontos.
Utiliza no mínimo quatro pontos
![Page 32: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/32.jpg)
Curvas de Bezier
Função
void __fastcall PolyBezier(const TPoint* Points, const int Points_Size);
Exemplo
TPoint Pt[4] = { Point(20, 12), Point(88, 246), Point(364, 192), Point(250, 48) };
Canvas->PolyBezier(Pt, 3);
![Page 33: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/33.jpg)
Textos
Para escrever texto em um Canvas usar a função
void __fastcall TextOut(int X, int Y, const AnsiString Text);
Exemplo
Canvas->TextOut(10, 10, “Ober");
![Page 34: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/34.jpg)
Texto em um retângulo
Função
void __fastcall TextRect(const Types::TRect &Rect, int X, int Y, const AnsiString Text);
Exemplo
Canvas->TextRect(Rect(40, 20, 120, 60), 40, 20, “Ober");
![Page 35: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/35.jpg)
Propriedades do texto
Pode-se alterar o texto da seguinte forma
Canvas->Font->Size = 120;
Canvas->Font->Name = "Garamond";
Canvas->TextOut(26, 24, “Ober");
![Page 36: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/36.jpg)
Trabalhando com cores
As cores são representadas usando-se o esquema RGB
Escala de 0 a 255
Um valor numérico de 32 bits é usado para representar a cor através de um tipo COLORREF
COLORREF ClrMine;
Color = ClrMine;
Ou então uma cor pode ser criada
COLORREF ClrMine = RGB(247, 252, 24);
Color = TColor(ClrMine);
![Page 37: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/37.jpg)
Textos coloridos
Usar a função SetTextColor()
SetTextColor(Canvas->Handle, clRed);
Canvas->TextRect(Rect(40, 20, 120, 60), 40, 20, “Ober");
Fundo colorido
SetTextColor(Canvas->Handle, RGB(255, 25, 2));
Canvas->TextOut(50, 42, “Ober");
SetBkColor(Canvas->Handle, RGB(0, 0, 128));
SetTextColor(Canvas->Handle, RGB(128, 255, 255));
Canvas->TextOut(50, 60, “Testando fundo colorido");
![Page 38: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/38.jpg)
Texto mais elaborado
Canvas->Font->Size = 120;
Canvas->Font->Color = clSkyBlue;
Canvas->Font->Name = "Garamond";
SetBkMode(Canvas->Handle, TRANSPARENT);
Canvas->TextOut(26, 24, "Ober");
Canvas->Font->Color = clBlue;
Canvas->TextOut(20, 18, "Ober");
![Page 39: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/39.jpg)
Pen
TPen é uma classe utilizada para desenhar na canvas
Possui aspecto mais “cosmetico”
Pode-se alterar a cor e tamanho das linhas com Pen
Canvas->Pen->Color = clRed;
Canvas->Pen->Width = 1;
Canvas->MoveTo(20, 15);
Canvas->LineTo(255, 82);
![Page 40: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/40.jpg)
Pen
Pode-se alterar o tipo da linha usada
![Page 41: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/41.jpg)
Pen
Exemplo
Canvas->Pen->Style = psDashDotDot;
Canvas->Pen->Width = 1;
Canvas->Pen->Color = TColor(RGB(255, 25, 5));
Canvas->Rectangle(20, 22, 250, 125);
![Page 42: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/42.jpg)
Brushes
Brushes são usados para preencher uma área
Uma vez selecionado um brush tudo que for desenhado vai utiliza-lo
Exemplo
Canvas->Brush->Color = static_cast<TColor>(RGB(250, 25, 5));
Canvas->Rectangle(20, 20, 250, 125);
![Page 43: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/43.jpg)
Brushes
Canvas->Brush->Color = static_cast<TColor>(RGB(255, 2, 5));
TPoint Pt[3];
// Top TrianglePt[0] = Point(125, 10);Pt[1] = Point( 95, 70);Pt[2] = Point(155, 70);
Canvas->Brush->Color = clGreen;Canvas->Polygon(Pt, 2);
// Left TrianglePt[0] = Point( 80, 80);Pt[1] = Point( 20, 110);Pt[2] = Point( 80, 140);
Canvas->Brush->Color = clRed;Canvas->Polygon(Pt, 2);
// Bottom TrianglePt[0] = Point( 95, 155);Pt[1] = Point(125, 215);Pt[2] = Point(155, 155);
Canvas->Brush->Color = clYellow;Canvas->Polygon(Pt, 2);
// Right TrianglePt[0] = Point(170, 80);Pt[1] = Point(170, 140);Pt[2] = Point(230, 110);
Canvas->Brush->Color = clBlue;Canvas->Polygon(Pt, 2);
![Page 44: Laboratório de Programação I](https://reader036.vdocuments.com.br/reader036/viewer/2022062422/56813a20550346895da1f91b/html5/thumbnails/44.jpg)
Alterando o sistema de coordenadas
As vezes pode ser necessário alterar a posição das coordenadas iniciais. Para isso usa-se a função
void __fastcall MoveWindowOrg(HDC DC, int DX, int DY);
DX e DY são as novas coordenadas X e Y
void __fastcall TForm1::FormPaint(TObject *Sender) { HDC hDC = this->Canvas->Handle; MoveWindowOrg(hDC, ClientWidth/2, ClientHeight/2);
Canvas->Pen->Color = clBlue; Canvas->Ellipse(-100, -100, 100, 100); Canvas->Pen->Color = clBlack; Canvas->MoveTo(ClientWidth/2, 0); Canvas->LineTo(ClientWidth/2, ClientHeight); Canvas->MoveTo(0, ClientHeight/2); Canvas->LineTo(ClientWidth, ClientHeight/2); }