Web Teknologi 3 (MKB721C) Minggu 11 Page 1 MINGGU 11 Web Teknologi 3 (MKB721C) Pokok Bahasan: –Canvas lanjutan Tujuan Instruksional Khusus: –Siswa memahami.

Presentasi berjudul: "Web Teknologi 3 (MKB721C) Minggu 11 Page 1 MINGGU 11 Web Teknologi 3 (MKB721C) Pokok Bahasan: –Canvas lanjutan Tujuan Instruksional Khusus: –Siswa memahami."— Transcript presentasi:

1

2 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

3 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

4 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()

5 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 ); }

6 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

7 Anchor point pada drawImage()

8 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

9 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

10 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

11 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

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

13 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()

14 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()

15 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.

16 Ilustrasi Double Buffering

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

18 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”

19 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

20