Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Web Development

Sebuah Perkenalan untuk Library Raphael JS

by
Read Time:12 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Akihito (you can also view the original English article)

Raphael JS adalah kerangka Javascript ringan dan sangat baik yang memungkinkan untuk menggambar vektor grafis di browsermu.  Dalam tutorial ini, saya akan memperkenalkan kepada anda beberapa fungsi gambar dasar, lihatlah animasi, menyediakan akses DOM dan akhirnya menyelesaikan dengan membuat widget keren untuk situs Anda...

Detail Tutorial

  • Kerangka: Raphael JS
  • Versi: 1.0
  • Kesulitan: Pemula sampai menengah
  • Perkiraan Penyelesaian Waktu: 30 menit

1. Melakukan Pengaturan

Mari kita mulai dengan kerangka Raphael JS men-download dari sini. Di bagian atas kanan dari halaman, Anda akan melihat
dikompresi dan terkompresi salinan Raphael versi 1.0. Saya akan merekomendasikan Anda menyalin sendiri dari sumber terkompresi untuk saat - ini
cara Anda dapat mencari sumber dan melihat apa tambahan yang Anda bisa dapatkan dalam dokumentasi.

Dengan hasil download tersebut, mari mengeset sebuah dokumen simpel HTML yang disebut dengan index.htm dan termasuk Raphael di dalamnya. Kita juga menambahkan our_script.js yang berada di dalam
kami akan menulis JavaScript kita sendiri, dan dalam tubuh dokumen kita menciptakan div minimal bergaya dengan ID canvas_container, yang akan bertindak sebagai
wadah untuk gambar kami.

N.B. Rilis stabil pertama dari versi 1.0 hanya dibuat tersedia pada 7 Oktober 2009, sehingga sangat baru. Itu membuat satu perubahan yang sangat penting dengan cara
anda menggambar jalan, jadi jika menggunakan versi sebelumnya Raphael, pastikan meng-upgrade dan memeriksa dokumentasi pada mempengaruhi kompatibilitas.

2. Membuat Canvas Gambar

Ketika kita menggambar dengan Raphael, kita melakukannya ke kanvas. Kanvas ini, yang kita akan referensi dalam variabel disebut 'kertas', dibuat menggunakan
Raphael() objek. Kami selalu menentukan lebar dan tinggi kanvas, tetapi memiliki pilihan untuk juga menentukan baik) posisi mutlak
kanvas relatif terhadap viewport, atau b) elemen 'wadah' yang kanvas ditarik di dalam.

Aku biasanya lebih suka metode yang terakhir (b), karena kita biasanya tahu di mana divs kami. Di our_script.js, mari kita menunggu untuk DOM untuk memuat dan kemudian membuat 500px oleh 500px
kanvas di div canvas_container kami:

Semua metode gambar kami sekarang akan terikat ke variabel kertas.

3. Membangun Bentuk

Sekarang bahwa kita memiliki kanvas kami, mari kita menggambar beberapa bentuk ke atasnya. Asal, yaitu x = 0, y = 0 poin, di sudut kiri atas
kanvas kami. Ini berarti bahwa setiap x, y koordinat kita menetapkan dalam metode kami adalah relatif terhadap titik ini.

Pertama, sebuah lingkaran. Memodifikasi our_script.js terlihat seperti ini:

Ini akan menggambar sebuah lingkaran dengan jari-jari 80px dengan pusat yang ditempatkan di x = 100, y = 100. Kita dapat menarik lingkaran sebanyak yang kita inginkan dan kita tidak perlu
referensi mereka dalam variabel:

Selanjutnya, mari kita menggambar persegi panjang. Kita melakukan ini dengan menggunakan metode rect(), yang mengambil sebagai parameter: x dan y koordinat persegi panjang di sudut kiri atas dan
persegi panjang yang diinginkan lebar dan tinggi.

Akhirnya, kita akan menarik ellipse. Parameter yang sama seperti lingkaran, yaitu x, y, radius, kecuali bahwa kita dapat menetapkan x dan y jari-jari khusus.

Ini akan menarik ellipse dengan x-radius = 100, y-radius = 50 di x = 200, y = 400. Kami our_script.js file sekarang harus terlihat seperti ini:

Jika kita membuka index.htm di browser kita, kita harus mendapatkan banyak bentuk gambar:

Contoh Disini

4. Membuat Jalur

Sementara bentuk built-in berguna untuk memiliki, itu adalah jalan yang menawarkan kita fleksibilitas gambar yang benar.
Ketika menggambar jalan, ini membantu untuk pikirkan imajiner kursor atau pena-titik ditekan terhadap layar. Ketika kita membuat kami kanvas, kursor berakar untuk
sudut kiri atas. Hal pertama yang harus kita lakukan adalah
mengangkat kursor atau titik pena dan memindahkannya ke wilayah yang luas di mana kita dapat menggambar.

