Advanced Snap.svg

3

kita telah melihat, dalam jawatan terdahulu, bagaimana untuk memulakan dengan snap.svg. Dalam jawatan ini, kami akan melihat dengan lebih dekat ciri -ciri baru yang disebutkan dalam artikel pertama.

Takeaways Key

snap.svg maju membolehkan penciptaan topeng kompleks, kecerunan dan corak, yang membolehkan penciptaan grafik unik dan dinamik.

snap.svg menawarkan keupayaan animasi yang komprehensif, dengan pelbagai kaedah untuk menghidupkan unsur -unsur secara bebas dan serentak.

Pengendalian acara dalam snap.svg membolehkan interaksi pengguna, dengan kaedah untuk mengendalikan klik, klik dua kali, pergerakan tetikus dan peristiwa sentuhan.

• snap.svg menyokong penggunaan semula kod SVG yang sedia ada, yang membolehkan suntikan kod SVG sebagai rentetan atau bacaan fail yang ada.
• Prestasi boleh diperbaiki apabila memanipulasi DOM menggunakan dokumentasi dalam snap.svg, yang membawa kepada penjimatan prestasi yang signifikan untuk lukisan SVG yang besar.
masking
Mari mulakan dengan mengingatkan bagaimana untuk membuat permukaan lukisan, bentuk yang mudah, dan kemudian muatkan imej:

bulatan merangkumi pusat imej, untuk sekarang.

Ia adalah jenis kasihan, walaupun, bahawa anda hanya boleh mempunyai imej segi empat tepat. Mungkin pereka anda mencipta butang atau gambar bulat yang bagus. Sudah tentu, terdapat beberapa penyelesaian, tetapi mereka semua meninggalkan anda dengan masalah lain: senario kes terbaik, pereka boleh memberi anda imej dengan luar yang sepadan dengan latar belakang halaman, supaya ia kelihatan bulat. Walau bagaimanapun, dengan mengandaikan anda mempunyai latar belakang yang kukuh, jika anda perlu menukar warnanya, anda perlu mengedit imej. Anda boleh menggunakan ketelusan, tetapi anda memerlukan format yang lebih berat seperti PNG, atau kualiti longgar dengan GIF. Dalam beberapa tahun, mungkin, Webp akan disokong sepenuhnya oleh semua pelayar, dan itu akan menamatkan teka -teki. Sama ada cara, jika anda memerlukan interaktiviti untuk imej anda, anda akan terjebak dengan bentuk segi empat tepat yang bertindak balas terhadap peristiwa seperti tetikus, mouseout, klik, dan lain -lain

Setelah berurusan dengan Flash untuk masa yang lama pada masa lalu, salah satu perkara yang paling mengecewakan dalam SVG tidak dapat menggunakan topeng, diperkenalkan dalam SVG 1.1). Dalam Snap, memohon topeng ke mana -mana elemen, termasuk imej, agak mudah:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

Pada dasarnya, kita hanya perlu menetapkan harta topeng ke elemen kami. Kita perlu berhati -hati dengan elemen yang kita gunakan sebagai topeng sebenar. Oleh kerana kelegapan elemen akhir akan berkadar dengan tahap putih dalam elemen topeng, kita mesti mengisi bulatan dengan putih jika kita mahukan kelegapan penuh untuk imej kita. Walaupun pada mulanya ini mungkin kelihatan menjengkelkan, ia membuka banyak kemungkinan untuk kesan yang luar biasa, seperti yang akan kita lihat di bahagian seterusnya.

Anda jelas boleh mengarang bersama -sama bentuk yang berbeza untuk membuat topeng kompleks. Snap menawarkan beberapa gula sintaktik untuk membantu anda:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

kaedah paper.mask () bersamaan dengan kertas.g (), dan sebenarnya ia boleh digantikan dengan lancar.

Clipping

Laluan keratan mengehadkan rantau yang cat boleh digunakan, jadi mana -mana bahagian lukisan di luar rantau yang dibatasi oleh laluan kliping yang sedang aktif tidak ditarik. Laluan kliping boleh dianggap sebagai topeng dengan kawasan yang kelihatan (di dalam laluan keratan) mempunyai nilai alfa 1 dan kawasan tersembunyi mempunyai nilai alfa 0. Satu perbezaannya ialah sementara kawasan yang tersembunyi oleh topeng akan bertindak balas terhadap peristiwa , kawasan yang dipotong tidak akan.

