Web Teknologi 3 (MKB721C) Minggu 11 Page 1 MINGGU 11 Web Teknologi 3 (MKB721C) Pokok Bahasan: –Canvas lanjutan Tujuan Instruksional Khusus: –Siswa memahami cara mengukur ukuran Text pada Canvas –Siswa dapat menggambar image pada Canvas –Siswa dapat menggunakan Key & Pointer Event –Siswa memahami proses multithreading & animasi pada Java ME

Agenda Measuring Text pada Canvas Drawing image pada Canvas Advanced Image Rendering Images sbg array integer Key Event pada Canvas Pointer Event pada Canvas Multithreading & Animation

Measuring Text pada Canvas Untuk mendapatkan ukuran dari width dari Text digunakan fungsi pada class Font sebagai berikut: 1.public int charWidth(char ch) 2.public int charsWidth(char ch, int offset, int length) 3.public int stringWidth(String str) 4.public int substringWidth(String str, int offset, int len) 5.public int getHeight()

Contoh Measuring Text public void paint(Graphics g) { int w = getWidth(); int h = getHeight(); g.setColor(0xffffff); g.fillRect(0, 0, w, h); g.setColor(0x000000); String s = "dolce"; int stringWidth = mFont.stringWidth(s); int stringHeight = mFont.getHeight(); int x = (w - stringWidth) / 2; int y = h / 2; g.setFont(mFont); g.drawString(s, x, y, Graphics.TOP | Graphics.LEFT); g.drawRect(x, y, stringWidth, stringHeight); System.out.print(stringWidth +" "+ stringHeight ); }

Menggambar image drawImage() & drawRegion 1 Fungsi drawImage() & drawRegion () digunakan untuk merender image pada objek grafik. Syntax: –public void drawImage(Image image, int x, int y, int anchor) Parameters: –image - the specified image to be drawn –x - the x coordinate of the anchor point –y - the y coordinate of the anchor point –anchor - the anchor point for positioning the image Throws: –IllegalArgumentException - if anchor is not a legal value –NullPointerException - if img is null

Anchor point pada drawImage()

Menggambar image drawImage() & drawRegion 2 Syntax: –public void drawRegion(Image src, int x_src, int y_src, int width, int height, int transform, int x_dest, int y_dest, int anchor) Parameters: –src - the source image to copy from –x_src - the x coordinate of the upper left corner of the region within the source image to copy –y_src - the y coordinate of the upper left corner of the region within the source image to copy –width - the width of the region to copy –height - the height of the region to copy –transform - the desired transformation for the selected region being copied –x_dest - the x coordinate of the anchor point in the destination drawing area –y_dest - the y coordinate of the anchor point in the destination drawing area –anchor - the anchor point for positioning the region within the destination image Throws: –IllegalArgumentException - if src is the same image as the destination of this Graphics object –NullPointerException - if src is null –IllegalArgumentException - if transform is invalid –IllegalArgumentException - if anchor is invalid –IllegalArgumentException - if the region to be copied exceeds the bounds of the source image

Menggambar integer array dengan drawRGB() & drawRGB16() Fungsi: untuk melakukan rendering suatu array (kumpulan titik berwarna termasuk transparan), pada suatu area. Syntax: –Void drawRGB(int[] rgbData, int offset, int scanlength, int x, int y, int width, int height, boolean processAlpha) –Void drawRGB16(short[] rgbData, int offset, int scanlength, int x, int y, int width, int height) Parameters: –rgbData : an array of ARGB values in the format 0xAARRGGBB / an array of 16-bit RGB values –offset : the array index of the first RGB value –scanlength : the relative array offset between the corresponding pixels in consecutive rows in the rgbData array –x: the horizontal location of the region to be rendered –y: the vertical location of the region to be rendered –width : the width of the region to be rendered –height : the height of the region to be rendered Throws: –ArrayIndexOutOfBoundsException - - if the requested operation will attempt to access an element of argbData whose index is either negative or beyond its length –NullPointerException - - if rgbData is null

Teknik Blitting Definisi: teknik untuk menyalin suatu area pada screen ke lokasi lain, yang umumnya digunakan pada games. Teknik blitting menggunakan fungsi copyArea() dari class Graphics. Syntax: –public void copyArea(int x_src, int y_src, int width, int height, int x_dest, int y_dest, int anchor) Parameters: –x_src - the x coordinate of upper left corner of source area –y_src - the y coordinate of upper left corner of source area –width - the width of the source area –height - the height of the source area –x_dest - the x coordinate of the destination anchor point –y_dest - the y coordinate of the destination anchor point –anchor - the anchor point for positioning the region within the destination image Throws: –java.lang.IllegalStateException - if the destination of this Graphics object is the display device –IllegalArgumentException - if the region to be copied exceeds the bounds of the source image

Clipping Definisi: klip dari suatu shape yang dapat dirender di Canvas Fungsi-fungsi clipping: –public void clipRect(int x, int y, int width, int height); –public void setClip(int x, int y, int width, int height); Parameters: –x - the x coordinate of the rectangle to intersect the clip with –y - the y coordinate of the rectangle to intersect the clip with –width - the width of the rectangle to intersect the clip with –height - the height of the rectangle to intersect the clip with

Mengakses property clippling yang aktif Untuk mengkases property clipping yang diaktif digunakan fungsi: –getClipX() –getClipY(), –getClipWidth() –getClipHeight()

Key events Key events pada class Canvas membutuhkan penanganan tersendiri saat tombol ditekan oleh pengguna. Method yang tersedia pada class Canvas untuk key events adalah (lecture note 10: event delivery): 1.keyPressed() 2.keyRepeated() 3.keyReleased()

Pointer events Key events pada class Canvas membutuhkan penanganan tersendiri saat pointer digunakan oleh pengguna. Method yang tersedia pada class Canvas untuk pointer events adalah: 1.pointerPressed() 2.pointerDragged() 3.pointerReleased()

Teknik Double Buffering Definisi: teknik menggambar secara off-screen (offline), untuk menggurangi efek fliker (berkedip) pada gambar/animasi. Proses double buffering: 1.Buat off-screen image dengan fungsi static Image.createImage(int width, int height). 2.Dapatkan handle Graphics dengan menggunakan method getGraphics();. 3.Gambarkan/render semua object pada off-screen image. 4.Pada method pain(), gunakan drawImage() untuk memindahkan off-screen ke Canvas.

Ilustrasi Double Buffering

Multithreading and Animation Multithreading digunakan untuk menghandle user-interface dan menggambar di screen. Contoh saat tombol di tekan pada Canvas akan memanggil method keyPressed()

Review & Latihan W11 1.Buatlah flow diagram disamping 2.Object flashscreen berisi a.Title “Welcome” b.Picture 200 x 150 pixel c.Spash screen “Web Teknologi Java ME 3.Object form berisi: a.Title “Menu Utama” b.Command 1.exitCommand label “Exit” 2.MainkanCommand label “Mainkan”

4.Buat class W11 extend Canvas & implement CommandListener a.Title “Fun” b.Renderlah suatu image berukuran 40 x 40 pixel untuk background c.Gambarlah lingkaran warnai dengan warna kuning, 30 – 300 drajat. d.Key Action a.Tombol 2 untuk menggerakan objek ke atas b.Tombol 6 untuk menggerakan objek ke kanan c.Tombol 8 untuk menggerakan objek ke bawah d.Tombol 4 untuk menggerakan objek ke kiri