Bagaimana Kami Membuat Tapak Statik yang Menjana Corak Tartan Di SVG

Tartan, kain corak ikonik yang sinonim dengan Scotland, terutamanya kiltnya, mengambil peringkat tengah di tartanify.com. Laman ini mempunyai perpustakaan lebih daripada 5,000 corak tartan (dalam format SVG dan PNG), dengan teliti dikurangkan untuk mengecualikan mereka yang mempunyai hak penggunaan yang ketat.

Projek itu, yang dikandung oleh Sylvain Guizard semasa percutian musim panas Scotland, pada mulanya membayangkan penciptaan manual perpustakaan corak menggunakan perisian reka bentuk seperti Adobe Illustrator atau Sketch. Walau bagaimanapun, jumlah corak (beribu -ribu!) Cepat membuat pendekatan ini tidak dapat dipertahankan. Kejayaan itu datang dengan kesedaran bahawa tartans mempunyai struktur yang ditakrifkan dan diwakili oleh rentetan mudah pengekodan thread bilangan dan kod warna.

Struktur Tartan dan Perwakilan SVG

Corak ciri Tartan timbul dari benang berwarna di sudut kanan. Band menegak dan mendatar berkongsi urutan warna dan lebar yang sama. Persimpangan band ini mencipta warna yang dicampur secara visual. Teknik tenunan twill menambah garis pepenjuru yang tersendiri. Artikel ini mencipta kesan ini menggunakan segi empat tepat SVG sebagai benang:

Mari kita periksa struktur SVG ini:

<svg height="280" viewbox="0 0 280 280" width="280" x="0" xmlns="http://www.w3.org/2000/svg" y="0"><defs><mask height="1" width="1" x="0" y="0"><rect fill="url(#diagonalStripes)" height="100%" width="100%" x="0" y="0"></rect></mask></defs><g><rect fill="#FF8A00" height="40" width="100%" x="0" y="0"></rect><rect fill="#E52E71" height="10" width="100%" x="0" y="40"></rect><rect fill="#FFFFFF" height="10" width="100%" x="0" y="50"></rect><rect fill="#E52E71" height="70" width="100%" x="0" y="60"></rect><rect fill="#100E17" height="20" width="100%" x="0" y="130"></rect><rect fill="#E52E71" height="70" width="100%" x="0" y="150"></rect><rect fill="#FFFFFF" height="10" width="100%" x="0" y="220"></rect><rect fill="#E52E71" height="10" width="100%" x="0" y="230"></rect><rect fill="#FF8A00" height="40" width="100%" x="0" y="240"></rect></g><g mask="url(#grating)"><rect fill="#FF8A00" height="100%" width="40" x="0" y="0"></rect><rect fill="#E52E71" height="100%" width="10" x="40" y="0"></rect><rect fill="#FFFFFF" height="100%" width="10" x="50" y="0"></rect><rect fill="#E52E71" height="100%" width="70" x="60" y="0"></rect><rect fill="#100E17" height="100%" width="20" x="130" y="0"></rect><rect fill="#E52E71" height="100%" width="70" x="150" y="0"></rect><rect fill="#FFFFFF" height="100%" width="10" x="220" y="0"></rect><rect fill="#E52E71" height="100%" width="10" x="230" y="0"></rect><rect fill="#FF8A00" height="100%" width="40" x="240" y="0"></rect></g></svg>

Kumpulan jalur mendatar dan menegak menghasilkan dataran yang sama, tetapi yang menegak bertopeng, hanya mendedahkan kawasan putih di mana benang mendatar dan menegak bersilang. Topeng corak, yang mencerminkan tenunan, dicapai dengan menentukan jubin corak:

Atribut patternUnits diubah dari objectBoundingBox ke userSpaceOnUse , menentukan lebar dan ketinggian dalam piksel.

<svg height="0" width="0"><defs><pattern height="8" patternunits="userSpaceOnUse" width="8" x="0" y="0"><polygon fill="white" points="0,4 0,8 8,0 4,0"></polygon><polygon fill="white" points="4,8 8,8 8,4"></polygon></pattern></defs></svg>

Mengautomasikan generasi tartan dengan reaksi

