Laboratório de Programação I

1. Laboratório de Programação I Carlos Oberdan Rolim Ciência da Computação Sistemas de Informação

2. Canvas

3. 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

4. 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

5. Canvas • Tudo que vai ser desenhado baseia-se nessa origem e nas coordenadas X e Y

6. TCanvas • O objeto TCanvas contém tudo que precisa-se para desenhar • Linhas e seus derivados • Circulos • Curvas • Textos

7. Linhas • Linha é a união de dois pontos (inicio e fim)

8. 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)

9. 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

10. Linhas Chamadas subsequentes de LineTo() continua a partir da última coordenada definida pelo LineTo() anterior Canvas->MoveTo(60, 20); Canvas->LineTo(60, 122); Canvas->LineTo(264, 122); Canvas->LineTo(60, 20);

11. 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 pontos • Points_Size = o número de membros do array • Quando inicializado é criada um linha de Point[0] até Point[1]

12. 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);

13. Múltiplas Polylines 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) • Pode 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);

14. 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);

15. 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

16. Multiplos Poligonos // Right Triangle Pt[9] = Point(170, 80); Pt[10] = Point(170, 140); Pt[11] = Point(230, 110); HDC hDC = Canvas->Handle; PolyPolygon(hDC, Pt, lpPts, 4); TPoint Pt[12]; int lpPts[] = { 3, 3, 3, 3 }; // Top Triangle Pt[0] = Point(125, 10); Pt[1] = Point( 95, 70); Pt[2] = Point(155, 70); // Left Triangle Pt[3] = Point( 80, 80); Pt[4] = Point( 20, 110); Pt[5] = Point( 80, 140); // Bottom Triangle Pt[6] = Point( 95, 155); Pt[7] = Point(125, 215); Pt[8] = Point(155, 155);

17. Retangulos • Forma geometrica composta por quatro cantos (pontos)

18. Retangulos • Função void __fastcall Rectangle(int X1, int Y1, int X2, int Y2); Exemplo: Canvas->Rectangle(20, 20, 226, 144);

19. 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);

20. Círculos / Elipses • Elipses são desenhadas no interior de retangulos segundo suas coordenadas

21. 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);

22. Retângulo arredondado • Pode-se criar retângulos com os cantos arredondados

23. 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);

24. Pie • Pie é uma fração de uma elipse delimitada por duas linhas que cortam a elipse partindo do centro em direção a borda

25. 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);

26. Arcs • Arcs é uma porção ou segmento de uma elipse. Ou seja, é uma elipse não completa • Usa mesmas coodernadas da elipse como base

27. 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);

28. 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);

29. Chords • São como arcs porém fechados através de uma linha

30. 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);

31. Curvas de Bezier • São um tipo de arc baseados no número de pontos. • Utiliza no mínimo quatro pontos

32. 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);

33. 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");

34. 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");

35. Propriedades do texto • Pode-se alterar o texto da seguinte forma Canvas->Font->Size = 120; Canvas->Font->Name = "Garamond"; Canvas->TextOut(26, 24, “Ober");

36. 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);

37. 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");

38. 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");

39. 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);

40. Pen • Pode-se alterar o tipo da linha usada

41. Pen • Exemplo Canvas->Pen->Style = psDashDotDot; Canvas->Pen->Width = 1; Canvas->Pen->Color = TColor(RGB(255, 25, 5)); Canvas->Rectangle(20, 22, 250, 125);

42. 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);

43. // 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); 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);

44. 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); }