1 / 44

Laboratório de Programação I

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.

jesus
Télécharger la présentation

Laboratório de Programação I

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

More Related