KineticJS: Menggambar Objek Sederhana

KineticJS: Menggambar Objek Sederhana

Tutorial Information

ProgramJavascript
DifficultyPemula
Estimated Time15 Menit

Salah satu fitur menarik dalam standar HTML5 yaitu kemampuannya dalam menyediakan area untuk menggambarpada browser, yang disebut sebagai canvas. Pada versi HTML sebelumnya, developer…

Salah satu fitur menarik dalam standar HTML5 yaitu kemampuannya dalam menyediakan area untuk menggambarpada browser, yang disebut sebagai canvas. Pada versi HTML sebelumnya, developer akan kesulitan ketika harus menggambar sebuah objek sederhana, seperti lingkaran, persegi panjang, elips, garis, atau bidang dua dimensi dengan sembarang sisilainnya. Tentu saja, HTML tidak berdiri sendiri untuk melakukan tugas tersebut. HTML harus menggunakan bantuan JavaScript untuk menentukan parameter-parameter objek yang dibutuhkan.

Sampai saat ini, sudah banyak tersedia pustaka (library) JavaScript yang bisa dimanfaatkan untuk menggambar objek. Salah satunya yaitu library KineticJS. KineticJS berisi sekumpulan pustaka(library), method, event, dan prosedur yang khusus digunakan untuk menggambar objek dua dimensi, lengkap dengan animasi, transisi, dan efek-efek interaktif lainnya.

Pada tutorial ini akan dijelaskan bagaimana cara menggambar objek-objek sederhana dengan library KineticJS. Secara umum, KineticJS sudah menyediakan objek-objek dasar seperti gambar garis, segiempat/persegi panjang, lingkaran, elips, bintang, textpath, blob, dan bidang tak beraturan. Sebelum mulai menggambar, pastikan pada script kita sudah menyertakan pemanggilan library KineticJS yang ditandai oleh baris kode seperti berikut.

<script src="kinetic-v4.3.1.min.js"></script>

Jika menggunakan baris kode di atas berarti kita harus mengunduh library KineticJS (dapat diunduh di www.kineticjs.com) terlebih dahulu, kemudian simpan ke dalam folder dokumen web masing-masing. Kita juga bisa memanggil script dari server luar tanpa harus mengunduhnya, misalnya kita mengambil script dari alamat http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js, maka baris kode yang diperlukan adalah sebagai berikut.

<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.3.1.js"></script>

Untuk menggambar objek, kita memerlukan deklarasi ‘stage’ dan ‘layer’. Stage mengacu pada bidang gambar secara keseluruhan. Dengan kata lain, semua objek yang digambar berada di atas area disebut‘stage’. Sedangkan Layer mengacu pada lapisan atau layer dimana sebuah objek digambar. Layer akan bermanfaat jika kita menggambar objek yang saling bertumpuk.

Contoh deklarasi stage dan layer pada KineticJS:

//Membuat Bidang Canvas (Stage)
	var stage = new Kinetic.Stage({
               container: 'container',
               width: 1000,
               height: 550
	});

	//Membuat Layer
	var layer = new Kinetic.Layer();

Untuk membuat sebuah objek tunggal, kita dapat menggunakan format penulisan sebagai berikut. Misalnya untuk menggambar lingkaran (Circle) dengan ukuran jari-jari 50px, berwarna merah, bergaris hitamdenganketebalan 2px,opacity (transparansi) = 0.40, pada posisi x=100px dan y=100px, maka kode JavaScript yang diperlukan adalah sebagai berikut.

var lingkaran = new Kinetic.Circle({
               x: 100,
               y: 100,
               radius:50,
               fill: 'red',
               stroke: 'black',
               strokeWidth: 2,
               opacity:0.40
	});

Bentuk, tampilan, dan warna objek tersebut dapat diatur sedemikian rupa dengan menambah dan memodifikasi atribut-atribut objek beserta nilainya. Detail dan manual penggunaan sintaks dasar KineticJS dapat disimak pada halaman http://kineticjs.com/docs/.

Beberapa contoh untuk membuat objek sederhana dengan KineticJS ditunjukkan oleh script index.html berikut.

<!DOCTYPE HTML>
<html>
<head>
	<title>KineticJS</title>
<style>
body {
margin: 0px;
padding: 0px;
      }

	  #container
	  {
		width:920px;
		height:500px;
		border:2px solid;
		margin-left:100px;

	  }

	  .judul
	  {
		margin-left:100px;
	  }
</style>
</head>
<body>

	<div class="judul">
		<h3>MenggambarObjekSederhanadenganKineticJS</h3>
	</div>
	<div id="container"></div>

<scriptsrc="kinetic-v4.3.1.min.js"></script>

