Pengantar Raphaël.js

James Williams
James Williams
X Halaman Beranda

Pengantar

SVG, singkatan dari Scalable Vector Graphics, adalah bahasa berbasis XML untuk menjelaskan objek dan scene. Elemen SVG dapat memicu peristiwa dan dapat ditulis skripnya dengan JavaScript. SVG dilengkapi dengan beberapa jenis primitif bawaan seperti lingkaran dan persegi panjang serta dapat menampilkan teks. Meskipun SVG sebagai teknologi bukanlah hal baru, HTML5 kini memungkinkan objek SVG disematkan di halaman secara langsung tanpa menggunakan tag <object> atau <embed> sehingga selaras dengan yang saat ini tersedia dengan kanvas. Raphaël.js adalah library JavaScript yang memungkinkan Anda membuat tampilan SVG secara terprogram. API ini menggunakan API terpadu untuk membuat tampilan SVG jika didukung atau VML(Vector Modeling Language) jika saat ini digunakan, yaitu versi Internet Explorer sebelum IE9.

Menggambar Adegan Pertama

Mari kita mulai dengan menggambar tampilan sederhana dengan Raphaël. Kita mulai menggambar adegan dengan membuat instance objek Raphaël. Dalam hal ini, Saya menggunakan konstruktor yang menyisipkannya ke elemen HTML tertentu dengan lebar dan tinggi tertentu, tetapi Anda juga dapat meminta Raphaël menambahkan objek ke DOM (Document Object Model). Selanjutnya, saya membuat persegi panjang dengan memberikan posisi x dan y yang diinginkan dengan lebar dan tinggi. Selanjutnya, saya membuat lingkaran dengan memberikan koordinat dan radius yang diinginkan. Terakhir, saya menggunakan fungsi atribut (attr) untuk menetapkan warna ke objek.

Setiap objek SVG dapat memiliki atribut yang ditetapkan untuk hal-hal seperti warna, rotasi, warna dan ukuran goresan, dll. Anda dapat menemukan daftar mendetail tentang atribut yang dapat ditetapkan di sini.

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

Menggambar Bentuk Lanjutan dengan Jalur

Jalur adalah serangkaian petunjuk yang digunakan oleh perender untuk membuat objek. Menggambar dengan jalur seperti menggambar dengan pena di selembar kertas grafik raksasa. Anda dapat memerintahkan pena untuk diangkat dari kertas dan berpindah ke posisi lain(pindah ke), untuk menggambar garis(garis ke), atau untuk menggambar kurva(busur ke). Jalur memungkinkan SVG membuat objek dengan tingkat detail yang sama, terlepas dari skalanya. Saat Anda memberikan petunjuk untuk menggambar kurva, SVG akan memperhitungkan ukuran asli dan akhir yang diinginkan dari kurva (setelah penskalaan), dan secara matematis menghitung titik perantara untuk merender kurva yang halus.

Kode dan gambar di bawah menunjukkan persegi panjang dan kurva tertutup yang digambar dengan jalur. Huruf M diikuti dengan koordinat akan memindahkan pena ke posisi tersebut, L diikuti dengan pasangan koordinat akan menggambar garis dari posisi saat ini ke posisi tersebut. s menggambar kurva Bezier yang halus dengan titik kontrol dan titik akhir tertentu dengan koordinat relatif. Z menutup jalur. Umumnya, penggunaan huruf besar akan mengeluarkan perintah dengan koordinat absolut, sedangkan huruf kecil menggunakan koordinat relatif. M/m dan Z/z, masing-masing, mengeluarkan perintah yang sama untuk huruf besar atau huruf kecil. Anda dapat melihat daftar semua petunjuk jalur di sini.

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

Menggambar Teks

Memiliki ilustrasi tanpa kemampuan menggambar teks akan sangat membosankan.untungnya, Raphaël menyediakan dua metode untuk menggambar teks. Metode pertama, teks, mengambil koordinat x dan y beserta string yang akan digambar. Metode teks tidak memberi Anda banyak kontrol atas font atau efek lainnya. Font ini digambar dalam font default dengan ukuran default.

Metode kedua, cetak, menggambar teks sebagai kumpulan jalur. Akibatnya, kita dapat mengubah setiap huruf. Pada contoh di bawah, kita mewarnai angka 5 dengan isian oranye, mewarnai "ROCKS" dengan isian kebiruan, dan membuat goresan lebih tebal untuk menyimulasikan teks tebal. Kita melakukannya menggunakan font kustom dengan ukuran font 40 pt.

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