Pendekatan SVG manual automatik menggunakan React. Komponen SvgDefs menjana<defs></defs> markup:

 const svgdefs = () => {
  kembali (
    <defs><pattern height="8" patternunits="userSpaceOnUse" width="8" x="0" y="0"><polygon fill="#ffffff" points="0,4 0,8 8,0 4,0"></polygon><polygon fill="#ffffff" points="4,8 8,8 8,4"></polygon></pattern><mask height="1" width="1" x="0" y="0"><rect fill="url(#diagonalStripes)" height="100%" width="100%" x="0" y="0"></rect></mask></defs>
  )
}

Tartan diwakili sebagai pelbagai jalur. Setiap jalur adalah objek dengan fill (warna hex) dan sifat size :

 const tartan = [
  {isi: "#ff8a00", saiz: 40},
  // ... lebih banyak jalur
];

Data tartan sering datang sebagai rentetan "palet" dan "threadcount":

 <code>// Palette O#FF8A00 P#E52E71 W#FFFFFF K#100E17 // Threadcount O/40 P10 W10 P70 K/10.</code>

(Penukaran rentetan ini ke jalur jalur terperinci dalam intipati yang berasingan.)

Komponen SvgTile menghasilkan struktur SVG dari tartan array:

 const svgtile = ({tartan}) => {
  // ... (kod untuk mengira kedudukan jalur dan saiz keseluruhan) ...
  kembali (
    <svg height="{size}" viewbox="{`0" width="{size}" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
      <svgdefs></svgdefs>
      {/ * ... (kod untuk menjana unsur -unsur rect untuk jalur mendatar dan menegak) ... */}
    </svg>
  )
}

Menggunakan tartans SVG sebagai imej latar belakang

Pada tartanify.com, setiap tartan adalah imej latar belakang skrin penuh. Ini memerlukan pengekodan SVG sebagai data URI:

 .bg-element {
  Imej Latar Belakang: URL ('Data: Imej/SVG XML; Charset = UTF-8,<svg> …</svg> ');
}

Komponen SvgBg mencipta div skrin penuh dengan SVG yang dikodkan sebagai latar belakangnya:

 const svgbg = ({tartan}) => {
  const tartanstr = reactdomserver.rendertostaticMarkup (<svgtile tartan="{tartan}"></svgtile> );
  const tartandata = encodeuricomponent (tartanstr);
  kembali (
    <div style="{{" backgroundimage: xml width: height:></div>
  );
};

SVG dan PNG Tartans yang boleh dimuat turun

Komponen SvgDownloadLink membolehkan muat turun SVG:

 const svgdownloadLink = ({svgdata, fileName = "file"}) => {
  kembali (
    <a download="{`${fileName}.svg`}" href="%7B%60data:image/svg" xml>Muat turun sebagai SVG</a>
  );
};

Komponen PngDownloadLink menghasilkan PNG resolusi tinggi menggunakan kanvas:

 const pngdownloadLink = ({svgdata, lebar, ketinggian, filename = "file"}) => {
  // ... (kod untuk membuat kanvas, lukis svg, dan dapatkan url data) ...
  kembali (
    <a download="{`${fileName}.png`}" ref="{aEl}">Muat turun sebagai PNG</a>
  );
};

Gatsby untuk generasi tapak statik

Tartanify.com memanfaatkan Gatsby, penjana tapak statik berasaskan React. Fail gatsby-config.js termasuk plugin untuk memproses data CSV:

 // gatsby-config.js
modul.exports = {
  / * ... */
  Plugin: [
    'Gatsby-Transformer-CSV',
    {
      Selesaikan: 'Gatsby-Source-Filesystem',
      Pilihan: {
        Laluan: `$ {__ dirname}/src/data`,
        Nama: 'Data',
      },
    },
  ],
};

Fail gatsby-node.js menggunakan API Node Gatsby untuk membuat halaman untuk setiap halaman indeks berasaskan huruf tartan dan paginated, mengendalikan penjanaan slug dan penomboran. Templat Tartan ( tartan.js ) dan templat indeks ( tartans.js ) menggunakan komponen React yang dibuat sebelum ini. Navigasi antara halaman indeks paginated diuruskan oleh komponen TartansNavigation .

Penjelasan terperinci ini merangkumi aspek teras projek Tartanify.com. Kod lengkap boleh didapati di GitHub. Projek ini mempamerkan cara yang menyeronokkan dan berkesan untuk mempelajari teknologi baru melalui projek sampingan yang menarik.

Atas ialah kandungan terperinci Bagaimana Kami Membuat Tapak Statik yang Menjana Corak Tartan Di SVG. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!