Sebagai contoh, mari kita memindahkan kursor kami ke pusat kami kanvas. Itu adalah, mari kita bergerak itu 250px dalam arah x dan memindahkannya 250px y-arah.

Kita melakukan ini menggunakan apa yang disebut dengan path string.

Path string adalah sebuah string yang terdiri dari 'action' perintah dan nilai-nilai numerik yang sesuai dengan perintah. Kita memindahkan kursor kami ke x = 250, y = 250 menggunakan berikut
string:

'M ' berarti kita ingin bergerak tanpa menggambar dan diikuti oleh x dan y kanvas kordinat.

Sekarang bahwa kursor kami adalah di mana kita ingin itu, mari kita menarik garis relatif terhadap titik ini menggunakan perintah huruf 'L', 'l'.

Ini akan menarik garis ke atas 50px y-arah. Mari kita menulis string path yang akan menarik tetris tetronimo:

Perintah 'z' menandakan penutupan path - akan bergabung garis dari mana pun sampai ke titik yang ditentukan oleh perintah "M" awal.

Kita mengatakan Raphael untuk benar-benar menarik jalan ini menggunakan metode path(). Memodifikasi our_script.js terlihat seperti ini:

Jika Anda memuat index.htm, Anda sekarang harus melihat tetronimo seperti ini:

String path bisa menjadi sangat kompleks (cemerlang) menggunakan perintah kurva dan busur. Cakupan penuh dengan path dapat ditemukan di
Jalan SVG spesifikasi halaman.

5. Atribut Styling

Kami tetronimo tetris, sementara luar biasa, tidak sangat estetis. Kami akan memperbaikinya menggunakan metode attr().

Metode attr() yang mengambil sebuah objek yang terdiri dari berbagai pasangan nilai properti sebagai parameter. Karena kita disimpan referensi untuk tetronimo kami dalam variabel tetronimo, kita dapat mengambil variabel ini dan menambahkan metode attr() untuk itu. Kita bisa sama baiknya
rantai attr() metode path() metode, tetapi mari kita menjaga hal-hal yang waras untuk sementara waktu. Saya akan menunjukkan penggunaan attr() dengan contoh:

memproduksi ini:

memproduksi ini:

Raphael dokumentasi cukup luas ketika datang ke attr() metode.
Memiliki bermain di sekitar dengan berbagai kombinasi nilai properti objek.

6. Animasi

Menghidupkan () metode di Raphael adalah benar-benar, benar-benar baik. Hal ini memungkinkan kita untuk menghidupkan gambar kami secara jQuery-esque, menghidupkan
atribut kami menyediakan itu selama beberapa waktu dengan meredakan opsional.

Mari kita memutar tetronimo Pemesanan kami dengan 360 derajat. Rotasi
atribut mutlak, jadi ini harus mengambil satu putaran penuh dan membawanya kembali ke keadaan un diputar.

Animasi berlangsung lebih dari 2 detik (2000 milidetik) dan disuruh untuk memudahkan dalam keadaan akhir dengan 'bouncing'.

Contoh di sini.

Kami juga dapat menyediakan fungsi panggilan balik sebagai argumen. Ini fungsi callback yang dipanggil setelah animasi selesai. Contoh berikut
akan menghidupkan tetronimo rotasi dan stroke-lebar dan kemudian reset sendiri dengan animasi yang lain dalam fungsi callback.

Kata kunci ini referensi tetronimo asli dari dalam fungsi callback.

Contoh di sini.

Menghidupkan jalan

Menjadi agak geek kode, aku jarang pernah berhasil melewati Menggambar bentuk sederhana di Flash. Tapi satu hal yang aku suka bermain dengan bentuk tweening. Yah,
Raphael pergi beberapa cara untuk meniru bentuk tweening dengan menetapkan path string dalam menghidupkan () metode.

Tetronimo lain, tetronimo Z di Tetris, memiliki jalan string berikut,

dan tampak seperti ini:

Sekarang, menggunakan tetronimo asli kami dengan minimal atribut styling, aku akan menentukan string path baru di kita menghidupkan () metode.

Anda harus melihat morph tetronimo kami asli menjadi satu baru kami. Efek yang membuat semua lebih jelas dengan menentukan 'elastis' sebagai jenis meredakan.

Contoh di sini.

7. Dom aksesibilitas

Jika kita ingin mendapatkan akses ke kami unsur-unsur DOM elemen, kita dapat melakukannya dengan mudah beberapa. Ini adalah berkat properti node. Menggunakan ini, kita dapat
Tambahkan event handler untuk gambar kami, yang saya akan melanjutkan untuk menunjukkan kepada Anda.

Mari kita mulai dengan menggambar lingkaran dalam file our_script.js kami.