Font Vegur tidak ada di Raphaël, begitu juga dengan font lainnya. Selain itu, sebagian besar font menggunakan format TrueType(TTF) atau OpenType(OTF). Untuk mengubah format tersebut menjadi sesuatu yang dapat digunakan oleh Raphaël, kita perlu mengonversinya menggunakan alat yang disebut Cufon. Cufon memungkinkan Anda mengekspor berbagai gaya font dari font tertentu (biasa, tebal, miring, tebal miring, dll.) untuk digunakan dengan Raphaël. Cakupan tutorial ini tidak mencakup Cufon secara mendetail. Periksa link yang disebutkan di atas untuk mengetahui detail selengkapnya. Sumber font yang tidak terikat untuk aplikasi Anda adalah Direktori Font Google.

Acara

Elemen SVG dapat langsung berlangganan semua peristiwa berbasis mouse tradisional: click, dblclick, mousedown, mousemove, mouseout, mouseover, mouseup, dan hover. Raphaël menyediakan kemampuan untuk menambahkan metode Anda sendiri ke kanvas atau setiap elemen, sehingga secara teori tidak ada yang mencegah Anda menambahkan gestur untuk browser seluler.

Cuplikan di bawah ini mengikat fungsi untuk memutar huruf tertentu dalam "ROCKS" 45 derajat saat diklik.

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG vs Kanvas

Mengingat keduanya adalah metode untuk menggambar objek di layar, sering kali tidak langsung jelas mengapa Anda harus menggunakan salah satunya. Kedua media tersebut memiliki pendekatan yang sangat berbeda. Kanvas adalah API mode langsung yang sangat mirip dengan menggambar dengan krayon. Anda dapat menghapus atau menghancurkan bagian gambar, tetapi secara default Anda tidak dapat mengembalikan atau mengubah goresan sebelumnya. Kanvas juga merupakan bitmap raster sehingga sangat rentan terhadap pikselasi saat gambar disederhanakan. Di sisi lain, SVG, seperti yang disebutkan sebelumnya, dapat menayangkan beberapa resolusi dengan tingkat detail yang sama dan dapat dibuat skripnya.

Memilih antara SVG atau Canvas untuk pemrograman game cukup mudah. Selain batasan normal tentang apakah Anda berencana men-deploy ke desktop atau perangkat seluler, hal ini sebenarnya bergantung pada jumlah sprite. SVG cocok untuk apa yang saya sebut game fidelitas rendah. Saya mendeskripsikannya sebagai game yang memiliki pergerakan objek serentak terbatas serta penghapusan dan pembuatan sprite. Banyak game papan seperti Catur, Dam, atau Battleship, serta game kartu seperti BlackJack, Poker, dan Hearts termasuk dalam kategori ini. Thread pemersatu lainnya adalah dalam banyak game ini, pemain harus memindahkan objek arbitrer dan kemampuan skrip SVG memudahkan pemilihan objek.

Alat Penulisan untuk SVG

Menggunakan SVG tidak berarti Anda harus membuat jalur secara manual. Ada beberapa alat, baik open source maupun komersial, yang memungkinkan Anda mengekspor ke SVG. Dua alat yang telah saya gunakan secara ekstensif dan sangat saya rekomendasikan adalah Inkscape dan svg-edit.

svg-edit

svg-edit adalah editor SVG berbasis browser yang ditulis dalam JavaScript. Aplikasi ini menyediakan antarmuka pengguna terbatas yang mengingatkan pada GIMP atau MS Paint. Kecuali jika tingkat detailnya relatif rendah, saya biasanya menggunakan svg-edit untuk menyesuaikan gambar SVG, bukan membuatnya. svg-edit memungkinkan Anda membuat objek secara grafis atau dengan kode SVG.

Inkscape

Inkscape adalah editor grafik vektor lintas platform yang lengkap dan mirip dengan CorelDraw, Adobe Illustrator, dan Xara. Inkscape mendapatkan manfaat dari komunitas plugin yang aktif dan codebase yang matang. Inkscape dikembangkan pada tahun 1999, yang merupakan penerus dari Inkscape yang di-fork. Inkscape adalah aplikasi pilihan saya untuk aset berbasis vektor dan bitmap.

Catatan Kecil

SVG tidak didukung di Windows pada versi Internet Explorer sebelum IE9. IE menggunakan format grafik vektor yang disebut VML, Vector Markup Language, yang menyediakan banyak fungsi yang sama dengan SVG. Raphaël dapat membuat tampilan yang menggunakan SVG atau VML jika didukung. Menggunakan Raphaël adalah cara mudah untuk memberikan dukungan lintas platform.

Referensi