14.17 TCanvas
O TCanvas trata-se do objeto que representa a superfície visível de um componente. Neste objeto pode-se colocar imagens, ou até mesmo desenhá-las através de elementos básicos como Retângulos, Elipses e Arcos. Pode-se também traçar uma figura ponto a ponto.
O TCanvas é formado por pontos (“pixels”) dispostos como uma matriz de pontos. Cada ponto tem uma cor específica determinada pela propriedade Pixels.
A origem do TCanvas, isto é o ponto de coordenadas (0,0), ao contrário do sistema cartesiano, é no canto superior esquerdo, orientado para a direita e para baixo.
Principais propriedades e métodos:
· Pixels – Propriedade do tipo Tcolor que indica a cor de cada um dos pontos (pixels) que formam o Canvas.
Exemplo:
Para alterar a cor do ponto que está na coordenada (10,10) para Azul podemos digitar:
Image1->Canvas->Pixels[10][10] = clBlue;
· Pen – Propriedade do tipo TPen que determina o estilo da caneta que será utilizada para desenhar no Canvas (através dos métodos LineTo e MoveTo, por exemplo).
Exemplos:
Para altera a cor da caneta do Canvas do componente Image1 para Vermelho podemos digitar:
Image1->Canvas->Pen->Color=clRed;
Para alterar a espessura do traço podemos digitar:
Image1->Canvas->Pen->Width=3;
· Brush – Propriedade do tipo TBrush que determina o estilo de preenchimento utilizado no Canvas (por exemplo, pelo método FillRect).
Exemplo:
Para alterar a cor do preenchimento para Azul, podemos digitar:
Image1->Canvas->Brush->Color=clBlue;
· FillRect – Método utilizado para preencher uma porção retangular do Canvas pelo estilo especificado pelo Brush.
Exemplo:
Para preencher um retângulo de vértices nos pontos (50,50) e (100,100), podemos digitar:
Image1->Canvas->FillRect(Rect(50,50,100,100));
· MoveTo – Método utilizado para mover a caneta para um determinado ponto do Canvas. Este método apenas move a caneta, sem desenhar.
Exemplo:
Image1->Canvas->MoveTo(100,100);
· LineTo – Método utilizar para traçar uma reta desde o ponto atual até o ponto especificado.
Exemplo:
Para desenhar um triângulo de vértices (50,50) (50,100) e (100,100), podemos digitar:
Image1->Canvas->MoveTo(50,50);
Image1->Canvas->LineTo(50,100);
Image1->Canvas->LineTo(100,100);
Image1->Canvas->LineTo(50,50);
Figura 14-22
exemplo do resultado dos métodos moveto e lineto
· Font – Propriedade do tipo TFont que determina como os textos serão escritos no Canvas (pelo método TextOut, por exemplo).
· TextOut – Método que exibe um texto no Canvas na coordenada especificada.
Exemplo:
Image1->Canvas->TextOut(50,50,”Exemplo”);
· Rectangle – Método que desenha um retângulo no Canvas. Deve-se especificar as coordenadas do canto superior esquerdo e do canto inferior direito.
Exemplo:
Image1->Canvas->Rectangle(50,50,100,100);
· Ellipse – Método que desenha uma elipse inscrita dentro de um retângulo imaginário.
Exemplo:
Image1->Canvas->Ellipse(50,50,100,100);
.
.
.
Ex 4) Elaborar um programa em C++Builder para exibir a curva da função:
f(x) = 100 seno(x) + 100
Solução:
· Ao se analisar a função podes-se constatar que para qualquer valor de X, o valor máximo da função é 200 e o mínimo 0.
· Sendo f(x) uma função senoidal ela é cíclica, ou seja o intervalo de 0º a +360º representa significativamente o comportamento de f(x).
· Normalmente as funções exigem alguma forma de “Módulo de Escala” para ser exibida apropriadamente. Para se poder desprezar este procedimento o objeto do tipo TImage deve ser do tamanho de 360x200 pixels
· A função se comporta conforme a gravura abaixo, onde se pode detectar: Valor inicial de X (Xo); Valor final de X (Xn); Número de divisões (n) e o Passo (h).
Figura 14-27
gráfico da função 100*sen(x)+100
· O passo pode ser calculado se dividindo o intervalo de Xo a Xn pelo número de divisões (n).
· Os valores que X assume podem ser calculados pela seguinte PA (progressão aritmética):
Xi = Xo + i . h
· Os valores de Y podem ser calculados pela própria função:
Yi = 100 . seno(x) + 100
Figura 14-28
tela do aplicativo da função f(x)=100*sin(x)+100
//-----------------------------------------------------
#include <vcl\vcl.h>
#pragma hdrstop
#include "Unit1.h"
//-----------------------------------------------------
#pragma resource "*.dfm"
//-----------------------------------------------------
#include <math.h>
#define PI 3.1415926535897932384626433832795
//-----------------------------------------------------
TForm1 *Form1;
double DegToRad(double Alfa)
{
return (Alfa*PI/180);
}
//-----------------------------------------------------
__fastcall TForm1::TForm1(TComponent* Owner)
: TForm(Owner)
{
}
//-----------------------------------------------------
void __fastcall TForm1::Button1Click(TObject *Sender)
{
int xi,yi,i,n;
double h,x0,xn;
x0=StrToFloat(Edit1->Text);
xn=StrToFloat(Edit2->Text);
n=StrToInt(Edit3->Text);
h=(xn-x0)/n;
Image1->Canvas->Pen->Color = clRed;
/* Desenho da função */
for (i=0;i<=n;i++)
{
xi=(int)(x0+i*h);
yi=(int)(100*sin(DegToRad(xi))+100);
if (i==0)
Image1->Canvas->MoveTo(xi,200-yi);
else
Image1->Canvas->LineTo(xi,200-yi);
}
/* Desenho dos eixos de R2 */
Image1->Canvas->Pen->Color = clBlack;
Image1->Canvas->MoveTo(0,100);
Image1->Canvas->LineTo(360,100);
Image1->Canvas->MoveTo(0,0);
Image1->Canvas->LineTo(0,200);
}
//-----------------------------------------------------
Observações:
· Pode-se notar que os valores de Xi e Yi são arredondados pela chamada (int). Faz-se isso pois as coordenadas (X,Y) do Canvas são inteiras.
· A expressão 200-Yi que aparece nos métodos MoveTo e LineTo serve para inverter o gráfico, fazendo com que a origem do Canvas coincida com a origem do plano cartesiano. O valor 200 é exatamente a altura do Canvas.