Snap tidak mempunyai pintasan untuk keratan, tetapi anda boleh menetapkan klip, klip-laluan, dan ciri-ciri klip-laluan mana-mana elemen menggunakan kaedah ATTR ().

Gradien

SVG 1.1 membolehkan penggunaan kecerunan untuk mengisi bentuk. Sudah tentu, jika kita menggunakan bentuk tersebut untuk mengisi topeng, kita dapat memanfaatkan kemungkinan untuk menentukan tahap alpha lukisan akhir dengan mengubah pengisian topeng, dan menghasilkan kesan yang mengagumkan. SNAP menyediakan pintasan untuk mencipta kecerunan, yang kemudiannya boleh diberikan kepada harta benda elemen lain. Jika kita mengubah suai kod sebelumnya hanya sedikit, contohnya:

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

Jika anda menguji kod ini, kesan akhir tidak akan betul -betul apa yang anda harapkan. Itu kerana kami menggunakan jenis kecerunan berseri relatif, yang dinyatakan oleh huruf kecil 'R' di atas. Kecerunan relatif dicipta secara berasingan untuk setiap elemen kumpulan (sebagai topeng komposit). Jika anda lebih suka mempunyai kecerunan tunggal untuk seluruh kumpulan, anda boleh menggunakan versi mutlak arahan. 'R ()#fff-#000' adalah kecerunan berseri mutlak yang bermula dengan mengisi putih di pusat dan merendahkan hitam di sempadan.

kita boleh mendapatkan hasil yang sama dengan menentukan kecerunan SVG untuk harta benda dari mana -mana elemen:

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

Dalam contoh terakhir ini, kami telah menunjukkan kecerunan yang lebih kompleks. Selain jenis yang berbeza (linear mutlak), kecerunan ini dari (0, 0) hingga (300, 300), dari hitam hingga merah pada 25% ke putih.

Kaedah kecerunan () menerima rentetan. Butiran lanjut dijelaskan dalam dokumentasi SNAP.

Ia juga mungkin menggunakan kecerunan sedia ada dari mana -mana elemen SVG di halaman:

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

Corak

Corak membolehkan mengisi bentuk dengan mengulangi kejadian lain bentuk SVG, kecerunan, atau imej. Snap menawarkan kaedah elemen.topattern () (secara free, corak (), kini tidak ditetapkan) yang mencipta corak dari mana -mana elemen snap.

Membuat corak dan mengisi elemen dengan ia cukup mudah:

<span><span><span><svg> id<span>="svg-test"</span>></svg></span>
</span>    <span><span><span><defs>></defs></span>
</span>      <span><span><span><lineargradient> id<span>="MyGradient"</span>></lineargradient></span>
</span>        <span><span><span><stop> offset<span>="5%"</span> stop-color<span>="#F60"</span> /></stop></span>
</span>        <span><span><span><stop> offset<span>="95%"</span> stop-color<span>="#FF6"</span> /></stop></span>
</span>      <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span>  <span><span><span></span>></span></span></span></span></span></span></span>

Jika, sebaliknya, kami ingin menggabungkan kecerunan dan corak, itu cerita yang berbeza, dan sedikit lebih rumit! Sebagai contoh, mari kita lihat cara membuat topeng yang menggabungkan kecerunan berseri dan corak yang serupa dengan yang di atas:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

pada dasarnya kita perlu membuat peta dua peringkat. Peta terakhir yang digunakan pada imej kami, yang kami isi dengan kecerunan, mempunyai peta yang dipenuhi dengan kecerunan. Hasilnya agak mengagumkan! Ternyata ini juga merupakan peluang yang baik untuk memperkenalkan kaedah klon () anda, yang melakukan apa yang anda bayangkan - mencipta salinan elemen yang dipanggil.

animasi

Animasi adalah salah satu ciri terbaik Snap.svg. Terdapat beberapa cara untuk mengendalikan animasi, dengan tingkah laku yang sedikit berbeza.

element.animate ()

