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.
<html>
<head>
<title>Raphael Play</title>
<script type="text/javascript" src="path/to/raphael.js"></script>
<script type="text/javascript" src="path/to/our_script.js"></script>
<style type="text/css">
#canvas_container {
width: 500px;
border: 1px solid #aaa;
}
</style>
</head>
<body>
<div id="canvas_container"></div>
</body>
</html> 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.
var paper = new Raphael(x, y, width, height); //option (a) var paper = new Raphael(element, width, height); //option (b)
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:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
} 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:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
} 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:
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier);
} 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.
var rectangle = paper.rect(200, 200, 250, 100);
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.
var ellipse = paper.ellipse(200, 400, 100, 50);
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:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circle = paper.circle(100, 100, 80);
for(var i = 0; i < 5; i+=1) {
var multiplier = i*5;
paper.circle(250 + (2*multiplier), 100 + multiplier, 50 - multiplier)
}
var rectangle = paper.rect(200, 200, 250, 100);
var ellipse = paper.ellipse(200, 400, 100, 50);
} 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 250 250"
'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'.
"M 250 250 l 0 -50"
Ini akan menarik garis ke atas 50px y-arah. Mari kita menulis string path yang akan menarik tetris tetronimo:
"M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z"
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:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
} 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:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr({fill: '#9cf', stroke: '#ddd', 'stroke-width': 5});
} memproduksi ini:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr(
{
gradient: '90-#526c7a-#64a0c1',
stroke: '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round',
rotation: -90
}
);
} 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.
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var tetronimo = paper.path("M 250 250 l 0 -50 l -50 0 l 0 -50 l -50 0 l 0 50 l -50 0 l 0 50 z");
tetronimo.attr(
{
gradient: '90-#526c7a-#64a0c1',
stroke: '#3b4449',
'stroke-width': 10,
'stroke-linejoin': 'round',
rotation: -90
}
);
tetronimo.animate({rotation: 360}, 2000, 'bounce');
} 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.
tetronimo.animate({rotation: 360, 'stroke-width': 1}, 2000, 'bounce', function() {
/* callback after original animation finishes */
this.animate({
rotation: -90,
stroke: '#3b4449',
'stroke-width': 10
}, 1000);
}); 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,
"M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"
dan tampak seperti ini:
Sekarang, menggunakan tetronimo asli kami dengan minimal atribut styling, aku akan menentukan string path baru di kita menghidupkan () metode.
tetronimo.attr(
{
stroke: 'none',
fill: 'blue'
}
);
tetronimo.animate({
path: "M 250 250 l 0 -50 l -50 0 l 0 -50 l -100 0 l 0 50 l 50 0 l 0 50 z"
}, 5000, 'elastic'); 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.
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circ = paper.circle(250, 250, 40);
circ.attr({fill: '#000', stroke: 'none'});
} Sekarang, mari kita tambahkan teks, 'Bye Bye lingkaran!' sehingga titik pusat pada titik yang sama sebagai pusat lingkaran kami.
var text = paper.text(250, 250, 'Bye Bye Circle!')
text.attr({opacity: 0, 'font-size': 12}).toBack(); 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'.
circ.node.onmouseover = function() {
this.style.cursor = 'pointer';
} Apa yang ini sebenarnya adalah mengatur properti gaya <circle>objek dalam dokumen kami.</circle> Dokumen kami terlihat seperti ini:
<circle cx="250.5" cy="250.5" r="40" fill="#000000" stroke="none" style="fill: #000000; stroke: none; cursor: pointer"> </circle>
Sekarang, mari kita akhirnya menambahkan event handler onclick lingkaran kami:
circ.node.onclick = function() {
text.animate({opacity: 1}, 2000);
circ.animate({opacity: 0}, 2000, function() {
this.remove();
});
} 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:
window.onload = function() {
var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);
var circ = paper.circle(250, 250, 20).attr({fill: '#000'});
var mood_text = paper.text(250, 250, 'My\nMood').attr({fill: '#fff'});
} 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.
moods = ['Rubbish', 'Not Good', 'OK', 'Smily', 'Positively Manic']; colors = ['#cc0000', '#a97e22', '#9f9136', '#7c9a2d', '#3a9a2d']; //pick a mood between 1 and 5, 1 being rubbish and 5 being positively manic var my_mood = 1;
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.
function show_mood() {
for(var i = 0; i < my_mood; i+=1) {
(function(i) {
setTimeout(function() {
paper.circle(250, 250, 20).attr({
stroke: 'none',
fill: colors[my_mood - 1]
}).animate({translation: '0 ' + (-42 * (i+1))}, 2000, 'bounce').toBack();
}, 50*i);
})(i);
}
paper.text(250, 300, moods[my_mood - 1]).attr({fill: colors[my_mood - 1]});
mood_text.node.onclick = function() {
return false;
}
circ.node.onclick = function() {
return false;
}
} 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().
circ.node.onclick = show_mood; mood_text.node.onclick = 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.
