Grafik Vektor Mudah dengan Perpustakaan Raphaël JavaScript

Raphaël adalah perpustakaan JavaScript kecil yang ditulis oleh Dmitry Baranovskiy dari Atlassian, yang membolehkan anda membuat dan memanipulasi grafik vektor di laman web anda. Ia sangat mudah digunakan dan bersesuaian dengan penyemak imbas; Menyokong Internet Explorer 6.0, Safari 3.0, Firefox 3.0, dan Opera 9.5. Raphaël secara dalaman menggunakan VML dalam IE dan SVG dalam pelayar lain.

Sekarang, demo yang melibatkan bulatan dan dataran adalah baik, tetapi saya ingin membuat contoh yang menunjukkan penggunaan grafik vektor yang sah dan praktikal. Jadi bagaimana dengan pengukuran statistik masa nyata? Berikut adalah tangkapan skrin graf penggunaan pemancuan semasa saya yang merancang tahap penggunaan "pemancuan" masa nyata. Paling penting, ia adalah snap untuk membuat.

HTML adalah mudah; Kami hanya memerlukan tajuk dan bekas untuk memegang kanvas kami - elemen div:

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

Untuk memulakan kita perlu menjana kanvas grafik baru. Saya selalu ingin meletakkan semua kod saya dalam definisi objek untuk membuat ruang nama yang berasingan, jadi kami akan bermula dengan kod berikut:

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

Menggunakan acara Window.onload yang kami panggil kaedah spgraph.init kami. Dalam kaedah ini, kami membuat kanvas kami menggunakan Raphael ("Grafik", 400, 200). Hujah pertama ialah ID elemen kontena kami, dua yang lain mewakili lebar dan ketinggian. Kami menyimpan objek kanvas yang dikembalikan di harta SPGraph.Graph kami. Dengan baris seterusnya kami membuat segi empat tepat dan menetapkan beberapa atribut:

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

Kaedah Rect membolehkan kita melukis segi empat tepat yang menyatakan koordinat x, koordinat, lebar, ketinggian, dan pilihan radius sudut. Perhatikan bahawa kami juga telah mengikat panggilan ke kaedah ATTR untuk menetapkan warna mengisi. Semua objek grafik Raphaël menyokong kaedah ATTR dan terdapat pelbagai atribut yang boleh anda tetapkan. Raphaël menyokong Chaining semua kaedahnya, yang akan kami ambil kesempatan tidak lama lagi. Usaha kami setakat ini telah menghasilkan segi empat tepat hitam yang indah ini dengan sudut bulat.

sekarang mari tambah jalur! Untuk melakukan ini, kami menambah gelung berikut ke Kaedah SPGraph.Init:

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

Loop melaksanakan 10 kali melukis garis setiap kali; Garis merah untuk yang pertama dan garis kelabu untuk yang lain. Kaedah laluan Raphaël memulakan mod laluan lukisan, mengembalikan objek laluan. Ia sebenarnya tidak menarik apa -apa sendiri; Anda perlu menggunakan kaedah objek Path, yang boleh dihubungkan. Kaedah MoveTo menggerakkan kursor lukisan ke koordinat X dan Y yang ditentukan dan kaedah Lineto menarik garis dari titik kursor ke titik yang ditentukan. Hasilnya adalah latar belakang Stripey di bawah:

Jadi sekarang kita perlu melukis garis graf sebenar. Paksi menegak (diwakili oleh jalur) adalah tahap penggunaan peratusan. Paksi mendatar akan mewakili masa dalam kenaikan 10 piksel. Di dunia nyata setiap kemas kini graf akan diperoleh melalui panggilan Ajax, katakan setiap 5 saat, tetapi di sini saya hanya membuat nilai rawak dan mengemas kini graf setiap saat. Sekali lagi, kami menggunakan kaedah laluan untuk melukis garis lebar 5 piksel.

kami memulakan laluan dan menyimpan rujukannya ke dalam harta spgraph.path seperti SO:

<h1>Current Sprocket Usage: <span ></span></h1>
<div ></div>

Setiap kemas kini, kami melanjutkan garis menggunakan kaedah lineto seperti:

var SpGraph = {
  init : function(){
    SpGraph.graph = Raphael("graph", 400, 200);
    SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");
  }
}

window.onload = function () {
  SpGraph.init();
};

SpGraph.graph.rect(0, 0, 390, 110, 10).attr("fill", "#000");