kita akan bermula dengan kaedah animasi yang paling mudah, elemen.animate (). Kaedah ini membolehkan pengguna menghidupkan bilangan sifat elemen, semuanya disegerakkan. Nilai awal untuk harta itu, tentu saja, nilai semasa, sementara yang terakhir ditentukan dalam hujah pertama untuk bernyawa (). Selain sifat -sifat yang akan diubah, adalah mungkin untuk lulus tempoh animasi, kemudahannya, dan panggilan balik yang akan dipanggil sebaik sahaja animasi selesai.

Contohnya akan menjadikan semuanya lebih jelas:

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

Ini hanya akan mengecilkan bulatan besar dalam topeng kami ke radius yang lebih kecil selama dua saat.

set.animate ()

Anda boleh menghidupkan unsur -unsur dalam kumpulan (set) secara bebas. Tetapi, bagaimana jika anda mahu menghidupkan keseluruhan set serentak? Mudah! Anda boleh menggunakan set.animate (). Ini akan menggunakan transformasi yang sama kepada semua elemen dalam set, memastikan sinkroniti di antara pelbagai animasi, dan meningkatkan prestasi dengan mengumpulkan semua perubahan bersama.

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

Anda juga boleh menghidupkan setiap elemen dalam set secara bebas, tetapi serentak. Set.animate () menerima bilangan argumen yang berubah-ubah, supaya anda boleh lulus array dengan argumen untuk setiap sub-elemen yang anda perlukan untuk menghidupkan:

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

Dengan mengandaikan bahawa anda telah mengikuti kod contoh kami dengan betul setakat ini (cuba di Codepen), menjalankan kod di atas dalam konsol penyemak imbas anda, anda akan melihat bagaimana tiga elemen itu mendapat animasi dalam penyegerakan, tetapi secara bebas. Kod di atas juga merupakan peluang untuk memperkenalkan set (sebagai hasil daripada pilihan () dan selectAll ()), dan beberapa kaedah berguna yang ditakrifkan pada mereka.

cara lain untuk membuat satu set adalah dengan lulus pelbagai elemen ke kaedah pembina snap:

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

snap.animate ()

Anda boleh menghidupkan mana -mana harta angka, tetapi Animate () tidak akan berfungsi pada jenis lain, contohnya ia akan merosakkan elemen teks anda jika anda cuba menghidupkan atribut teks mereka. Namun ada cara lain untuk mendapatkan kesan sedemikian, iaitu cara ketiga untuk memanggil Animate () dalam snap.

Dengan memanggil kaedah animasi objek SNAP, mungkin untuk menentukan secara terperinci tindakan yang akan dilaksanakan pada setiap langkah animasi. Ini membantu kedua -dua kumpulan bersama -sama animasi kompleks dan menjalankannya dalam penyegerakan (walaupun kaedah set.animate () akan menjadi cara yang betul untuk menangani masalah ini), dan menghidupkan sifat -sifat yang kompleks, bukan angka.

Contohnya, mari kita buat dan menghidupkan elemen teks:

<span>var paper = <span>Snap</span>(800, 600),
</span>    img <span>= paper.image('bigImage.jpg', 10, 10, 300, 300),
</span>    bigCircle <span>= s.circle(150, 150, 100);</span>

Pengendalian Acara

kembali ke perbandingan awal antara topeng dan imej, anda boleh mendapatkan kesan yang sama yang telah kami tunjukkan di bahagian sebelumnya dengan gif animasi (jenis). Jika, bagaimanapun, anda ingin menghasilkan semula tingkah laku ini sebagai tindak balas kepada interaksi pengguna, peningkatan menggunakan SVG bahkan lebih relevan. Anda masih boleh mencari cara untuk membuatnya berfungsi menggunakan pelbagai GIF, tetapi, selain kehilangan fleksibiliti, anda tidak akan dapat mendapatkan kualiti yang sama dengan sedikit usaha:

bigCircle<span>.attr('fill', '#fff'); //This is IMPORTANT
</span>
img<span>.attr({
</span>    <span>mask: bigCircle
</span><span>});</span>

Klik pengendali boleh dikeluarkan kemudian menggunakan kaedah element.unclick ().

Di antara peristiwa-peristiwa lain yang boleh dikendalikan sama ada terdapat dblclick, mousedown dan mouseup, mousemove, mouseout dan mouseover, dan beberapa peristiwa berorientasikan mudah alih, seperti Touchstart dan Touchend.

