zudo-panel-designer docs
GitHub リポジトリ

検索したい単語を入力

いつでも検索バーを開ける

組み込みカタログ

packages/patterns/src/patterns.ts は 12 個の組み込みパターンを提供し、以下とまったく同じ順序で PATTERN_GENERATORS に登録します。すべてのパターンは ジェネレータ契約に従います。決定論的で、mm 空間で、ここに挙げた範囲に対して resolveParam を通してクランプされます。pitch / cell / size / width / lineWidth / radius / amplitude / wavelength のパラメータはすべてミリメートル、count は無単位の光線数、centerY はパネル高さに対する 0〜1 の無単位の割合です。

パラメータリファレンス

パターン(name描画スタイルパラメータ(key — range, step, default)
Dot Grid (dot-grid)fillpitch 2–15mm, step 0.5, default 5; radius 0.2–4mm, step 0.1, default 1
Diagonal Stripes (diag-stripes)strokepitch 2–20mm, step 0.5, default 6; lineWidth 0.3–10mm, step 0.1, default 2
Grid Lines (grid-lines)strokepitch 2–15mm, step 0.5, default 5; lineWidth 0.1–3mm, step 0.05, default 0.4
Concentric Circles (concentric-circles)strokepitch 1–15mm, step 0.5, default 4; lineWidth 0.1–4mm, step 0.05, default 0.6; centerY 0–1, step 0.05, default 0.5
Hex Lattice (hex-lattice)strokecell 2–20mm, step 0.5, default 6; lineWidth 0.1–3mm, step 0.05, default 0.5
Checker (checker)fillcell 1–20mm, step 0.5, default 5
Wave Lines (wave-lines)strokepitch 2–15mm, step 0.5, default 5; amplitude 0.5–8mm, step 0.25, default 1.5; wavelength 3–30mm, step 1, default 12; lineWidth 0.1–3mm, step 0.05, default 0.6
Crosshatch (crosshatch)strokepitch 2–20mm, step 0.5, default 7; lineWidth 0.1–4mm, step 0.05, default 0.5
Radial Burst (radial-burst)strokecount (rays) 8–96, step 2, default 36; lineWidth 0.1–3mm, step 0.05, default 0.5; centerY 0–1, step 0.05, default 0.5; innerRadius 0–30mm, step 0.5, default 4
Brick (brick)strokebrickW 3–30mm, step 0.5, default 12; brickH 2–15mm, step 0.5, default 5; lineWidth 0.1–3mm, step 0.05, default 0.4
Diamond Lattice (diamond-lattice)strokesize 3–30mm, step 0.5, default 8; lineWidth 0.1–3mm, step 0.05, default 0.5
Scallops (scallops)strokewidth 3–30mm, step 0.5, default 10; lineWidth 0.1–3mm, step 0.05, default 0.5

Note

resolveParam は、ジェネレータが使う前にすべての値を宣言された [min, max] にクランプします。そのため、古い値や手編集された params の値(インポートした注文 JSON から来たものなど)が、描画ループを負や非有限に送り込むことはありません。ジェネレータ契約 → パラメータのクランプを参照してください。

パターンごとの補足

Dot Grid

塗りつぶした円のグリッド。各円は半径 radius mm で、両軸方向に pitch mm 間隔で並び、パネルの中央に配置されます。

Diagonal Stripes

パネルの対角全長(width + height)にわたる 45° 対角の平行ストローク。アスペクト比にかかわらず領域が常に完全に覆われるようにし、pitch mm 間隔で並びます。

Grid Lines

素の直交格子。pitch mm ごとの垂直ストローク、続いて pitch mm ごとの水平ストロークで、いずれもパネルの中央に配置されます。

Concentric Circles

中心点 (width/2, height × centerY) から外側へ広がるリング。pitch mm 間隔で、その中心から最も遠い角まで描かれます。そのため、centerY が中心からずれていてもリングは常にパネルを完全に覆います。

Hex Lattice

尖った頂点を上にした六角形の輪郭からなるハニカム。差し渡し cell mm で、行がずれた格子(w = √3 × r の平坦面どうしの列間隔、1.5 × r の行間隔、隣り合う行を w の半分だけずらす)に配置されます。

Checker

塗りつぶした cell mm の正方形からなる市松模様。古典的な 2 色のグリッドパターンで、塗りつぶした正方形だけを描きます(「オフ」の正方形は、透けて見えるパネルの下地色です)。

Wave Lines

水平な正弦波の行。pitch mm 間隔で、各行は amplitude mm の縦揺れと wavelength mm の周期を持ちます。正弦波の位相はパネルの水平中心に固定されるため、どのパネル幅でも波が視覚的に中央に保たれます。

Crosshatch

互いに直角(45° と 135°)をなす 2 回の対角ストライプのパス。どちらも pitch mm 間隔で、Diagonal Stripes を 2 倍にして反転させたものです。

Radial Burst

中心点 (width/2, height × centerY) から伸びる count 本の直線の光線。中心から innerRadius mm 外側から始まり(内側に円形の空きを残す)、パネルの遠い角まで伸びます。

Brick

破れ目地(running bond)のレンガ積みパターン。高さ brickH mm の水平な段、brickW mm ごとの垂直な目地からなり、隣り合う行はレンガ幅の半分だけずれます。これは実際のレンガ積みが使うのと同じずらし方です。

Diamond Lattice

アーガイル調のダイヤモンド輪郭の領域(頂点間 size mm)。size/2 ずつずらした 2 つの噛み合う副格子に配置されるため、隣り合うダイヤモンドが辺を共有し、角に隙間を残さず継ぎ目なくタイリングされます。

Scallops

重なり合う下半円の弧(各 width mm)を、魚の鱗のように行から行へ入れ子にします。各行は水平方向にスカラップ幅の半分だけずれ、行は縦方向に半径 1 つ分(スカラップ幅の半分)ずつ積み重ねられます。

サムネイル

packages/patterns/src/thumbnail.ts は、パターンピッカーダイアログに表示されるピッカーカードのプレビューを描画します。renderPatternThumb(canvas, gen, sizePx) は次の処理を行います。

  1. CSS ボックスを sizePx に固定したまま、現在の devicePixelRatio に合わせてキャンバスのバッキングストアのサイズを決めます。

  2. 固定の 30mm ウィンドウ(THUMB_SPAN_MM)がバッキングストアをちょうど埋めるようコンテキストをスケールします。すべてのパターンのサムネイルが同じ物理的な範囲を切り取るため、pitch / cell のサイズが大きく異なるパターンどうしでも、一目で視覚的に比較できます。

  3. 背景を黒(#151515、パネルのソルダーマスク下地を反映)で塗り、ジェネレータの draw() を、固定の前景色(#d4af37、金 — 露出した銅を反映)と自身の defaultParams() で呼び出します。

サムネイルの 2 色は thumbnail.ts にローカルなリテラル定数で、@zpd/corePALETTE からインポートしていません。これは、@zpd/patterns パッケージが自己完結し、@zpd/core に依存しないままでいられるよう、意図的に重複させています。