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

Apresentação em tema: "Laboratório de Programação I Carlos Oberdan Rolim Ciência da Computação Sistemas de Informação."— Transcrição da apresentação:

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

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

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

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 (RGB(250, 25, 5)); Canvas->Rectangle(20, 20, 250, 125);

43 Brushes Canvas->Brush->Color = static_cast (RGB(255, 2, 5)); TPoint Pt[3]; // Top Triangle Pt[0] = Point(125, 10); Pt[1] = Point( 95, 70); Pt[2] = Point(155, 70); Canvas->Brush->Color = clGreen; Canvas->Polygon(Pt, 2); // Left Triangle Pt[0] = Point( 80, 80); Pt[1] = Point( 20, 110); Pt[2] = Point( 80, 140); Canvas->Brush->Color = clRed; Canvas->Polygon(Pt, 2); // Bottom Triangle Pt[0] = Point( 95, 155); Pt[1] = Point(125, 215); Pt[2] = Point(155, 155); Canvas->Brush->Color = clYellow; Canvas->Polygon(Pt, 2); // Right Triangle Pt[0] = Point(170, 80); Pt[1] = Point(170, 140); Pt[2] = Point(230, 110); Canvas->Brush->Color = clBlue; 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); }