for(var x = 10; x < 110; x += 10) {
  var c = (x > 10) ? "#333" : "#f00";
  SpGraph.graph.path({stroke: c}).moveTo(0, x).lineTo(390,x);
}

Jangan lupa untuk melihatnya bekerja dalam demo. Ok, jadi mungkin graf penggunaan pemancuan bukanlah contoh yang sah dan praktikal yang saya janjikan, tetapi sekurang -kurangnya anda dapat melihat apa yang dapat anda capai dengan Raphaël dengan hanya sedikit usaha. Dokumentasi di laman web ini tidak lengkap, tetapi ia tidak terlalu sukar untuk bekerja. Kenapa anda tidak mempunyai diri sendiri? Grafik Vektor yang Cepat, Mudah, Salib, Vektor di Web tidak pernah menjadi lebih mudah. ​​

soalan yang sering ditanya mengenai grafik vektor mudah dengan Perpustakaan Raphael Javascript

Apakah Perpustakaan Raphael Javascript? Ia memudahkan proses membuat, memanipulasi, dan menghidupkan grafik vektor, menjadikannya pilihan yang sangat baik untuk pemaju yang ingin menambah elemen visual yang menarik ke laman web atau aplikasi web mereka. Perpustakaan adalah serasi silang penyemak imbas dan menggunakan cadangan SVG W3C dan VML sebagai asas untuk membuat grafik, yang bermaksud ia boleh berfungsi di hampir mana-mana pelayar. Anda boleh melakukan ini dengan memuat turun perpustakaan dari laman web rasmi dan menghubungkannya dalam fail HTML anda. Sebaik sahaja perpustakaan dimasukkan, anda boleh mula membuat grafik vektor dengan memanggil fungsi Raphael dan menyatakan lebar dan ketinggian objek kertas di mana grafik anda akan ditarik. Perpustakaan menyediakan beberapa kaedah untuk animasi, termasuk kaedah Animate, yang membolehkan anda menghidupkan transformasi sesuatu objek sepanjang tempoh yang ditentukan. Anda juga boleh mengawal pelonggaran animasi dan menentukan fungsi panggil balik yang akan dilaksanakan apabila animasi selesai.

Bagaimana saya membuat bentuk dengan Perpustakaan Raphael Javascript? Sebagai contoh, anda boleh menggunakan kaedah Rect untuk membuat segi empat tepat, kaedah bulatan untuk membuat bulatan, dan kaedah elips untuk membuat elips. Setiap kaedah memerlukan parameter tertentu, seperti koordinat sudut kiri atas dan lebar dan ketinggian untuk kaedah rect, atau koordinat pusat dan jejari untuk kaedah bulatan. Kaedah ini membolehkan anda menetapkan pelbagai sifat bentuk, seperti warna mengisi, warna strok, lebar strok, dan kelegapan. Anda juga boleh menggunakan kaedah ATTR untuk menggunakan transformasi ke bentuk, seperti skala, putaran, dan terjemahan. Sebagai contoh, anda boleh menggunakan kaedah klik untuk melampirkan pengendali acara klik ke bentuk, atau kaedah hover untuk melampirkan pengendali acara tetikus dan tetikus. Kaedah ini membolehkan anda membuat grafik interaktif yang bertindak balas terhadap tindakan pengguna. Kaedah ini mewujudkan satu set bentuk yang boleh dimanipulasi sebagai satu unit. Anda boleh menambah bentuk ke set menggunakan kaedah push, dan menggunakan transformasi atau animasi kepada semua bentuk dalam set sekaligus. Sebagai tambahan kepada bentuk asas, perpustakaan menyediakan kaedah untuk membuat laluan, yang boleh digunakan untuk membuat bentuk dan reka bentuk yang kompleks. Anda juga boleh menggabungkan pelbagai bentuk dan laluan untuk membuat grafik yang rumit. Anda boleh mengakses kod sumber SVG atau VML grafik dengan memanggil kaedah ToString pada objek kertas. Kaedah ini mengembalikan rentetan kod SVG atau VML yang mewakili keadaan semasa kertas. Anda juga boleh menyemak pelbagai tutorial dalam talian dan catatan blog yang menyediakan panduan langkah demi langkah mengenai cara menggunakan perpustakaan. Di samping itu, anda boleh menemui banyak contoh dan demo pada platform perkongsian kod seperti GitHub dan Codepen.

Atas ialah kandungan terperinci Grafik Vektor Mudah dengan Perpustakaan Raphaël JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!