Embed Size (px)
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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); }
