Canvas adalah salah satu properti yang dimiliki oleh form, tombol, dan tiap bagian yang terlihat di window. Canvas digunakan untuk mengubah tampilan atau untuk menggambar setelah adanya event onPaint atau beberapa event lain.
Dalam properti canvas, ada 5 method yang bisa kita gunakan untuk menampilkan bentuk tertentu. 5 method tersebut, yaitu :
Potongan kode program tersebut harus diletakkan dalam event OnPaint yang bisa kalian tambahkan dari tab event dalam "Object Inspector". Kalian bisa menambahkan event dengan melakukan klik ganda.
Selain dalam event OnPaint, kalian juga bisa menggunakan canvas dalam event yang terkait dengan timer, keyboard dan mouse. Walaupun begitu, kalian tidak bisa menggunakan canvas dalam event OnCreate dan beberapa event lain. Untuk memastikannya, silakan dicoba sendiri.
Menampilkan Text dalam Canvas
Untuk menampilkan text dalam canvas, kalian bisa menggunakan method TextOut() dan TextRect(). Kedua method tersebut membutuhkan properti Font. Dalam properti font, kalian bisa menemukan properti Size dan Color untuk menentukan ukuran dan warna huruf.
Selain menggunakan textOut(), kalian bisa juga menampilkan tulisan dengan TextRect(). Bedanya, kalian bisa menampilkan beberapa baris teks sekaligus dengan TextRect(). Berikut ini adalah contoh kode program yang bisa kalian gunakan dalam event OnPaint.
Properti WordBreak dan LineBreak diperlukan untuk menampilkan teks dalam beberapa baris. Selain itu, batas dari area untuk menampilkan text bisa kalian ubah dengan mengubah nilai dari variabel rct.
Dalam properti canvas, ada 5 method yang bisa kita gunakan untuk menampilkan bentuk tertentu. 5 method tersebut, yaitu :
- Ellipse()
- Rectangle()
- Line()
- TextOut()
- TextRect()
begin
Form1.Canvas.Brush.Color:=RGBToColor(0, 0, 250);
Form1.Canvas.Pen.Color:=RGBToColor(255, 0, 250);
Form1.Canvas.Pen.Width:=5;
Canvas.Rectangle(3,3,200, 200);
Canvas.Ellipse(3,3,200, 200);
Canvas.Line(3,3,200, 200);
end;
Potongan kode program di atas menggunakan properti color yang dimiliki oleh Pen dan Brush. Selain itu, ketebalan garis bisa diatur dengan properti Width dari Pen. Warnanya menggunakan tipe data khusus sehingga kalian akan memerlukan method RGBToColor untuk menentukan warnanya berdasarkan nilai RGB.Potongan kode program tersebut harus diletakkan dalam event OnPaint yang bisa kalian tambahkan dari tab event dalam "Object Inspector". Kalian bisa menambahkan event dengan melakukan klik ganda.
Selain dalam event OnPaint, kalian juga bisa menggunakan canvas dalam event yang terkait dengan timer, keyboard dan mouse. Walaupun begitu, kalian tidak bisa menggunakan canvas dalam event OnCreate dan beberapa event lain. Untuk memastikannya, silakan dicoba sendiri.
Menampilkan Text dalam Canvas
Untuk menampilkan text dalam canvas, kalian bisa menggunakan method TextOut() dan TextRect(). Kedua method tersebut membutuhkan properti Font. Dalam properti font, kalian bisa menemukan properti Size dan Color untuk menentukan ukuran dan warna huruf.
begin
Form1.Canvas.Brush.Color:=RGBToColor(0, 0, 250);
Form1.Canvas.Brush.Style:=bsClear;
Form1.Canvas.Font.Color:=RGBToColor(255, 0, 250);
Form1.Canvas.Font.Size:=24;
Form1.Canvas.TextOut(4, 4, 'Ini cuma Contoh');
end;
Jika kalian ingin latar belakang dari teks jadi transparan, maka gunakan Brush.Style dengan nilai bsClear. Jika kalian tidak mengatur nilai properti style dari Brush maka warnanya akan sesuai nilai dari Brush.Color.Selain menggunakan textOut(), kalian bisa juga menampilkan tulisan dengan TextRect(). Bedanya, kalian bisa menampilkan beberapa baris teks sekaligus dengan TextRect(). Berikut ini adalah contoh kode program yang bisa kalian gunakan dalam event OnPaint.
var rct:TRect;
styleku:TTextStyle;
begin
//atur warna dan ukurannya
Form1.Canvas.Brush.Color:=RGBToColor(0, 0, 250);
Form1.Canvas.Brush.Style:=bsClear;
Form1.Canvas.Font.Color:=RGBToColor(255, 0, 0);
Form1.Canvas.Font.Size:=12;
//atur stylenya
styleku:=Form1.Canvas.TextStyle;
styleku.Wordbreak:=True;
styleku.SingleLine:=False;
//atur batasnya dan tampilkan
rct:=Rect(0, 0, 200, 800);
Form1.Canvas.TextRect(rct, 4, 4, 'Ini cuma Contoh paragraf.' +
' Dalam paragraf ini ada beberapa kalimat.' +
' Ini adalah kalimat terakhir', styleku);
end;
Silakan diperhatikan kode program di atas!Properti WordBreak dan LineBreak diperlukan untuk menampilkan teks dalam beberapa baris. Selain itu, batas dari area untuk menampilkan text bisa kalian ubah dengan mengubah nilai dari variabel rct.