FabricJs: Menggambar di Browser

FabricJs: Menggambar di Browser

Tutorial Information

Programfabricjs
Version0.8.32
DifficultyPemula
Estimated Time30 Menit
DownloadClick this link

Pernahkah terbayang bahwa kita bisa melakukan pengeditan foto, menggambar, membuat animasi, bahkan membuat game interaktif langsung di browser tanpa adanya plugin? Semua hal tersebut…

Pernahkah terbayang bahwa kita bisa melakukan pengeditan foto, menggambar, membuat animasi, bahkan membuat game interaktif langsung di browser tanpa adanya plugin? Semua hal tersebut sudah dimungkinkan dengan adanya teknologi baru HTML5, salah satunya adalah Canvas. Pada artikel ini, kita akan menelusuri teknologi tersebut menggunakan salah satu library canvas yang sangat populer, yaitu fabricjs.

Sebelum HTML5, pekerjaan-pekerjaan semisal membuat animasi yang interaktif, permainan, dan menggambar banyak diserahkan kepada Flash. Namun hal ini sudah mulai bergeser dikarenakan hadirnya teknologi-teknologi baru yang secara keseluruhan diberi nama HTML5. Pada kesempatan kali ini, penulis akan memperkenalkan canvas dengan menggunakan fabricjs sebagai library untuk memudahkan penggunaannya.

Canvas memungkinkan developer untuk membuat aplikasi animasi yang menarik, bahkan membuat permainan-permainan yang dapat berjalan di browser, tanpa plugin. Untuk saat ini, seluruh browser terbaru sudah mendukung fitur canvas.

Pada tutorial ini, kita tidak akan bermain langsung dengan API canvas, namun kita akan menggunakan library canvas yang bernama fabricjs. Library ini memudahkan pengembang untuk membuat objek-objek yang akan digambarkan ke canvas dan menyediakan API untuk berinteraksi dengannya.

Sebelum memulai tutorial ini, ada baiknya bila pembaca mengunduh terlebih dahulu library fabricjs terbaru. Kita juga akan menggunakan berkas html sederhana sebagai pengantar dalam menggunakan library ini (untuk mempermudah, berkas ini diberi nama index.html).

<!DOCTYPE HTML>

<html>

<head>

  <meta http-equiv="content-type" content="text/html; charset=utf-8" />

  <title>Bisa Canvas</title>

</head>

<body>

  <canvas id="bisacanvas" width=600 height=600 style="border:1px solid black"></canvas>

  <script src="0.8.32.js"></script>

</body>

</html>

Silahkan pembaca merubah index.html di atas sesuai dengan kreatifitas pembaca. Hal yang penting dari script di atas adalah elemen canvas. Fabricjs akan memanfaatkan elemen tersebut sehingga pembaca perlu memberikannya sebuah id yang unik. Jangan lupa agar alamat library fabricjs diarahkan ke alamat yang benar pada harddisk pembaca.

Sebelum bermain-main dengan canvas menggunakan fabricjs, kita perlu menginisiasi terlebih dahulu elemen canvas tersebut. Caranya sederhana. Kita hanya perlu memberikan id dari canvas yang hendak digunakan.

var canvas = new fabric.Canvas("bisacanvas");

Pada tutorial ini, kita akan menggambar kotak dan lingkaran. Pembuatannya sangatlah mudah.

Untuk membuat kotak, contoh scriptnya adalah sebagai berikut:

var kotak = new fabric.Rect({

width: 100,

height: 100,

fill: 'blue',

top: canvas.getCenter().top, // nilainya adalah 300

left: canvas.getCenter().left // nilainya adalah 300

});

Tampilan Kotak

Kode di atas membuat sebuah kotak dengan lebar 100 pixel, panjang 100 pixel, dan berwarna biru. Yang perlu diperhatikan adalah properti top dan left.

Properti top merujuk pada titik tengah objek pada sumbu y. Sedangkan left merujuk pada titik tengah objek pada sumbu x.

Gambar Koordinat

Kode canvas.getCenter() mengembalikan sebuah objek fabric.Point yang bernilaikan posisi tengah dari canvas. Posisi tengah ini memiliki properti top dan left. Dua properti tersebut kita gunakan untuk mengetahui kordinat tengah dari canvas.

Untuk membuat lingkaran secara sederhana, kodenya adalah sebagai berikut:

var lingkaran = new fabric.Circle({

radius: 100,

fill: 'red',

top: canvas.getCenter().top, // nilainya adalah 300

left: canvas.getCenter().left // nilainya adalah 300

});

Tampilan Lingkaran

Kode pembuatan lingkaran di atas mirip dengan kode pembuatan kotak sebelumnya. Perbedaannya, kode di atas menggunakan properti radius untuk menentukan dimensi dari lingkaran.

Membuat objek kotak dan lingkaran seperti di atas tidak akan menampilkan objek tersebut di atas canvas. Kita harus menambahkan objek tersebut ke atas canvas dan me-render objek tersebut.

canvas.add(lingkaran); // menambahkan objek lingkaran ke atas canvas

canvas.add(kotak); // menambahkan objek kotak ke atas canvas

canvas.renderAll(); // melukis kembali isi canvas

Mudah bukan?

Bila pembaca sudah mencoba kode di atas, maka pembaca dapat melihat property default yang berlaku pada objek fabric. Misal, bahwa kotak dan lingkaran di atas memiliki titik-titik untuk merubah ukuran pada garis luarnya. Pembaca juga dapat merubah posisi dan memutar objek.

Mengubah Posisi dan Memutar Objek

Pembaca dapat melihat demo untuk artikel ini pada link berikut:
http://jsfiddle.net/keripix/bcPp8/1/

Fabricjs memiliki banyak API (http://fabricjs.com/docs/), sehingga kita tidak terbatas pada kotak dan lingkaran. Pada artikel berikutnya, kita akan bermain-main dengan pengaturan properti.

Tag: , , , , ,

7 Comments

Leave Comment
  1. Mustofa says:

    nice tutorial gan, saya baru tahu ada library fabricjs untuk canvas html5 :)

Write Comment

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