Let ' s Membuat Seni Generatif Kita Boleh Mengeksport ke SVG dan PNG

Artikel ini menunjukkan cara membuat alat seni generatif menggunakan JavaScript, SVG, dan kanvas untuk menghasilkan aset reka bentuk, khususnya menangani keperluan projek reka bentuk persidangan. Penulis, yang diilhamkan oleh alat yang sama yang digunakan oleh pereka profesional, menggariskan penyelesaian untuk mencipta karya seni yang boleh disesuaikan.

Proses ini bermula dengan mendefinisikan palet warna secara programatik dalam JavaScript:

 const colorpalette = ["#9b2e69", "#d93750", "#e2724f", "#f3dc7b", "#4e9397"];

Fungsi, makeRects , kemudian menghasilkan segi empat tepat yang bertindih dengan kedudukan dan warna rawak dari palet:

 // ... (definisi fungsi tetap sama)

Fungsi ini memaparkan elemen SVG, bersaiz dinamik ke viewport penyemak imbas:

 const makvg = () => {
  // ... (definisi fungsi tetap sama)
};

SVG yang dihasilkan kemudian dimuat turun sebagai fail SVG menggunakan fungsi muat turun tersuai:

 // ... (fungsi muat turun tetap sama)

Untuk menangani keperluan pelanggan untuk format PNG, artikel memanfaatkan canvg untuk menjadikan SVG ke kanvas, membolehkan muat turun karya seni sebagai PNG melalui FileSaver.js :

 // ... (fungsi persediaan tetap sama)

Aplikasi akhir membolehkan pengguna menjana dan memuat turun karya seni dalam format SVG dan PNG, menyesuaikan diri dengan saiz viewport dan nisbah aspek yang berbeza. Penulis menyoroti kepraktisan pendekatan ini untuk menghasilkan aset reka bentuk yang disesuaikan dengan keperluan pelanggan tertentu. Walaupun mengakui potensi untuk kecanggihan lebih lanjut (misalnya, secara dinamik menyesuaikan bilangan segi empat tepat berdasarkan saiz viewport), artikel itu menekankan kecekapan dan kebolehgunaan dunia sebenar alat seni generatif ini. Inspirasi untuk projek ini datang daripada mengamati alat yang sama dan lebih maju yang digunakan oleh pereka profesional.

Atas ialah kandungan terperinci Let ' s Membuat Seni Generatif Kita Boleh Mengeksport ke SVG dan PNG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!