Pengenalan kepada Snap.svg

3

Takeaways Key

snap.svg adalah perpustakaan yang kuat dan fleksibel yang direka khusus untuk bekerja dengan grafik vektor berskala (SVG), menawarkan ciri -ciri seperti pelekat, keratan, corak, kecerunan, dan banyak lagi.

snap.svg membolehkan pemaju menghidupkan dan memanipulasi kandungan SVG yang sedia ada dan kandungan SVG yang dihasilkan dengan snap.svg, dan serasi dengan semua pelayar moden.

Snap.svg adalah perpustakaan peringkat rendah, dan sementara ia belum lagi menyokong carta atau mengikat data, sangat sesuai untuk mewujudkan animasi kompleks dan kandungan SVG interaktif.

• unsur -unsur SVG boleh dikumpulkan dalam snap.svg supaya transformasi dan pengendalian peristiwa biasa dapat lebih mudah digunakan untuk semua elemen dalam kumpulan.
• Snap.svg menyokong kebanyakan ciri SVG, termasuk kecerunan, corak, dan laluan kliping, dan serasi dengan semua pelayar moden. Walau bagaimanapun, beberapa ciri SVG mungkin tidak disokong sepenuhnya dalam pelayar yang lebih tua.
Walaupun SVG telah wujud selama lebih dari satu dekad, ia menjadi popular dalam beberapa tahun kebelakangan ini sebagai cara untuk menarik carta dalam aplikasi web, terima kasih kepada beberapa perpustakaan hebat yang telah membuat carta dan lukisan yang indah tersedia dengan mudah untuk pemaju: dalam D3.js khusus untuk carta dan raphaël untuk lukisan dan animasi SVG yang sejuk.
perpustakaan baru baru baru -baru ini muncul; Mereka menyediakan pemaju dan pereka front-end dengan pendekatan baru dan ciri-ciri baru yang menakjubkan:

snap.svg, seperti yang akan kita lihat, menawarkan ciri SVG terbaru seperti pelekat, keratan, corak, kecerunan, dan lain -lain ...

PathSJS adalah perpustakaan minimum untuk penciptaan carta berasaskan SVG. Ia direka untuk menyokong pengaturcaraan reaktif dengan menghasilkan laluan SVG yang boleh digunakan dengan enjin templat. Ia berfungsi dengan baik dengan enjin template berasaskan kumis, seperti ractive.

Walaupun ia tidak berasaskan SVG, P5 patut disebutkan. Ini adalah percubaan, dan nampaknya yang baik, untuk mengatasi isu -isu tradisional yang mempengaruhi elemen kanvas HTML5 - interaksi khususnya.

Di seluruh artikel ini, kita akan melihat dengan baik di Snap.svg, bermula dari asas -asas.
raphaël
Jika anda tidak mempunyai peluang untuk melihat Raphaël, anda mungkin sepatutnya. Ia adalah sekeping JavaScript yang dibuat sebagai projek solo oleh Dmitry Baranovskiy. Walaupun ia bermula sebagai projek peribadi, hasilnya adalah luar biasa untuk antara muka (sangat jelas dan konsisten), prestasi, dan penampilan (terutama untuk animasi). Perpustakaan lebih berorientasikan ke arah lukisan dan animasi "bebas" dan bukannya carta. Pelanjutan Graphaël kemudiannya dikeluarkan untuk menangani ini, tetapi ia tidak menjadi popular dan meluas seperti D3.

Walaupun berada di hadapan perpustakaan lain, pada masa Raphaël mula menunjukkan hadnya. Sebagai contoh, untuk bersesuaian dengan pelayar yang lebih tua Raphaël tidak menyokong semua ciri SVG baru yang sejuk yang akan membuat animasi anda menonjol.

Itulah sebabnya penulis memutuskan untuk memulakan segar dengan projek baru, Snap.svg, yang tentu saja mendapat manfaat daripada pengalaman yang dikumpulkan oleh Raphaël. Snap.svg juga pecah dengan masa lalu, yang membolehkan pengenalan kesan khas baru.

oh, snap!

