Laboratório de Programação I

Carlos Oberdan Rolim

Ciência da ComputaçãoSistemas 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

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

Canvas

Tudo que vai ser desenhado baseia-se nessa origem e nas coordenadas X e Y

TCanvas

O objeto TCanvas contém tudo que precisa-se para desenhar

Linhas e seus derivados

Circulos

Curvas

Textos

Linhas

Linha é a união de dois pontos (inicio e fim)

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)

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

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

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]

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

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)

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

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

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

Retangulos

Forma geometrica composta por quatro cantos (pontos)

Retangulos

Função

void __fastcall Rectangle(int X1, int Y1, int X2, int Y2);

Exemplo:

Canvas->Rectangle(20, 20, 226, 144);

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

Círculos / Elipses

Elipses são desenhadas no interior de retangulos segundo suas coordenadas

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

Retângulo arredondado

Pode-se criar retângulos com os cantos arredondados

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

Pie

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

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

Arcs

Arcs é uma porção ou segmento de uma elipse. Ou seja, é uma elipse não completa

Usa mesmas coodernadas da elipse como base

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

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

Chords

São como arcs porém fechados através de uma linha

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

Curvas de Bezier

São um tipo de arc baseados no número de pontos.

Utiliza no mínimo quatro pontos

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

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

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

Propriedades do texto

Pode-se alterar o texto da seguinte forma

Canvas->Font->Size = 120;

Canvas->Font->Name = "Garamond";

Canvas->TextOut(26, 24, “Ober");

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

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

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

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

Pen

Pode-se alterar o tipo da linha usada

Pen

Exemplo

Canvas->Pen->Style = psDashDotDot;

Canvas->Pen->Width = 1;

Canvas->Pen->Color = TColor(RGB(255, 25, 5));

Canvas->Rectangle(20, 22, 250, 125);

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

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

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