Bagi pembaca kami yang digunakan untuk jQuery atau antara muka D3, ada dalam kaedah tidak ada () dalam SNAP untuk mengendalikan peristiwa lain secara manual. Sekiranya anda memerlukan tingkah laku tersuai yang melampaui pengendali yang ditawarkan oleh Snap, anda boleh mengambil harta nod untuk mana -mana elemen, yang seterusnya mengandungi rujukan kepada elemen DOM yang berkaitan, dan (mungkin selepas membungkusnya dalam jQuery), anda boleh menambah pengendali dan sifatnya secara langsung:

<span>var smallRect = paper.rect(180, 30, 50, 40),
</span>    bigCircle <span>= paper.circle(150, 150, 100),
</span>    mask <span>= paper.mask(bigCircle, smallRect);
</span>
mask<span>.attr('fill', 'white');
</span>
img<span>.attr({
</span>    <span>mask: mask
</span><span>});</span>

seret dan jatuhkan

SNAP membuat seretan dan drop pengaktifan yang sangat mudah untuk mana -mana elemen, kumpulan atau set menggunakan kaedah element.drag (). Jika anda tidak memerlukan sebarang tingkah laku tersuai, anda boleh memanggilnya tanpa sebarang argumen:

Walau bagaimanapun, jika anda memerlukan beberapa tingkah laku khas, anda boleh lulus panggilan balik dan konteks tersuai untuk acara Onmove, OndragStart, Ondragend. Ketahui bahawa anda tidak boleh menghilangkan panggilan balik Onmove jika anda ingin lulus yang seterusnya.

<span>var gradient = paper.gradient('r()#fff-#000');
</span>mask<span>.attr('fill', gradient);</span>

Menambah pengendali seret tidak akan menyembunyikan acara klik, yang akan dipecat selepas Ondragend, kecuali dengan jelas dicegah.

Muatkan SVG

sedia ada

Salah satu titik terkuat dari perpustakaan hebat ini ialah ia menyokong penggunaan semula kod SVG yang sedia ada. Anda boleh "menyuntik" ia sebagai rentetan, atau lebih baik anda boleh membaca fail yang ada, dan kemudian ubahnya.

anda boleh mencubanya sendiri. Muat turun dan simpan ke Root Projek anda lukisan SVG yang bagus ini. Seterusnya memuatkannya ke halaman anda, ubah gaya atau strukturnya seperti yang kami suka, walaupun sebelum menambahkannya ke Dom Tree kami, tambahkan pengendali acara, dan lain -lain

mask<span>.attr('fill', 'L(0, 0, 300, 300)#000-#f00:25-#fff');</span>

NOTA

: Kerana dasar asal yang sama dalam pelayar, anda perlu menjalankan contoh dalam pelayan tempatan untuk menguji kaedah beban.

Penambahbaikan prestasi

Satu cara untuk meningkatkan prestasi apabila memanipulasi DOM menggunakan dokumen. Fragmen adalah bekas minimum untuk nod Dom. Diperkenalkan beberapa tahun yang lalu, mereka membolehkan anda untuk memanipulasi keseluruhan subtrees secara murah, dan kemudian mengklon dan tambahkan keseluruhan subtree dengan nod N ke halaman kami dengan 2 panggilan kaedah bukan n. Perbezaan sebenar dijelaskan secara terperinci mengenai blog John Resig.

Snap membolehkan penggunaan serpihan asli juga, dengan dua kaedah:

1. Snap.Parse (SVG) mengambil hujah tunggal, rentetan dengan kod SVG, menghancurkannya dan mengembalikan serpihan yang boleh dilampirkan ke mana -mana permukaan lukisan.

2. snap.fragment (varargs) mengambil bilangan unsur atau rentetan yang berubah -ubah, dan mencipta serpihan tunggal yang mengandungi semua elemen yang disediakan.

terutamanya untuk lukisan SVG yang besar, serpihan boleh membawa kepada penjimatan prestasi yang besar, apabila digunakan dengan sewajarnya.

Kesimpulan

Ini menyimpulkan artikel kami mengenai snap.svg maju. Sekarang pembaca harus mempunyai idea yang jelas tentang apa yang dapat mereka lakukan dengan perpustakaan ini, dan bagaimana untuk melakukannya. Sekiranya anda berminat untuk belajar sedikit lagi, dokumentasi SNAP adalah tempat yang baik untuk bermula.

Beberapa pautan berguna:

