格子呢，標(biāo)誌性的圖案布與蘇格蘭的代名詞，尤其是其蘇格蘭語，在Tartanify.com上佔(zhàn)據(jù)了中心地位。該站點(diǎn)擁有超過5,000種格子呢模式（以SVG和PNG格式）的圖書館，並精心策劃，以排除具有限制性使用權(quán)的人。

該項(xiàng)目是由Sylvain Guizard在蘇格蘭暑假期間構(gòu)想的，最初使用Adobe Illustrator或Sketch（例如Adobe Illustrator）的設(shè)計(jì)軟件設(shè)想了手動(dòng)創(chuàng)建模式庫。但是，大量的圖案（成千上萬！）迅速使這種方法站不住腳。突破性的是意識到格子呢具有定義的結(jié)構(gòu)，並由編碼線程計(jì)數(shù)和顏色代碼的簡單字符串表示。

格子呢結(jié)構(gòu)和SVG表示

格子呢的特徵模式是由以直角交織的顏色線引起的。垂直和水平帶具有相同的顏色和寬度序列。這些頻帶的交叉點(diǎn)會產(chǎn)生視覺混合的顏色。斜紋編織技術(shù)增加了獨(dú)特的對角線。本文使用SVG矩形作為線程重新創(chuàng)建此效果：

讓我們檢查這個(gè)SVG結(jié)構(gòu)：

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

水平和垂直條帶組創(chuàng)建了相同的正方形，但是垂直的正方形被掩蓋，僅揭示了水平和垂直線相交的白色區(qū)域。反映編織的圖案面具是通過定義圖案瓷磚來實(shí)現(xiàn)的：

patternUnits屬性從objectBoundingBox更改為userSpaceOnUse ，指定像素的寬度和高度。

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

與React自動(dòng)化格子呢

手動(dòng)SVG方法是使用React自動(dòng)化的。 SvgDefs組件生成<defs></defs>標(biāo)記：

 const svgdefs =（）=> {
  返回 （
    <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>
  ）
}

格子呢表示為條紋陣列。每個(gè)條紋都是帶有fill （十六進(jìn)制顏色）和size屬性的對象：

 const tartan = [
  {填充：“＃ff8a00”，大?。?0}，
  // ...更多條紋
];

格子呢?cái)?shù)據(jù)通常以“調(diào)色板”和“ ThreadCount”字符串出現(xiàn)：

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

（這些字符串向條紋陣列的轉(zhuǎn)換以單獨(dú)的要旨詳細(xì)介紹。）

SvgTile組件從tartan陣列生成SVG結(jié)構(gòu)：

 const svgtile =（{{tartan}）=> {
  // ...（計(jì)算條紋位置和總尺寸的代碼）...
  返回 （
    <svg height="{size}" viewbox="{`0" width="{size}" x="0" xmlns="http://www.w3.org/2000/svg" y="0">
      <svgdefs></svgdefs>
      {/ * ...（代碼生成水平和垂直條紋的矩元素）... */}
    </svg>
  ）
}

使用SVG塔塔塔人作為背景圖像

在Tar??tanify.com上，每個(gè)格子呢都是全屏背景圖像。這需要將SVG編碼為數(shù)據(jù)URI：

 .bg-element {
  背景圖像：URL（'數(shù)據(jù)：Image/svg XML; charset = utf-8，<svg> ...</svg> '）;
}

SvgBg組件以編碼的SVG作為其背景創(chuàng)建一個(gè)全屏Div：

 const svgbg =（{tartan}）=> {
  const tartanstr = reactdomserver.rendertostaticmarkup（<svgtile tartan="{tartan}"></svgtile> ）；
  const tartandata = encodeuricomponent（tartanstr）;
  返回 （
    <div style="{{" backgroundimage: xml width: height:></div>
  ）；
};

可下載的SVG和PNG tartans

SvgDownloadLink組件允許SVG下載：

 const svgdownloadlink =（{{svgdata，filename =“ file”}）=> {
  返回 （
    <a download="{`${fileName}.svg`}" href="%7B%60data:image/svg" xml>下載為SVG</a>
  ）；
};

PngDownloadLink組件使用畫布生成高分辨率PNG：

 const pngdownloadlink =（{{svgdata，width，height，filename =“ file”}）=> {
  // ...（代碼創(chuàng)建畫布，繪製SVG並獲取數(shù)據(jù)URL）...
  返回 （
    <a download="{`${fileName}.png`}" ref="{aEl}">下載為PNG</a>
  ）；
};

Gatsby用於靜態(tài)站點(diǎn)的生成

Tartanify.com利用基於React的靜態(tài)站點(diǎn)生成器Gatsby。 gatsby-config.js文件包含用於處理CSV數(shù)據(jù)的插件：

 // gatsby-config.js
Module.exports = {
  / * ... */
  插件：[
    'gatsby-transformer-csv'，
    {
      解決：“ Gatsby-Source-Filesystem”，
      選項(xiàng)： {
        路徑：`$ {__ dirname}/src/data'，
        名稱：“數(shù)據(jù)”，
      }，，
    }，，
  ]，，
};

gatsby-node.js文件使用蓋茨比的節(jié)點(diǎn)API為每個(gè)格子呢和基於字母的索引頁面創(chuàng)建頁面，處理slug生成和分頁。格子呢模板（ tartan.js ）和索引模板（ tartans.js ）利用了先前創(chuàng)建的反應(yīng)組件。分頁索引頁面之間的導(dǎo)航由TartansNavigation組件管理。

此詳細(xì)的解釋涵蓋了Tartanify.com項(xiàng)目的核心方面。完整的代碼可在GitHub上找到。該項(xiàng)目通過引人入勝的Side項(xiàng)目展示了一種有趣而有效的學(xué)習(xí)新技術(shù)的方法。

以上是我們?nèi)绾蝿?chuàng)建一個(gè)在SVG中生成格子呢模式的靜態(tài)站點(diǎn)的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！