Sebelum menyelidiki sintaks Snap dan bermula dengan beberapa contoh, mari kita cepat mengkaji kebaikan dan keburukan perpustakaan baru ini:

Pro:

Ia menyokong semua ciri -ciri sejuk yang kami nyatakan di atas.
Snap boleh membungkus dan menghidupkan SVG sedia ada. Anda boleh menjana SVG anda dengan alat seperti Adobe Illustrator, Inkscape, atau Sketch, atau memuatkan rentetan SVG secara asynchronously dan menanyakan kepingan yang anda perlukan untuk menjadikan fail SVG menjadi sprite.
ia adalah sumber percuma dan terbuka.

cons:

Ia adalah perpustakaan peringkat rendah, jadi jika anda perlu memvisualisasikan data, malangnya tidak ada sokongan untuk carta lagi.
tidak ada sokongan untuk mengikat data.
Snap adalah projek muda yang belum mencapai kematangan penuh. Ia sudah bagus untuk digunakan untuk projek peribadi anda, tetapi anda perlu berat aspek ini sebelum menggunakannya dalam yang kompleks.

Seperti yang telah kami sebutkan, SNAP menggunakan ciri -ciri yang tidak disokong oleh pelayar yang lebih tua. Walaupun jadual keserasian yang lengkap dan terkini belum diberikan, perpustakaan ini harus berfungsi dengan baik sekurang -kurangnya dengan versi penyemak imbas berikut (dan lebih baru):

Firefox ESR 18
IE 9.0.8
Chrome 29
opera 24

Bermula dengan Snap

Selepas memuat turun fail sumber dari repositori GitHub, anda boleh mengosongkannya dan mencari folder Dist, yang mengandungi fail pengedaran yang dibina. Untuk arahan terperinci mengenai bangunan snap dengan Grunt, atau untuk memeriksa versi terkini, lihat di sini.

Sebaik sahaja anda telah menyalin versi minifikasi fail di dalam folder JS projek baru anda, hanya masukkan skrip di halaman HTML anda. Dengan mengandaikan ia terletak di direktori akar projek anda, anda hanya boleh menambah baris ini sebelum tag badan penutup halaman:

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Sekarang kami bersedia untuk membuat kawasan lukisan untuk grafik vektor kami. Kami mempunyai dua cara untuk melakukan ini:

• Buat permukaan lukisan baru, yang akan dilampirkan ke dom halaman (dalam badan).
• Gunakan semula elemen DOM yang sedia ada, dan bungkusnya dalam struktur snap. Anda boleh membungkus mana -mana elemen, tetapi untuk kaedah lukisan anda memerlukan elemen SVG.

Cara pertama membolehkan anda menetapkan lebar dan ketinggian kawasan permukaan secara eksplisit pada penciptaan dalam kod JavaScript. Jika anda ingin mencapai tahap pemisahan yang lebih tinggi antara persembahan dan kandungan, anda boleh menggunakan cara kedua, menyatakan nilai dalam peraturan CSS. Pada tahap yang tinggi, kaedah pertama membolehkan anda menyesuaikan penampilan permukaan lukisan secara dinamik, tetapi jika anda tidak perlu, cara kedua adalah lebih sesuai dengan MVC. Selain itu, pembalut adalah apa yang membolehkan anda mengimport dan mengubahsuai lukisan SVG yang dibuat dengan alat luaran, seperti yang disebutkan dalam bahagian Pengenalan.

Jadi, sebagai contoh, untuk membuat kawasan lukisan 800-by-600 piksel baru, anda hanya memerlukan baris JavaScript berikut:

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Jika, sebaliknya, anda mahu membungkus yang sedia ada, katakan #complexsvgfromillustrator:

<span>var s = <span>Snap</span>(800, 600);</span>

anda masih boleh lari dengan satu baris JavaScript, untuk mengimport permukaan lukisan:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

Nota sampingan: Untuk pembaca yang ingin tahu: Jika anda memeriksa objek snap selepas penciptaan, anda akan melihat mereka mempunyai medan kertas, memberi keterangan kepada warisan Raphaël.

bentuk

