Grafik Vektor Mudah dengan Perpustakaan Rapha?l JavaScript
Mar 09, 2025 am 12:43 AM
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.

<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.

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!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

Video Face Swap
Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Mekanisme pengumpulan sampah JavaScript secara automatik menguruskan memori melalui algoritma pembersihan tag untuk mengurangkan risiko kebocoran ingatan. Enjin melintasi dan menandakan objek aktif dari objek akar, dan tidak bertanda dianggap sebagai sampah dan dibersihkan. Sebagai contoh, apabila objek tidak lagi dirujuk (seperti menetapkan pembolehubah kepada null), ia akan dikeluarkan dalam pusingan seterusnya kitar semula. Punca kebocoran memori yang biasa termasuk: ① Pemasa atau pendengar peristiwa yang tidak jelas; ② Rujukan kepada pembolehubah luaran dalam penutupan; ③ Pembolehubah global terus memegang sejumlah besar data. Enjin V8 mengoptimumkan kecekapan kitar semula melalui strategi seperti kitar semula generasi, penandaan tambahan, kitar semula selari/serentak, dan mengurangkan masa menyekat benang utama. Semasa pembangunan, rujukan global yang tidak perlu harus dielakkan dan persatuan objek harus dihiasi dengan segera untuk meningkatkan prestasi dan kestabilan.

Terdapat tiga cara biasa untuk memulakan permintaan HTTP dalam node.js: Gunakan modul terbina dalam, axios, dan nod-fetch. 1. Gunakan modul HTTP/HTTPS terbina dalam tanpa kebergantungan, yang sesuai untuk senario asas, tetapi memerlukan pemprosesan manual jahitan data dan pemantauan ralat, seperti menggunakan https.get () untuk mendapatkan data atau menghantar permintaan pos melalui .write (); 2.AXIOS adalah perpustakaan pihak ketiga berdasarkan janji. Ia mempunyai sintaks ringkas dan fungsi yang kuat, menyokong async/menunggu, penukaran JSON automatik, pemintas, dan lain -lain. Adalah disyorkan untuk memudahkan operasi permintaan tak segerak; 3.Node-Fetch menyediakan gaya yang serupa dengan pengambilan penyemak imbas, berdasarkan janji dan sintaks mudah

Jenis data JavaScript dibahagikan kepada jenis primitif dan jenis rujukan. Jenis primitif termasuk rentetan, nombor, boolean, null, undefined, dan simbol. Nilai -nilai tidak berubah dan salinan disalin apabila memberikan nilai, jadi mereka tidak mempengaruhi satu sama lain; Jenis rujukan seperti objek, tatasusunan dan fungsi menyimpan alamat memori, dan pembolehubah menunjuk objek yang sama akan mempengaruhi satu sama lain. Typeof dan Instanceof boleh digunakan untuk menentukan jenis, tetapi memberi perhatian kepada isu -isu sejarah TypeOfNull. Memahami kedua -dua jenis perbezaan ini dapat membantu menulis kod yang lebih stabil dan boleh dipercayai.

Helo, pemaju JavaScript! Selamat datang ke berita JavaScript minggu ini! Minggu ini kami akan memberi tumpuan kepada: Pertikaian tanda dagangan Oracle dengan Deno, objek masa JavaScript baru disokong oleh pelayar, kemas kini Google Chrome, dan beberapa alat pemaju yang kuat. Mari mulakan! Pertikaian tanda dagangan Oracle dengan percubaan Deno Oracle untuk mendaftarkan tanda dagangan "JavaScript" telah menyebabkan kontroversi. Ryan Dahl, pencipta Node.js dan Deno, telah memfailkan petisyen untuk membatalkan tanda dagangan, dan dia percaya bahawa JavaScript adalah standard terbuka dan tidak boleh digunakan oleh Oracle

Rangka kerja JavaScript mana yang terbaik? Jawapannya ialah memilih yang paling sesuai mengikut keperluan anda. 1. REACT adalah fleksibel dan bebas, sesuai untuk projek sederhana dan besar yang memerlukan penyesuaian tinggi dan keupayaan seni bina pasukan; 2. Angular menyediakan penyelesaian lengkap, sesuai untuk aplikasi peringkat perusahaan dan penyelenggaraan jangka panjang; 3. Vue mudah digunakan, sesuai untuk projek kecil dan sederhana atau perkembangan pesat. Di samping itu, sama ada terdapat timbunan teknologi sedia ada, saiz pasukan, kitaran hayat projek dan sama ada SSR diperlukan juga faktor penting dalam memilih rangka kerja. Singkatnya, tidak ada kerangka terbaik, pilihan terbaik adalah yang sesuai dengan keperluan anda.

IIFE (Segera Dilanjutkan FunctionExpression) adalah ekspresi fungsi yang dilaksanakan dengan segera selepas definisi, digunakan untuk mengasingkan pembolehubah dan mengelakkan mencemarkan skop global. Ia dipanggil dengan membungkus fungsi dalam kurungan untuk menjadikannya ungkapan dan sepasang kurungan segera diikuti olehnya, seperti (fungsi () {/code/}) ();. Penggunaan terasnya termasuk: 1. Elakkan konflik berubah -ubah dan mencegah pertindihan penamaan antara skrip berganda; 2. Buat skop peribadi untuk menjadikan pembolehubah dalaman tidak kelihatan; 3. Kod modular untuk memudahkan permulaan tanpa mendedahkan terlalu banyak pembolehubah. Kaedah penulisan biasa termasuk versi yang diluluskan dengan parameter dan versi fungsi anak panah ES6, tetapi perhatikan bahawa ungkapan dan ikatan mesti digunakan.

Janji adalah mekanisme teras untuk mengendalikan operasi tak segerak dalam JavaScript. Memahami panggilan rantaian, pengendalian ralat dan gabungan adalah kunci untuk menguasai aplikasi mereka. 1. Panggilan rantai mengembalikan janji baru melalui .then () untuk merealisasikan persamaan proses tak segerak. Setiap .then () menerima hasil sebelumnya dan boleh mengembalikan nilai atau janji; 2. Pengendalian ralat harus menggunakan .catch () untuk menangkap pengecualian untuk mengelakkan kegagalan senyap, dan boleh mengembalikan nilai lalai dalam tangkapan untuk meneruskan proses; 3. Gabungan seperti janji.all () (berjaya hanya berjaya selepas semua kejayaan), janji.race () (penyempurnaan pertama dikembalikan) dan janji.allsettled () (menunggu semua penyelesaian)

CACHEAPI adalah alat yang disediakan oleh penyemak imbas kepada permintaan rangkaian cache, yang sering digunakan bersempena dengan ServiceWorker untuk meningkatkan prestasi laman web dan pengalaman luar talian. 1. Ia membolehkan pemaju menyimpan sumber secara manual seperti skrip, helaian gaya, gambar, dan lain -lain; 2. Ia boleh memadankan tindak balas cache mengikut permintaan; 3. Ia menyokong memotong cache tertentu atau membersihkan seluruh cache; 4. Ia boleh melaksanakan keutamaan cache atau strategi keutamaan rangkaian melalui perkhidmatan pekerja yang mendengar acara mengambil; 5. Ia sering digunakan untuk sokongan luar talian, mempercepat kelajuan akses berulang, sumber utama dan kandungan kemas kini latar belakang; 6. Apabila menggunakannya, anda perlu memberi perhatian kepada kawalan versi cache, sekatan penyimpanan dan perbezaan dari mekanisme caching HTTP.
