FabricJs: Properti dan Event

FabricJs: Properti dan Event

Tutorial Information

Programfabricjs
Version0.8.32
DifficultyPemula
Estimated Time30 Menit
DownloadClick this link

Tidak seru kan setelah menggambar objek di atas canvas, Anda tidak bisa mengubahnya? Jadi, setelah memahami secara sederhana cara membuat objek menggunakan library fabricjs,…

Tidak seru kan setelah menggambar objek di atas canvas, Anda tidak bisa mengubahnya? Jadi, setelah memahami secara sederhana cara membuat objek menggunakan library fabricjs, kita akan bermain-main dengan objek tersebut.

Pada kesempatan sebelumnya, penulis memperkenalkan fabricjs dengan membuat script sederhana untuk menggambarkan kotak dan lingkaran di atas canvas. Pada tulisan kali ini, penulis akan mengajak pembaca untuk memanipulasi objek-objek secara programatik.

demo

Demo Memanipulasi Objek

Objek-objek fabricjs memiliki banyak properti. Namun yang menarik untuk dibahas saat ini adalah:

Properti Penjelasan Keterangan
top Posisi top objek
left Posisi left objek
width Panjang objek
height Lebar objek
scaleX Skala objek pada sumbu x
scaleY Skala objek pada sumbu y
opacity Nilai transparansi objek Nilai berkisar antara 0 – 1
angle Sudut objek
fill Warna yang mengisi objek
stroke Warna garis untuk objek
strokeWidth Tebal garis untuk objek
radius ukuran radius hanya berlaku untuk instanta dari fabric.Circle

Bukan hanya objek yang digambarkan di atas canvas yang memiliki properti yang dapat diubah. Canvas sendiri memiliki properti yang dapat dimanfaatkan untuk mengatur tingkat interaksinya. Beberapa properti untuk canvas adalah sebagai berikut:

selection Menentukan apakah user dapat memilih lebih dari 1 objek secara bersamaan (membuat kelompok).
backgroundColor Warna latar untuk canvas
backgroundImage Gambar latar
hoverCursor Tipe cursor ketika mouse berada di atas objek
moveCursor Tipe cursor ketika mouse menggerakkan objek
rotationCursor Tipe cursor ketika mouse memutar objek
defaultCursor Tipe cursor secara default

Untuk lebih lengkapnya, pembaca dapat melihat seluruh properti untuk canvas beserta objek pada dokumen API milik fabricjs.

Metode Pengaturan Properti

Secara umum, untuk mengubah properti dari suatu objek, metode yang digunakan adalah set. Misalnya, untuk merubah warna dari suatu objek:

obj.set('fill', 'red');

Bila Anda ingin mengubah lebih dari satu properti, maka Anda dapat melemparkan parameter berbentuk object kepada metode set(). Contohnya adalah sebagai berikut:

obj.set({
fill: 'red',
top: 100,
left: 200
});

Namun tidak semua properti dapat diubah dengan benar menggunakan metode set() seperti diatas. Bila Anda membaca dokumen API, maka Anda dapat menemukan bahwa fabricjs menyediakan metode khusus untuk mengubah beberapa propertinya. Misal:

obj.setWidth(100); // merubah lebar objek
obj.setHeight(200); // merubah panjang objek
obj.setAngle(45); // merubah sudut objek
obj.setOpacity(0.5); // merubah nilai transparansi objek

Sementara itu, untuk mengubah properti dari canvas, Anda perlu menggunakan metode yang telah disediakan oleh fabricjs. Misal untuk mengubah gambar latar bagi canvas:

canvas.setBackgroundImage('/path/to/picture.jpeg');
canvas.renderAll();

Metode Membaca Properti

Untuk membaca properti, Anda dapat menggunakan metode get(). Parameter yang diberikan kepada metode tersebut adalah nama propertinya. Misal:

obj.get('fill');     // membaca warna objek
obj.get('top');      // membaca posisi top
obj.get('left');     // membaca posisi left
obj.getWidth();      // membaca panjang objek
obj.getHeight();     // membaca lebar objek
obj.getAngle();      // membaca sudut objek

Pada contoh diatas, pembaca dapat melihat bahwa fabricjs menyediakan metode khusus untuk membaca beberapa propertinya. Pembaca dapat melihat API milik fabricjs untuk mengetahui metode khusus lainnya yang disediakan oleh fabricjs.

Event