Sebaik sahaja kami telah mencipta permukaan lukisan kami, pembungkus snap kami, sudah tiba masanya untuk menarik beberapa bentuk di atasnya. Katakan anda ingin melukis bulatan:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Seperti yang anda lihat dari dokumen, dua parameter pertama dalam kaedah bulatan () adalah koordinat pusatnya, manakala yang ketiga adalah radius bulatan. Semua parameter ini adalah wajib, dan gagal memberi mereka akan mengakibatkan kesilapan dilemparkan. Kaedah bulatan (), seperti semua kaedah lukisan lain, akan mengembalikan rujukan kepada objek.

Anda juga boleh menarik elips, seperti yang ditunjukkan dalam sampel kod berikut. Radius menegak dan mendatar diperlukan kali ini. Sekali lagi, semua parameter adalah wajib.

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Jika anda ingin melukis segi empat tepat, gunakan kod berikut. Ini akan mewujudkan segi empat tepat dengan sudut kiri atasnya di (100px, 100px), lebar 200px, dan ketinggian 200px.

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

Perkara yang sejuk mengenai kaedah Rect (), adalah bahawa ia juga menerima dua parameter pilihan yang mengawal jejari sudut bulat, secara bebas untuk paksi menegak dan mendatar. Parameter ini lalai kepada 0 apabila tidak diluluskan, tetapi berhati -hati bahawa jika anda hanya lulus satu (radius mendatar), yang kedua tidak akan ditetapkan kepada sifar, tetapi kedua -duanya akan menganggap nilai yang sama.

<span>var r = paper.rect(100, 100, 200, 300);</span>

Sekarang, jika anda mahu bermula dari awal, anda boleh membuat permukaan lukisan lain, atau anda hanya boleh menggunakan kaedah kertas.

garis dan poligon

Untuk menutup lukisan yang lebih rumit, kita perlu mengambil langkah mundur, dan bercakap tentang garis lukisan. Seperti yang anda harapkan kaedah mengambil empat koordinat titik akhir garis, seperti yang ditunjukkan di bawah.

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Apa yang lebih menarik ialah kemungkinan untuk menarik polylines kompleks: var line = paper.polyline (10, 100, 110, 200); pada dasarnya bersamaan dengan kaedah () kaedah di atas, tetapi anda mungkin akan terkejut dengan hasil visualnya. Untuk melihat mengapa, mari kita cuba ini

<span>var s = <span>Snap</span>(800, 600);</span>

paper.polyline () dan paper.polygon () adalah alias untuk kaedah yang sama, dan secara lalai poligon yang dihasilkan (tertutup) ditarik dengan mengisi hitam dan tiada strok. Itulah sebabnya anda tidak dapat melihat garis yang ditarik dengan polyline () di atas (walaupun anda boleh menyemak, dengan memeriksa halaman, bahawa kod SVG untuk itu telah dilampirkan kepada bekasnya).

Untuk mengubah tingkah laku ini, serta penampilan unsur -unsur lain, kita mesti memperkenalkan atribut.

atribut

Pengertian atribut untuk elemen snap agak lebih luas daripada biasa, yang bermaksud bahawa ia termasuk kedua -dua atribut HTML dan atribut CSS di bawah antara muka yang sama (sementara kebanyakan perpustakaan lain membuat perbezaan antara kaedah .attr () untuk atribut HTML dan '. gaya () 'untuk css). Dengan menggunakan kaedah elemen.attr () pada objek pembalut snap, anda boleh menetapkan kelas atau IDnya, serta warna atau lebarnya.

Seperti yang disebutkan di atas, menggunakan SNAP, anda mempunyai dua cara untuk menetapkan sifat CSS ke elemen. Satu adalah untuk memasukkan sifat -sifat ini dalam fail CSS yang berasingan, dan kemudian berikan kelas yang sesuai untuk elemen anda:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Hasil yang sama dapat diperoleh dengan memberikan sifat -sifat ini menggunakan JavaScript:

<span>var paper = <span>Snap</span>('#complexSVGfromIllustrator'),
</span>    circle <span>= paper.circle(100, 50, 10);</span>

