Menggambar di Canvas

Seri User Interface

Menggambar di Canvas

Chocolove Mic
chocolove_mic@yahoo.co.uk
http://www.mycgiserver.com/~chocolove2003
Canvas, sesuai namanya guna objek ini untuk mengambar. Selain itu sifanya hampir sama
dengan objek lain yang bisa ditambahkan objek-objek lain kedalamnya seperti penambahan
objek command. Objek canvas sering digunakan untuk membuat aplikasi game. Pada bagian
ini akan diberikan contoh bagaimana menggambar di canvas.
Membuat dan Menambahkan Canvas
Yang dilakukan terlebih dahulu adalah membuat class Canvas yang nantinya akan dipanggil
sebagai objek. Berikut adalah contoh kodenya.
GUIMidlet01.java
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class GUIMidlet01 extends MIDlet implements CommandListener {
private Display display;
private Canvas canvas;
private Command cmdKeluar;
public GUIMidlet01() {
cmdKeluar = new Command("Keluar", Command.SCREEN, 1);
canvas = new CanvasGUIMidlet01();
canvas.addCommand(cmdKeluar);
}
public void startApp() {
display = Display.getDisplay(this);
display.setCurrent(canvas);
canvas.setCommandListener(this);
}
public void pauseApp() {
}
Lisensi Dokumen:
Copyright © 2003 IlmuKomputer.Com
Seluruh dokumen di IlmuKomputer.Com dapat digunakan, dimodifikasi dan
disebarkan secara bebas untuk tujuan bukan komersial (nonprofit), dengan syarat
tidak menghapus atau merubah atribut penulis dan pernyataan copyright yang
disertakan dalam setiap dokumen. Tidak diperbolehkan melakukan penulisan ulang,
kecuali mendapatkan ijin terlebih dahulu dari IlmuKomputer.Com.
Kuliah Berseri IlmuKomputer.Com
Copyright © 2003 IlmuKomputer.Com
Tips J2ME
Chocolove Mic
2
public void destroyApp(boolean unconditional) {
}
public void commandAction(Command c, Displayable d) {
if (d == canvas) {
if (c == cmdKeluar) {
destroyApp(false);
notifyDestroyed();
}
}
}
}
class CanvasGUIMidlet01 extends Canvas {
public void paint(Graphics g) {
}
}
Sumber : -
Hasil dari GUIMidlet01 hanya menampilan layar kosong dengan perintah Keluar.
Setting Font
Berikut adalah contoh menggambar tulisan pada canvas.
GUIMidlet02.java
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class GUIMidlet02 extends MIDlet implements CommandListener {
private Display display;
private Canvas canvas;
private Command cmdKeluar;
public GUIMidlet02() {
cmdKeluar = new Command("Keluar", Command.SCREEN, 1);
canvas = new CanvasGUIMidlet01();
canvas.addCommand(cmdKeluar);
}
public void startApp() {
display = Display.getDisplay(this);
display.setCurrent(canvas);
canvas.setCommandListener(this);
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
}
public void commandAction(Command c, Displayable d) {
if (d == canvas) {
if (c == cmdKeluar) {
destroyApp(false);
notifyDestroyed();
}
}
}
}
Kuliah Berseri IlmuKomputer.Com
Copyright © 2003 IlmuKomputer.Com
Tips J2ME
Chocolove Mic
3
class CanvasGUIMidlet02 extends Canvas {
public void paint(Graphics g) {
g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD,
Font.SIZE_LARGE));
g.drawString("Chocolove!", 0, 0, g.TOP|g.LEFT);
g.setFont(Font.getFont(Font.FACE_PROPORTIONAL,Font.STYLE_UNDERLINED,
Font.SIZE_LARGE));
g.drawString("Chocolove!", getWidth()/2, getHeight()/2, g.TOP|g.HCENTER);
g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_ITALIC,
Font.SIZE_MEDIUM));
g.drawString("Chocolove!", getWidth(), getHeight(), g.BOTTOM|g.RIGHT);
}
}
Sumber : -
Hasil dari contoh di atas adalah sebagai berikut :
Pada kode di atas terdapat baris sebagai berikut :
g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_ITALIC, Font.SIZE_MEDIUM));
setFont adalah method yang dimiliki oleh objek g yang berguna untuk melakukan setting font.
Untuk jenis font, style font dan ukuran font digunakan objek Font dan method getFont.
Method ini berguna untuk mengambil nilai jenis, style dan ukuran font. Untuk masing-masing
nilai telah disediakan oleh objek Font dalam fieldnya. Berikut adalah nilai-nilai dari field-field
tersebut.
Kelompok jenis (face) font :
• FACE_MONOSPACE.
• FACE_PROPOTIONAL.
• FACE_SYSTEM.
Kelompok style font :
• STYLE_BOLD.
• STYLE_ITALIC.
• STYLE_PLAIN.
• STYLE_UNDERLINED.
Kelompok ukuran font :
• SIZE_LARGE.
• SIZE_MEDIUM.
• SIZE_SMALL.
Kuliah Berseri IlmuKomputer.Com
Copyright © 2003 IlmuKomputer.Com
Tips J2ME
Chocolove Mic
4
Petunjuk
Untuk lebih lengkapnya bisa dibaca pada referensi tentang MIDP API pada bagian class
Graphics.
Pada kode di atas terdapat baris sebagai berikut :
g.drawString("Chocolove!", getWidth(), getHeight(), g.BOTTOM|g.RIGHT);
Method ini adalah cara untuk melukis string pada canvas. Yang perlu diperhatikan bagian
g.BOTTOM|g.RIGHT, bagian ini merupakan titik pusat dari objek yang akan digambar.
Menggambar di Canvas
Yang terakhir pada tulisan ini akan diberikan contoh bagaimana menggambar objek seperti
kotak, lingkaran dan mewarnai objek tersebut.
GUIMidlet03.java
import javax.microedition.midlet.*;
import javax.microedition.lcdui.*;
public class GUIMidlet03 extends MIDlet implements CommandListener{
private Command cmdKeluar;
private Canvas canvas;
private Display display;
public GUIMidlet03() {
cmdKeluar = new Command("Keluar", Command.SCREEN, 0);
canvas = new CanvasGUIMidlet03();
canvas.addCommand(cmdKeluar);
}
public void startApp() {
display = Display.getDisplay(this);
display.setCurrent(canvas);
canvas.setCommandListener(this);
}
public void pauseApp() {
}
public void destroyApp(boolean unconditional) {
}
public void commandAction(Command c, Displayable d) {
if (d == canvas) {
if (c == cmdKeluar) {
destroyApp(false);
notifyDestroyed();
}
}
}
}
class CanvasGUIMidlet03 extends Canvas {
public void paint(Graphics g) {
/* background color luar - COKLAT */
g.setColor(210, 135, 28);
g.fillRect(0, 0, getWidth(), getHeight());
/* background color dalam - PUTIH */
Kuliah Berseri IlmuKomputer.Com
Copyright © 2003 IlmuKomputer.Com
Tips J2ME
Chocolove Mic
5
g.setColor(255, 255, 255);
g.fillRect(3, 20, getWidth()-7, getHeight()-27);
/* warna border - HITAM */
g.setColor(0, 0, 0);
/* border luar */
g.drawRect(0, 1, getWidth()-1, getHeight()-3);
/* border dalam */
g.setStrokeStyle(g.DOTTED);
g.drawRect(3, 20, getWidth()-8, getHeight()-27);
g.drawRect(4, 21, getWidth()-10, getHeight()-29);
/* judul */
g.setColor(255, 255, 255);
g.setFont(Font.getFont(Font.FACE_SYSTEM,Font.STYLE_BOLD,
Font.SIZE_LARGE));
g.drawString("e-ChocO", getWidth()/2, 1, g.TOP|g.HCENTER);
/* layar dan tombol */
g.setStrokeStyle(g.SOLID);
g.setColor(0, 0, 0);
g.drawRoundRect(8, 25, getWidth()-40, getHeight()-37, 3, 3);
g.drawRoundRect(getWidth()-28, 25, 19, getHeight()-57, 3, 3);
g.drawArc(getWidth()-26, getHeight()-28, 16, 16, 0, 360);
}
}
Sumber : -
Berikut adalah tampilan dari aplikasi di atas yang dijalankan pada emulator Nokia seri 60.