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
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 pontos
Points_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 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)
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 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);
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
// Bottom Triangle
Pt[0] = Point( 95, 155);
Pt[1] = Point(125, 215);
Pt[2] = Point(155, 155);
Canvas->Brush->Color =
static_cast<TColor>(RGB(255, 2, 5));
Canvas->Brush->Color = clYellow;
Canvas->Polygon(Pt, 2);
TPoint Pt[3];
// Right Triangle
Pt[0] = Point(170, 80);
Pt[1] = Point(170, 140);
Pt[2] = Point(230, 110);
// 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);
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);
}