Pengantar Raphaël.js

James Williams
James Williams
X Halaman Beranda

Pengantar

SVG, kependekan dari Scalable Vector Graphics, adalah bahasa berbasis XML untuk mendeskripsikan objek dan scene. Elemen SVG dapat memicu peristiwa dan dapat dibuat skrip 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 sejalan dengan apa yang saat ini tersedia dengan kanvas. Raphaël.js adalah library JavaScript yang memungkinkan Anda membuat scene SVG secara terprogram. API ini menggunakan API terpadu untuk membuat scene SVG yang mendukungnya atau VML(Vector Modeling Language) yang ada saat ini, yaitu versi Internet Explorer sebelum IE9.

Menggambar Adegan Pertama Anda

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

Setiap objek SVG dapat memiliki atribut yang ditetapkan untuk hal-hal seperti warna, rotasi, warna goresan dan ukuran, dll. Anda dapat menemukan daftar mendetail 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 ibarat menggambar dengan pena di selembar kertas grafik raksasa. Anda dapat menginstruksikan pena untuk diangkat dari kertas dan berpindah ke posisi yang berbeda(pindahkan ke), untuk menggambar garis(garis ke), atau menggambar kurva(lengkungan ke). Jalur memungkinkan SVG membuat objek dengan tingkat detail yang sama terlepas dari skalanya. Saat Anda memberikan instruksi untuk menggambar kurva, SVG memperhitungkan ukuran asli dan akhir yang diinginkan dari kurva (setelah penskalaan), SVG secara matematis menghitung titik perantara untuk merender kurva yang mulus.

Kode dan gambar di bawah ini menunjukkan persegi panjang dan melengkung tertutup yang digambar dengan jalur. Huruf M diikuti dengan koordinat memindahkan pena ke posisi tersebut, L diikuti dengan pasangan koordinat menggambar garis dari posisi saat ini ke posisi tersebut. menggambar kurva Bezier yang mulus dengan titik kontrol dan endpoint yang diberikan 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, memberikan 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"});

Teks Menggambar

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 bersama dengan string yang akan digambar. Metode teks tidak memberi Anda banyak kontrol atas font atau efek lainnya. Kode ini menggambar font default dengan ukuran default.

Metode kedua, {i>print<i}, menggambar teks sebagai kumpulan jalur. Oleh karena itu, kami dapat mengubah huruf satu per satu. Pada contoh di bawah, kami mewarnai angka 5 dengan isian oranye, berwarna "ROCKS" berwarna "ROCKS" dengan isian kebiruan dan membuat goresan lebih tebal untuk menyimulasikan teks tebal. Kami melakukannya menggunakan {i>font<i} khusus dengan ukuran font 40pt.

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

{i>Font<i} Vegur tidak dalam bahasa Raphaël, demikian juga {i>font<i} apa pun dalam hal ini. 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 (reguler, tebal, miring, tebal miring, dll.) untuk digunakan dengan Raphaël. Artikel ini berada di luar cakupan tutorial ini untuk membahas Cufon secara mendetail. Periksa link aforemention untuk detail lebih lanjut. Sumber bagus untuk font yang terpisah untuk aplikasi Anda adalah Google Font Directory.

Peristiwa

Elemen SVG dapat langsung berlangganan ke 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 elemen individual, jadi secara teori tidak ada yang mencegah Anda menambahkan gestur untuk browser seluler.

Cuplikan di bawah mengikat fungsi untuk memutar huruf tertentu pada "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 ini memiliki pendekatan yang sangat berbeda. Canvas adalah API mode langsung mirip dengan menggambar dengan krayon. Anda dapat menghapus atau menghancurkan sebagian gambar, tetapi tidak dapat mengembalikan atau mengubah goresan sebelumnya secara default. Kanvas juga merupakan bitmap raster, sehingga sangat sering mengalami pikselasi saat gambar diskalakan. Di sisi lain, SVG, seperti yang disebutkan sebelumnya, dapat menyajikan beberapa resolusi dengan tingkat detail yang sama dan dapat dibuatkan skrip.

Apakah akan menggunakan SVG atau Canvas untuk pemrograman game cukup sederhana. Selain batasan normal apakah Anda berencana men-deploy ke desktop atau seluler, hal ini sebenarnya bergantung pada jumlah sprite. SVG cocok dengan apa yang saya sebut game {i>low-fidelity<i}. Saya menggambarkannya sebagai game yang memiliki gerakan objek serentak yang terbatas serta penghapusan dan pembuatan sprite. Banyak game papan seperti Catur, Checkers, atau Battleship, serta game kartu seperti BlackJack, Poker, dan Hearts yang termasuk dalam kategori ini. Thread gabungan lainnya adalah bahwa dalam banyak game ini, pemain harus memindahkan objek arbitrer dan kemampuan skrip SVG mempermudah pengambilan objek.

Alat Penulisan untuk SVG

Menggunakan SVG tidak berarti sama sekali bahwa Anda harus membuat jalur secara manual. Ada beberapa alat, baik open source maupun komersial, yang dapat Anda gunakan untuk melakukan ekspor ke SVG. Dua alat yang telah saya gunakan secara ekstensif dan sangat direkomendasikan adalah Inkscape dan svg-edit.

svg-edit

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

Pemandangan Tinta

Inkscape adalah editor grafik vektor lintas platform yang lengkap dan serupa dengan CorelDraw, Adobe Illustrator, dan Xara. Inkscape mendapatkan manfaat dari komunitas plugin yang dinamis dan codebase yang matang. Pendahulu Inkscape, tempat Inkscape bercabang, dikembangkan pada tahun 1999. Inkscape adalah aplikasi andalan saya untuk aset berbasis vektor dan bitmap.

Anak di Bawah Umur

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

Referensi