Aspek lain yang dapat membuat pengalaman di canvas lebih hidup adalah event. Anda dapat mendengarkan event yang dipublikasikan oleh objek-objek maupun oleh canvas dan memasang fungsi untuk merespon event tersebut.

Bila pembaca menjalankan source code yang disertakan dalam tutorial ini, maka pembaca dapat melihat bahwa field-field dikanan canvas membaca secara langsung setiap perubahan yang terjadi pada objek yang dipilih. Hal ini dapat dilakukan karena adanya fungsi yang bertugas sebagai eventlistener, yaitu fungsi yang merespon event yang dipublikasikan oleh objek.

Pembaca dapat membaca dengan lengkap event apa saja yang didukung oleh objek fabricjs pada halaman ini:

https://github.com/kangax/fabric.js/wiki/Working-with-events

Untuk bermain dengan event, metodenya adalah sebagai berikut:

canvas.on({
'object:selected': callback, // dipublikasikan ketika sebuah objek terpilih
'object:moving': callback, // dipublikasikan sepanjang sebuah objek // mengalami perpindahan tempat
'object:scaling': callback, // dipublikasikan sepanjang sebuah objek   // mengalami perubahan skala
'object:modified': callback // dipublikasikan setelah sebuah objek mengalami // perubahan properti
});

‘Callback’ pada contoh di atas adalah sebuah event-listener. Jadi, ketika suatu event dipublikasikan, maka fungsi callback itulah yang dijalankan.

Silahkan pembaca membuka source-code yang disertakan pada tutorial ini. Pada source-code tersebut, penulis sebisa mungkin memberikan komentar pada tiap code. Diharapkan dengan membaca code tersebut, pembaca dapat memahami cara menggunakan fabricjs dengan lebih baik.

Tingkat Lanjut

Tutorial ini sebenarnya sudah selesai pada paragraf di atas. Namun pada bagian kecil ini, bagi pembaca yang berminat, penulis akan menjelaskan mengapa fabricjs memberikan metode khusus untuk mengatur dan membaca beberapa properti tertentu, terutama getWidth() dan getHeight().

Fabricjs memiliki properti yang bernama scaleX dan scaleY. Dua properti ini menunjukkan berapa skala objek pada sumbu X dan Y. Skala merujuk kepada perbandingan ukuran objek sekarang dengan ukuran objek ketika nilai width atau height ditentukan secara programatik sebelumnya. Nilai skala akan berubah ketika user mengubah ukuran objek mengunakan mouse. Itulah mengapa, event yang dipublikasikan oleh objek tersebut bernama object:scaling.

Jadi, scaleX menunjukkan perbandingan antara panjang objek sekarang dengan panjang objek sebelumnya. Momen ‘sebelumnya’ ini merujuk ketika panjang objek ditentukan menggunakan metode obj.set(‘width’) atau ketika ‘width’ ditentukan saat objek tersebut dibuat pertama kali. Begitu pula dengan scaleY, kecuali ukuran ini melakukan perbandingan terhadap lebar objek.

Sehingga, bila pembaca melakukan uji coba dengang membaca nilai ‘width’ menggunakan get(‘width’) dan pembaca mengubah panjang objek dengan mouse, maka pembaca tidak akan menemukan perubahan pada nilai width.

Namun hal tersebut akan berbeda bila pembaca menggunakan  obj.getWidth() untuk mengukur panjang objek setelah mengalami perubahan tadi. Mengapa berbeda? Karena metode getWidth() dan getHeight() sudah memperhitungkan panjang dan lebar objek relatif terhadap nilai scaleX dan scaleY.

Pembaca dapat membuktikan keterangan diatas dengan membuang komen yang penulis berikan pada berkas index.html baris 68 hingga 79. Pembaca dapat melihat bahwa nilai get(‘width’) dan get(‘height’) akan sama meskipun pembaca sudah mengubah ukuran objek menggunakan mouse.

Penutup

Bagaimana jika fabricjs digunakan untuk hal yang lebih animatif? Semisal melukis pada canvas? Pada tutorial berikutnya, penulis akan menjelaskan cara sederhana untuk melukis di atas canvas. Sampai jumpa pada tutorial berikutnya. Dan bersenang-senanglah mengutak-atik fabricjs.

Tag: , , , ,

3 Comments

Leave Comment
  1. Haqqi says:

    Wooogh, ini tulisan keren nih!!

  2. Target Lagu says:

    waahh..
    Ilmu yang bermaaf masta …
    Ijin praktek dari tutorialnya :)

  3. ProMP3 says:

    ProMP3 – Download Lagu Gratis

Write Comment

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