本文へ移動

Chizu地図

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

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

目次

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

placeHandles関数

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

Places every handle clear of the ones before it.

Greedy and order-dependent by design: the caller has already sorted the marks into the order they are numbered, and a handle that has found a home does not move to make room for a later one. With a handful of choices on a board that is enough, and it keeps the placement stable as tones change mid-question.

インポート

import { placeHandles } from "@johnmorrisdotca/chizu";

定義

function placeHandles<T>(entries: ReadonlyArray<{ item: T; centroid: readonly [number, number]; }>, radius: number, bounds?: HandleBounds): Array<HandleSpot & { item: T; }>

引数

名前型説明
entriesreadonly { item: T; centroid: readonly [number, number]; }[]

Native places to order or lay out.

radiusnumber

The circle or label radius in native map units.

bounds (省略可)HandleBounds | undefined

The allowed label placement bounds in native map units.

戻り値

(HandleSpot & { item: T; })[]

Places every handle clear of the ones before it.

例

import { placeHandles } from "@johnmorrisdotca/chizu";

const spots = placeHandles([{ item: "a", centroid: [50, 50] }, { item: "b", centroid: [52, 50] }], 4);
console.log(spots.map((spot) => spot.item).join(" "), Math.hypot(spots[0]!.hx - spots[1]!.hx, spots[0]!.hy - spots[1]!.hy) >= 8);
// a b true
a b true

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

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

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