<script>
		//MembuatBidang Canvas (Stage)
		var stage = new Kinetic.Stage({
			container: 'container',
			width: 1000,
			height: 550
		});

		//Membuat Layer
		var layer = new Kinetic.Layer();

		//MembuatObjekLingkaran
		varlingkaran = new Kinetic.Circle({
			x: 100,
			y: 100,
			radius:50,
			fill: 'red',
			stroke: 'black',
			strokeWidth: 2,
			opacity:0.40
		});

		//MembuatObjekPersegi
		varkotak = new Kinetic.Rect({
			x: 230,
			y: 50,
			fill: 'orange',
			width:100,
			height:100,
			draggable:0

		});

		//MembuatObjekPersegiPanjang
		varsegipanjang = new Kinetic.Rect({
			x: 400,
			y: 75,
			fill: 'blue',
			width:200,
			height:50,
			shadowBlur:10,
			shadowColor: 'green',
			draggable:0

		});

		//MembuatObjekBintang
		varbintang = new Kinetic.Star({
			x: 750,
			y: 100,
			numPoints: 5,
			innerRadius:30,
			outerRadius:80,
			fill: 'red',
			shadowBlur:10,
			shadowColor: 'red'
		});

		//MembuatObjekGarisLurus
		vargaris = new Kinetic.Line({
			x: 600,
			y: 100,
			points: [{x:0,y:100},{x:250,y:180}] ,

			stroke: '#D25328',
			strokeWidth: 5
        });

		//MembuatObjekPoligon (BanyakSisiTakBeraturan (Posisi Nodes BerlawananArahJarum Jam)
		varpoligon = new Kinetic.Polygon({
			x: 50,
			y: 250,
			points: [[0,1],[0,80], [30,100], [50,170], [120,190], [70,80]] ,
			fill: 'green',
			stroke: 'black',
			strokeWidth: 2
        });

		//MembuatObjekElips
		varelips = new Kinetic.Ellipse({
			x: 280,
			y: 270,
			radius: [100,50],
			fill: 'grey',
			stroke: 'black',
			strokeWidth: 2
        });

		//MembuatObjekParuhLingkaran (Wedge)
		varparuhlingkaran = new Kinetic.Wedge({
			x: stage.getWidth() / 2,
			y: stage.getHeight() / 2,
			radius: 100,
			angleDeg: 80,
			fill: 'magenta',
			stroke: 'black',
			strokeWidth: 4,
			rotationDeg: -150
        });

		//MembuatObjekTeks
		varteks = new Kinetic.Text({
			x: 500,
			y: 300,
			text:"Hello, World!",
			fontSize:70,
			fill: 'purple',
			stroke: 'black',
			strokeWidth: 2
        });

		//MembuatObjekTextPath
		vartextpath = new Kinetic.TextPath({
			x: 500,
			y: 370,
			fill: 'green',
			fontSize: '12',
			fontFamily: 'Arial',
			text: 'All the world\'s a stage, and all the men and women merely players.',
			data: 'M20,10 C0,0 10,150 120,100 S300,150 450,50'
		});

		// Membuat Blob
		varbiruBlob = new Kinetic.Blob({
			x: 130,
			y: 330,
			points: [{
				x: 73,
				y: 100
			}, {
				x: 340,
				y: 23
			}, {
				x: 300,
				y: 109
			}],
			stroke: 'marine',
			strokeWidth: 8,
			fill: '#AAFFDD',
			tension: 0.4
		});

		// Menambahkan/MenempelkanObjekke Layer
		layer.add(lingkaran);
		layer.add(kotak);
		layer.add(segipanjang);
		layer.add(bintang);
		layer.add(garis);
		layer.add(poligon);
		layer.add(elips);
		layer.add(teks);
		layer.add(paruhlingkaran);
		layer.add(textpath);
		layer.add(biruBlob);

		// Menempelkan Layer ke Stage
		stage.add(layer);

</script>
</body>
</html>

Hasil tampilan script di atas pada browser ditunjukkan pada gambar berikut. Atau Anda juga dapat mengunjungi alamat http://jsfiddle.net/buluhijau/jVBet/1 untuk melihat simulasi script tersebut.

hasil

Penutup

Selain menggunakan library KineticJS, kita juga bisa menggunakan FabricJS. BisaKomputer sendiri pernah memuat tulisan tentang cara membuat objek sederhana dengan FabricJS. Pada tutorial KineticJS selanjutnya kita akan belajar cara membuat animasi sederhana dengan objek-objek yang ada. Semoga bermanfaat.

Tag: , , , ,

1 Comment

Leave Comment

Write Comment

Your email will not be published. The marked label is required.