• tutorial snap.svg.
• Dokumentasi Snap.svg.

soalan yang sering ditanya mengenai svg snap maju

Apakah SNAP SVG dan mengapa penting dalam pembangunan web? SVGs adalah bahagian penting dalam pembangunan web kerana mereka membolehkan penciptaan grafik berkualiti tinggi, berskala yang mengekalkan kejelasan mereka tanpa mengira saiz atau resolusi skrin yang dipaparkan. SNAP SVG meningkatkan fungsi ini dengan menyediakan satu set alat yang mantap untuk memanipulasi dan menghidupkan SVGs, menjadikannya lebih mudah bagi pemaju untuk membuat grafik interaktif, dinamik dan animasi untuk laman web mereka. ? gunakan. Ia menyediakan API yang mudah dan intuitif yang membolehkan pemaju dengan cepat dan mudah membuat, memanipulasi, dan menghidupkan SVGs. Di samping itu, SNAP SVG menyokong pelbagai ciri SVG, termasuk kecerunan, corak, keratan, pelekat, dan banyak lagi, menjadikannya alat yang serba boleh untuk mana -mana toolkit pemaju web. atau kerangka? rangka kerja. Ini bermakna anda boleh menggunakannya bersama alat seperti jQuery, react, angular, dan banyak lagi, membolehkan anda memanfaatkan kekuatan setiap alat untuk membuat aplikasi web yang lebih kuat dan interaktif.

Bagaimana saya memulakan dengan snap svg?

Untuk memulakan dengan SNAP SVG, anda perlu terlebih dahulu memasukkan perpustakaan SVG SNAP dalam projek anda. Ini boleh dilakukan dengan memuat turun perpustakaan dari laman web SNAP SVG dan termasuk dalam fail HTML anda, atau dengan menggunakan pengurus pakej seperti NPM untuk memasangnya. Sebaik sahaja perpustakaan dimasukkan ke dalam projek anda, anda boleh mula menggunakannya untuk membuat dan memanipulasi SVGs. Grafik dan animasi untuk laman web. Ini termasuk perkara seperti carta interaktif dan graf, ikon animasi, peta interaktif, dan banyak lagi. Di samping itu, kerana SNAP SVG menyokong pelbagai ciri SVG, ia juga boleh digunakan untuk tugas yang lebih kompleks seperti membuat penapis SVG, topeng, dan kecerunan. > Ya, snap SVG direka untuk bersesuaian dengan semua pelayar moden, termasuk Chrome, Firefox, Safari, dan Internet Explorer 9 dan di atas. Ini bermakna anda boleh menggunakannya untuk membuat SVG yang akan dipaparkan dengan betul merentasi pelbagai peranti dan penyemak imbas. Untuk menghidupkan SVGs. Ini termasuk kaedah untuk mengubah sifat -sifat elemen SVG dari masa ke masa, menghidupkan di sepanjang jalan, dan banyak lagi. Di samping itu, SNAP SVG menyokong penggunaan fungsi pelonggaran, yang membolehkan anda mengawal kelajuan dan aliran animasi anda. Alat yang sangat baik untuk membuat reka bentuk responsif. Kerana SVGs adalah berasaskan vektor, mereka boleh ditingkatkan atau turun tanpa kehilangan kualiti, menjadikannya sesuai untuk reka bentuk responsif. Di samping itu, SNAP SVG menyediakan kaedah untuk memanipulasi dan menghidupkan SVGs, yang membolehkan anda membuat reka bentuk interaktif yang dinamik yang menyesuaikan diri dengan saiz dan resolusi skrin yang berbeza. SNAP SVG adalah perpustakaan sumber terbuka, yang bermaksud ia bebas menggunakan dan mengubah suai. Anda boleh memuat turun perpustakaan dari laman web SNAP SVG atau memasangnya menggunakan pengurus pakej seperti NPM. Untuk membantu anda mengetahui lebih lanjut mengenai SNAP SVG. Laman web SNAP SVG menyediakan panduan yang komprehensif untuk ciri dan fungsi perpustakaan, serta beberapa demo dan contoh. Di samping itu, terdapat banyak tutorial dan artikel yang terdapat di laman web seperti SitePoint, Dabbles, dan GitHub yang memberikan maklumat mendalam dan contoh praktikal bagaimana menggunakan SNAP SVG.

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