Sekarang, mari kita tambahkan teks, 'Bye Bye lingkaran!' sehingga titik pusat pada titik yang sama sebagai pusat lingkaran kami.

Aku telah menetapkan opacity ke 0 sehingga awalnya tersembunyi. Perhatikan chaining metode toBack(). Ini menempatkan teks di balik semua lain
kanvas menggambar elemen (demikian pula, toFront() membawa elemen-elemen ke depan sangat kanvas kami).

Sekarang, mari kita tambahkan handler event Gunaka mouse di atas lingkaran kami menggunakan properti node. Kami akan menetapkan gaya kursor ke 'penunjuk'.

Apa yang ini sebenarnya adalah mengatur properti gaya <circle>objek dalam dokumen kami.</circle> Dokumen kami terlihat seperti ini:

Sekarang, mari kita akhirnya menambahkan event handler onclick lingkaran kami:

Ketika lingkaran diklik, teks kami dirujuk dalam teks variabel adalah animasi ke full opacity lebih dari 2 detik. Lingkaran itu sendiri adalah animasi
untuk 0 opacity selama periode waktu yang sama. Kami juga mencakup fungsi panggilan balik dalam lingkaran yang bernyawa metode. Ini akan menghapus
unsur lingkaran dari dokumen kami sekali animasi telah selesai, karena sementara lingkaran memiliki 0 opacity, masih diklik sampai dihapus.

Contoh di sini.

8. Mari kita membangun sebuah Widget

Akhirnya, mari kita mengumpulkan apa yang kita pelajari dan membangun Meter suasana cukup sedikit. Pada dasarnya, Anda akan memilih nilai suasana hati antara 1 dan 5, 1 'sampah' dan
5 'positvely manik', dan Raphael akan menciptakan representasi yang baik dari ini.

Lihat widget di sini

Mulai dengan memodifikasi our_script.js terlihat seperti ini:

Hal ini menciptakan lingkaran radius 20px di pusat kanvas kami dan beberapa teks di atas lingkaran mengatakan 'Saya suasana hati'. 'Suasana hati' ditempatkan pada sebuah baris baru menggunakan
'\n'.

Selanjutnya, mari kita membuat beberapa kustom informasi yang sesuai dengan suasana hati kita dan memilih yang suasana hati kita.

Deskripsi teks mood kita disimpan dalam array yang disebut 'suasana hati' dan warna sesuai suasana ini disimpan dalam sebuah array yang disebut 'warna'.
Suasana hati, nilai antara 1 dan 5, disimpan dalam my_mood variabel.

Sekarang mari buat sebuah fungsi yang disebut dengan show_mood. Ketika dipanggil, fungsi ini akan menampilkan mood circle (lingkaran berwarna) dan teks yang sesuai dengan suasana hati.

Dalam show_mood(), kita memiliki lingkaran itu iterates sebanyak nilai my_mood. Dalam loop ini adalah diri pelaksana fungsi anonim. Hal ini diperlukan sehingga
Kami memiliki akses ke variabel saya pada setiap tahap iterasi. Di dalam diri pelaksana fungsi, kita membuat timeout - 50 setiap * saya detik, lingkaran
dibuat pada titik lingkaran asli kita. Setiap lingkaran kemudian diterjemahkan lebih dari 2 detik untuk 0px di x dan beberapa beberapa dari - 42px di y. Kami pastikan tempat
setiap lingkaran berturut-turut belakang kanvas. Perhatikan bahwa lingkaran penuh sesuai warna dalam array warna, ditentukan oleh my_mood.

show_mood() ini juga bertanggung jawab untuk menampilkan teks suasana hati kita yang menggunakan my_mood untuk memilih suasana sesuai dari moods_array.

show_mood() kemudian akhirnya menyingkirkan setiap onclick event handler ditetapkan ke teks asli dan lingkaran kami ditempatkan di pusat kanvas. Hal ini mencegah
Menggambar ulang suasana hati lingkaran.

Akhirnya, mari kita menetapkan onclick event handler untuk Pusat lingkaran dan teks 'Suasana hati saya'. Saya menetapkan event handler untuk kedua elemen sehingga mengeklik baik
teks atau lingkaran memiliki efek panggilan show_mood().

Kesimpulan

Yah, itu saja! Sekarang Anda harus memiliki platform suara untuk mendasarkan eksplorasi Anda ke dalam kerangka Raphael JS. Paling penting, saya berharap
Anda sekarang ingin menyelidiki Raphael JS dan menyusun beberapa gambar indah browser dan widget. Jangan lupa untuk Ikuti saya di kegugupan, dan berbagi kreasi Anda.

  • Ikuti kami di Twitter, atau berlangganan Nettuts + RSS Feed untuk harian web pengembangan tuts dan artikel.


Advertisement
Did you find this post useful?
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.