ChizuLocalStyle型
リファレンスの説明と例は英語です。見出しと目次は日本語です。
How one shape of a local map looks, over the look of its kind: colours as drawChizu's colors takes them (hex, a CSS
name, rgb(), hsl() or var(--name), anything else ignored), with a second for the dark look, and the classes
and custom properties of your own.
インポート
import type { ChizuLocalStyle } from "@johnmorrisdotca/chizu/draw";定義
type ChizuLocalStyle = {
fill?: string;
stroke?: string;
strokeWidth?: number;
widthMetres?: number;
opacity?: number;
fillOpacity?: number;
dark?: {
fill?: string;
stroke?: string;
};
class?: string | readonly string[];
vars?: Readonly<Record<string, string>>;
};メンバー
| 名前 | 型 | 説明 |
|---|---|---|
fill (省略可) | string | undefined | |
stroke (省略可) | string | undefined | |
strokeWidth (省略可) | number | undefined | The line's width on the screen, in pixels (0 to 40), the same at every zoom. |
widthMetres (省略可) | number | undefined | Or its width on the ground, in metres: a road 8 m wide is 8 m wide at every zoom (lines and outlines). |
opacity (省略可) | number | undefined | Opacity of the whole shape, 0 to 1. |
fillOpacity (省略可) | number | undefined | Opacity of the fill alone, 0 to 1. |
dark (省略可) | { fill?: string; stroke?: string; } | undefined | The colours when the page is dark; they follow the light ones where missing. |
class (省略可) | string | readonly string[] | undefined | Classes added to the shape, for your own CSS: letters, digits, |
vars (省略可) | Readonly<Record<string, string>> | undefined | Custom properties for your own CSS, |
例
import type { ChizuLocalStyle } from "@johnmorrisdotca/chizu/draw";
const stand: ChizuLocalStyle = { fill: "#d9a441", dark: { fill: "#7a5a1c" }, stroke: "#5b3b00", strokeWidth: 2, class: "stand" };
console.log(Object.keys(stand).join(" "));
// fill dark stroke strokeWidth classfill dark stroke strokeWidth class出力（このページを作ったときに実行した結果）
この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。