Sekali lagi, cara pertama membolehkan pemisahan yang lebih baik antara kandungan dan persembahan, sementara yang kedua memberikan kemungkinan untuk mengubah atribut secara dinamik. Sekiranya anda berfikir tentang mencampurkan kedua -dua strategi, perlu diingat bahawa peraturan yang ditakrifkan dalam fail CSS akan mengalahkan yang anda berikan dengan elemen.attr (), walaupun perintah temporal di mana mereka ditugaskan untuk elemen.

Jika anda tidak mengekalkan rujukan kepada elemen yang anda mahu gaya, jangan risau, anda boleh merebutnya dengan mudah menggunakan pemilih CSS:

<span>var ellipse = paper.ellipse(100, 50, 10, 20);</span>

Kumpulan

elemen SVG boleh dikumpulkan supaya transformasi dan pengendalian peristiwa biasa dapat lebih mudah digunakan untuk semua elemen dalam satu kumpulan. Membuat kumpulan adalah mudah:

<span>var r = paper.rect(100, 100, 200, 300);</span>

Berhati -hati: Perintah atau Argumen penting! Kedua, jika anda memberikan elemen kepada kumpulan, ia akan dikeluarkan dari mana -mana kumpulan, ia mungkin sudah menjadi milik.

unsur boleh, tentu saja, juga ditambah kepada kumpulan yang sedia ada selepas mereka dicipta:

<span>var rect = paper.rect(100, 100, 200, 300, 10); //equivalent to  paper.rect(100, 100, 200, 300, 10, 10);</span>

imej

Snap menyokong imej raster bersarang di dalam elemen SVG, memuatkannya secara asynchronously dan memaparkannya hanya pada penyelesaian beban.

<span><span><span><script</span> src<span>="/js/snap.svg-min.js"</span>></span><span><span></script</span>></span></span>

Objek yang dihasilkan boleh dianggap sebagai elemen SVG. Perhatikan, jika anda menggunakan pilih () pada imej untuk mendapatkannya kemudian, pembalut yang dibuat akan menjadi elemen HTML, jadi kebanyakan kaedah yang tersedia untuk elemen SVG tidak akan disokong.

Transformasi

kita telah melihat bagaimana untuk menarik poligon asimetrik seperti elips dan segi empat tepat. Walau bagaimanapun, kaedah asas menghalang kita untuk menarik angka -angka ini sejajar dengan paksi Cartesian. Bagaimana jika kita mahu melukis elips yang paksinya 45 ° diputar berkenaan dengan paksi x-y? Kami tidak dapat menentukan ini dalam kaedah penciptaan, tetapi kita boleh menggunakan transformasi untuk mendapatkan hasil yang sama.

Begitu juga, kita mungkin perlu memutar imej, atau memindahkan elemen (atau kumpulan) pada satu ketika selepas penciptaannya. Kaedah transformasi () membolehkan kita berbuat demikian, dengan lulus rentetan transformasi SVG:

<span>var s = <span>Snap</span>(800, 600);</span>

Kaedah ini boleh mengambil sama ada rentetan atau objek sebagai input. Kami juga boleh menggunakan matriks transformasi yang berkaitan dengan elemen untuk menggunakan transformasi yang sama ke elemen lain:

<span><span><span><svg</span> id<span>='complexSVGfromIllustrator'</span> version<span>="1.1"</span> xmlns<span>="https://www.w3.org/2000/svg"</span>></span>
</span>  ...
<span><span><span></svg</span>></span></span>

Berhati -hati: Pusat transformasi untuk elemen kedua masih akan menjadi yang digunakan untuk yang pertama, jadi kesan akhir mungkin mengejutkan anda.

kaedah transformasi () juga boleh digunakan untuk mengambil objek deskriptor transformasi untuk elemen yang dipanggil - hanya memanggilnya tanpa argumen. Deskriptor ini boleh digunakan untuk mengambil matriks transformasi tempatan dan matriks perbezaan dalam kes elemen bersarang:

<span>var s = <span>Snap</span>('#complexSVGfromIllustrator');</span>

