本文へ移動

Chizu地図

SVGの地図を描き、地域を表示範囲に収め、番号付きの注記や地理クイズを英語と日本語の名前で作れます。

「地図」は、土地や場所を図で表したものです。 名前について（英語）

目次

リファレンス · 表示範囲・形・クイズの道具

HandleSpot型

リファレンスの説明と例は英語です。見出しと目次は日本語です。

A numbered region’s label position, native land anchor and leader geometry.

インポート

import type { HandleSpot } from "@johnmorrisdotca/chizu";

定義

type HandleSpot = {
    x: number;
    y: number;
    hx: number;
    hy: number;
};

メンバー

名前型説明
xnumber

The region's own centre, where the stem starts.

ynumber
hxnumber

Where the circle and its number sit.

hynumber

例

import { placeHandles, type HandleSpot } from "@johnmorrisdotca/chizu";

const [spot]: HandleSpot[] = placeHandles([{ item: "a", centroid: [50, 50] }], 5);
console.log(spot!.x, spot!.y, spot!.hx !== spot!.x || spot!.hy !== spot!.y);
// 50 50 true
50 50 true

出力（このページを作ったときに実行した結果）

ソースを見るGitHub で編集@johnmorrisdotca/chizu 1.5.0 のソースから作成しました。

この日本語は、まだ日本語を母語とする方の確認を受けていません。訂正を歓迎します。