Kesimpulan

Artikel ini memberikan pengenalan kepada asas -asas Snap.svg. Sekiranya anda berminat untuk melihat barangan yang paling keren, sila tunggu, sebagai susulan lanjutan akan diterbitkan tidak lama lagi.

Jika anda ingin mengetahui lebih lanjut mengenai visualisasi data dan snap, berikut adalah beberapa sumber yang berguna:

tutorial snap.svg.
slaid dari persembahan mengenai data-visualisasi dan teknik lanjutan.
Lihat beberapa kod di atas dalam tindakan pada Codepen.

Soalan Lazim (Soalan Lazim) Mengenai Snap Svg

Apakah perbezaan antara SNAP SVG dan perpustakaan SVG yang lain? Tidak seperti perpustakaan SVG yang lain, SNAP SVG menyediakan API yang mudah dan intuitif untuk menghidupkan dan memanipulasi kedua -dua kandungan SVG sedia ada dan kandungan SVG yang dihasilkan dengan SVG SNAP. Ia juga menyokong kebanyakan ciri SVG, termasuk kecerunan, corak, dan laluan keratan, dan ia serasi dengan semua pelayar moden. Anda perlu memasukkan fail JavaScript SVG SVG dalam dokumen HTML anda. Anda boleh memuat turunnya dari laman web SNAP SVG rasmi atau memasukkannya terus dari CDN. Sebaik sahaja anda telah memasukkan fail SVG SNAP, anda boleh mula membuat dan memanipulasi kandungan SVG menggunakan SNAP SVG API.

Bolehkah saya menggunakan snap svg untuk animasi kompleks?

Ya, Snap SVG adalah sempurna untuk membuat animasi kompleks. Ia menyediakan API animasi yang kuat yang membolehkan anda menghidupkan sebarang atribut SVG. Anda juga boleh menggunakan transformasi matriks SNAP SVG untuk mewujudkan animasi kompleks dengan mudah. Selain itu, SNAP SVG menyokong fungsi pelonggaran, yang boleh digunakan untuk membuat animasi yang lancar dan semulajadi. , Firefox, Safari, Opera, dan Internet Explorer 9 dan ke atas. Walau bagaimanapun, beberapa ciri SVG mungkin tidak disokong sepenuhnya dalam pelayar yang lebih tua.

Bagaimana saya boleh membuat kandungan SVG interaktif dengan snap svg? . Anda boleh menggunakan fungsi pengendalian acara SNAP SVG untuk bertindak balas terhadap interaksi pengguna, seperti klik atau pergerakan tetikus. Anda juga boleh menggunakan API Animasi SVG SVG untuk membuat animasi interaktif. Ia tidak mengganggu perpustakaan lain, dan ia tidak mengubah suai objek JavaScript asli. Ini menjadikan SNAP SVG pilihan yang baik untuk projek -projek yang menggunakan perpustakaan JavaScript lain. Anda boleh menggunakan fungsi SNAP SVG untuk mengubah sifat -sifat elemen SVG, mengubah elemen SVG, dan menghidupkan elemen SVG. Anda juga boleh menggunakan fungsi pemilih SVG SVG untuk memilih elemen SVG tertentu. Anda boleh menggunakan fungsi penapis SVG SVG untuk membuat dan memohon penapis SVG kepada elemen SVG. Ini membolehkan anda membuat pelbagai kesan visual, seperti kabur, pencahayaan, dan pelarasan warna. mewujudkan kecerunan SVG. Anda boleh menggunakan fungsi kecerunan SVG SVG untuk mewujudkan kecerunan linear dan radial, dan anda boleh menggunakan fungsi warna SNAP SVG untuk menentukan warna kecerunan. 🎜> Ya, SNAP SVG menyokong corak SVG. Anda boleh menggunakan fungsi corak SVG SVG untuk membuat dan menggunakan corak SVG untuk elemen SVG. Ini membolehkan anda membuat pelbagai kesan visual, seperti tekstur dan corak.

Atas ialah kandungan terperinci Pengenalan kepada Snap.svg. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!