フェイス・時計・記号・演算子
drawlib.shapes の フェイス・時計・記号・演算子 カテゴリは、8 種類のペルソナ・時刻・天体・機械・数学記号プリミティブ を提供します。9 種類の表情を持つユーザー/脅威フェイス(face)、アナログ文字盤およびフォント不要の 7 セグメントデジタル時計(clock)、スケジュールやテーマ用の太陽・月シンボル(sun, moon)、ヘルスチェック用ハート(heart)、サーバーレス/イベント用稲妻ボルト(lightning)、N 枚歯の機械歯車(gear)、そして 6 種類の幾何学的な数学演算子記号(math_symbol)を利用できます。
Source Code
from drawlib.canvas import save, setup
from drawlib.shapes import (
clock,
face,
gear,
heart,
lightning,
math_symbol,
moon,
sun,
)
from drawlib.styles import Styles
from drawlib.text import text
setup(width=128, height=58)
cap_st = Styles.DarkBold.patch(text_size=9.5)
# Row 1: face, clock (analog), clock (digital), sun, moon
face((16, 43), radius=8.2, variant="smile", style=Styles.PrimaryFlat)
text((16, 30), "face", style=cap_st)
clock((42, 43), radius=8.2, variant="ticks", hour=10, minute=10, style=Styles.Neutral)
text((42, 30), 'clock("ticks")', style=cap_st)
clock((70, 43), radius=8.2, variant="digital", hour=12, minute=34, style=Styles.PrimaryFlat)
text((70, 30), 'clock("digital")', style=cap_st)
sun((96, 43), radius=8.5, variant="rays", num_rays=8, style=Styles.WarningFlat)
text((96, 30), "sun", style=cap_st)
moon((116, 43), width=14, height=16, variant="crescent", style=Styles.SecondaryNeutral)
text((116, 30), "moon", style=cap_st)
# Row 2: heart, lightning, gear, math_symbol (+ and =)
heart(
(18, 16),
width=17,
height=15.5,
variant="standard",
style=Styles.DangerNeutral,
text="OK",
text_style=Styles.DarkBold.patch(text_size=9.5),
)
text((18, 3.5), "heart", style=cap_st)
lightning((45, 16), width=11.5, height=18, variant="standard", style=Styles.WarningFlat)
text((45, 3.5), "lightning", style=cap_st)
gear(
(74, 16),
num_teeth=8,
radius_ext=9.2,
radius_int=6.8,
hole_radius=3.0,
style=Styles.PrimaryNeutral,
)
text((74, 3.5), "gear", style=cap_st)
math_symbol((99, 16), symbol="+", width=12, style=Styles.PrimaryFlat.patch(shape_r=0.5))
math_symbol((115, 16), symbol="=", width=12, style=Styles.SecondaryNeutral.patch(shape_r=0.5))
text((107, 3.5), "math_symbol", style=cap_st)
save()
1. 基本の幾何構造とコンセプト
このカテゴリの全 8 シンボルプリミティブは中心座標 xy にきれいにアンカー固定され、セマンティックな variant プリセットと表現力豊かな幾何パラメータを組み合わせることで、手動のパス計算なしにペルソナ・時計・天体アイコン・歯車・数学演算子を描き分けられます。face と heart による SLO/脅威ステータスの遷移、clock におけるアナログの hour・minute 針の進行やフォント不要 7 セグメント digital 表示への切り替え、sun・moon・lightning の光線数・月相・mirror 反転、そして gear と math_symbol による歯形・中心穴・演算子バー太さの制御を確認してみましょう。
- ペルソナとヘルスのプリセット(
face&heart): セマンティックなvariantプリセットにより、顔の表情("smile"〜"devil")や死活監視ハートの"standard"/"broken"状態を中心座標xyで切り替えられます。 - アナログ針とフォント不要デジタル表示(
clock):hourとminuteにより90°(12:00)基準でアナログ文字盤/ストップウォッチの針を時計回りに滑らかに進めるほか、variant="digital"では純ベクターの 7 セグメントHH:MM数字を描画します。 - 天体の光線・月相と水平反転(
sun,moon,lightning):num_raysとvariantで太陽ビームや月の満ち欠けを造形し、mirror=Trueでmoonやlightningを-X/+X方向に水平反転します。 - パラメトリック歯車と幾何演算子(
gear&math_symbol):num_teeth,radius_ext,radius_int,hole_radius,style.shape_rで歯車を精密に設計でき、thickness_ratioで単一輪郭の演算子バー("+","×","≠"など)の太さを調整できます。
2. フェイス・時計・記号・演算子プリミティブの早見表
全 8 関数の必須形状引数、組み込みバリエーション、主なモディファイア、ダイアグラムでの主な用途を以下のマトリクスで比較できます。
| 関数 | 必須の形状引数 | バリエーション | 主な形状モディファイア | 主なダイアグラム用途 |
|---|---|---|---|---|
face |
xy, radius |
"smile", "neutral", "surprised", "sad", "angry", "dizzy", "dead", "skull", "devil" |
style.angle |
ユーザー/アクターペルソナ、SLO ヘルス状態、クラッシュノード("dead")、脅威アクター("devil", "skull")。 |
clock |
xy, radius |
"standard", "ticks"("dial"), "alarm", "stopwatch"("timer"), "digital" |
hour=10.0, minute=10.0 |
Cron ジョブ、SLA タイマー、レイテンシ計測ストップウォッチ、フォント不要 7 セグメント HH:MM タイムスタンプ。 |
sun |
xy, radius |
"rays"("standard"), "ring", "beams" |
num_rays: int = 8 |
日中スケジュール、ライトテーマアイコン、太陽光/クリーンエネルギーノード、輝度インジケータ。 |
moon |
xy, width, height |
"crescent"("standard"), "thin", "waxing", "half" |
mirror: bool = False |
夜間バッチ/バックアップジョブ、ダークテーマアイコン、スリープ/アイドル状態。 |
heart |
xy, width, height |
"standard"("classic"), "broken" |
style.angle |
Liveness/ヘルスチェックプローブ("standard")、縮退/異常サービス状態("broken")。 |
lightning |
xy, width, height |
"standard", "flat", "double", "flat_double", "angled", "slanted" |
mirror=False, style.shape_r |
サーバーレス関数、イベント/Webhook トリガー、キャッシュヒット、電源/バーストコンピュート。 |
gear |
xy, num_teeth, radius_ext, radius_int |
中実コア(hole_radius=None)またはリング型(hole_radius > 0) |
tooth_ext_ratio, tooth_int_ratio, style.shape_r |
バックグラウンドワーカーデーモン、CI/CD 自動化エンジン、構成/設定ノード。 |
math_symbol |
xy, symbol, width |
"+", "-", "×", "÷", "=", "≠"(および英単語エイリアス) |
height=None, thickness_ratio, style.shape_r |
ビジュアルなアーキテクチャ数式([Service A] + [Cache] = [Low Latency])、比較マトリクス。 |
3. 表情豊かなアクター・ステータス・脅威フェイス (face)
ユーザーペルソナ、カスタマージャーニーマップ、システムヘルス指標、脅威/攻撃者モデリング向けに、face は 9 種類の組み込み表情(variant)を備えた円形またはシルエット型のフェイスを描画します。
face(
xy: tuple[float, float],
radius: float,
*,
style: Style,
variant: Literal[
"smile", "neutral", "sad", "angry", "surprised",
"dizzy", "dead", "skull", "devil",
] = "smile",
text: str = "",
text_style: Style | None = None,
) -> None
パラメータリファレンスと variant オプション
| パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|
xy |
tuple[float, float] |
必須 | フェイスの中心座標 (x, y)。 |
radius |
float |
必須 | フェイスの外接半径(> 0)。 |
variant |
FaceVariant |
"smile" |
表情またはペルソナのバリエーション(大文字・小文字区別なし): • "smile": 上向きの 3 次ベジェ曲線による笑顔。• "neutral": まっすぐ水平な口元。• "surprised": 楕円形に開いた 'O' 字の口元。• "sad": 下向きの 3 次ベジェ曲線による悲しみ顔。• "angry": 下向きの口元+内側へ傾いた怒り眉。• "dizzy": 'X' 字の目+波打つ口元(過負荷/縮退ノード)。• "dead": 'X' 字の目+舌を出した水平な口元(クラッシュ/OOM Kill 状態)。• "skull": 頭蓋骨+顎のシルエットに眼窩・鼻腔・歯を備えたドクロ(致命的障害/Poison Pill)。• "devil": 湾曲した角+釣り上がった眉+不敵な笑み(攻撃者/悪意あるアクター)。 |
style |
Style |
必須 | フェイスの塗りつぶし、輪郭線、および回転(angle)。目や口のパーツは、枠線がある場合は style.shape_line_color を自動使用し、枠線のないフラット塗り(Styles.PrimaryFlat など)では高コントラストな text_color/白色を自動選択します。 |
text / text_style |
str / Style | None |
"" / None |
任意のテキストラベルとタイポグラフィスタイル。 |
from drawlib.canvas import save, setup
from drawlib.shapes import face
from drawlib.styles import Styles
from drawlib.text import text
setup(width=132, height=44)
variants = [
("smile", Styles.PrimaryFlat),
("neutral", Styles.Neutral),
("surprised", Styles.SecondaryNeutral),
("sad", Styles.Neutral),
("angry", Styles.WarningNeutral),
("dizzy", Styles.WarningNeutral),
("dead", Styles.DangerNeutral),
("skull", Styles.Neutral),
("devil", Styles.DangerFlat),
]
for i, (v_name, st) in enumerate(variants):
cx = 10 + i * 14.0
face((cx, 26), radius=5.6, style=st, variant=v_name)
text((cx, 11), f'"{v_name}"', style=Styles.DarkBold.patch(text_size=9.5))
save()
4. アナログ時計とフォント不要デジタル時計 (clock)
clock は、時刻に応じて動的に角度が変わる時針・分針を備えた アナログ文字盤("standard", "ticks", "alarm", "stopwatch")または フォント依存ゼロの 7 セグメントデジタル時計("digital")を描画します。
clock(
xy: tuple[float, float],
radius: float,
*,
variant: Literal[
"standard",
"ticks", "dial",
"alarm",
"stopwatch", "timer",
"digital",
] = "standard",
hour: float = 10.0,
minute: float = 10.0,
style: Style,
text: str = "",
text_style: Style | None = None,
) -> None
パラメータおよび variant リファレンス
| パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|
xy |
tuple[float, float] |
必須 | 時計の文字盤またはデジタル筐体の中心座標 (x, y)。 |
radius |
float |
必須 | 文字盤の半径(> 0)。variant="digital" の場合、角丸矩形筐体の幅は 1.8 * radius、高さは 1.0 * radius になります。 |
variant |
ClockVariant |
"standard" |
時計のスタイル(下記の表を参照)。 |
hour |
float |
10.0 |
時(0〜23)。アナログ系 variant では minute に連動して時針が滑らかに進みます(angle_hour = 90° - ((hour % 12) + minute / 60) * 30°)。variant="digital" ではゼロ埋め 2 桁の HH(int(hour) % 24)として表示されます。 |
minute |
float |
10.0 |
分(0〜59)。アナログ系 variant では angle_minute = 90° - minute * 6° になります。variant="digital" ではゼロ埋め 2 桁の MM(int(minute) % 60)として表示されます。 |
style |
Style |
必須 | 塗りつぶし、枠線、および回転(angle)を制御するスタイル。針・目盛り・7 セグメント数字は高い視認性を保つコントラスト色(濃色/フラット塗りでは白、淡色/ニュートラル塗りでは濃色)を自動選択します。 |
text / text_style |
str / Style | None |
"" / None |
xy の中央に配置される任意のテキストラベル。 |
variant |
使用可能なエイリアス | 視覚構成 | 主なユースケース |
|---|---|---|---|
"standard" (デフォルト) |
— | シンプルな円形文字盤+中心ピボット+時針・分針 | ミニマルな cron/スケジュールアイコン、TTL インジケータ。 |
"ticks" |
"dial" |
円形文字盤+放射状の 12 時間目盛り(12・3・6・9 時は太目盛り)+針 | 定期バッチジョブ、稼働時間クロック、時系列ウィンドウ。 |
"alarm" |
— | 円形文字盤+12 目盛り+上部の双子ベル+下部の斜め脚 2 本 | アラート閾値、PagerDuty/オンコール呼び出し、SLA 期限。 |
"stopwatch" |
"timer" |
円形文字盤+12 目盛り+上部リューズ+右上 45° のサイドプッシャーボタン |
レイテンシ計測、リクエストタイムアウトバジェット、プロファイリングタイマー。 |
"digital" |
— | 角丸矩形筐体(1.8r × 1.0r)+純ベクター 7 セグメント HH:MM 数字+コロンドット |
フォント依存ゼロかつ背景ゴーストセグメントのない正確なタイムスタンプ表示(00:00, 12:34, 23:59 など)。 |
from drawlib.canvas import save, setup
from drawlib.shapes import clock
from drawlib.styles import Styles
from drawlib.text import text
setup(width=130, height=48)
lbl = Styles.DarkBold.patch(text_size=9.5)
# 1. Standard minimal analog clock (10:10)
clock((15, 27), radius=8.8, variant="standard", hour=10, minute=10, style=Styles.Neutral)
text((15, 8.5), '"standard" (10:10)', style=lbl)
# 2. Ticks / dial analog clock (03:00)
clock((40, 27), radius=8.8, variant="ticks", hour=3, minute=0, style=Styles.PrimaryNeutral)
text((40, 8.5), '"ticks" (03:00)', style=lbl)
# 3. Alarm clock with twin bells & legs (07:30)
clock((65, 27), radius=8.2, variant="alarm", hour=7, minute=30, style=Styles.DangerNeutral)
text((65, 8.5), '"alarm" (07:30)', style=lbl)
# 4. Stopwatch / timer with top stem & side pusher (00:15)
clock((90, 27), radius=8.2, variant="stopwatch", hour=0, minute=15, style=Styles.SecondaryNeutral)
text((90, 8.5), '"stopwatch" (00:15)', style=lbl)
# 5. Font-free 7-segment digital clock (23:45)
clock((116, 27), radius=8.8, variant="digital", hour=23, minute=45, style=Styles.PrimaryFlat)
text((116, 8.5), '"digital" (23:45)', style=lbl)
save()
5. 天体・テーマシンボル (sun, moon)
ライト/ダークテーマの切り替えアイコン、日中/夜間バッチ実行ウィンドウ、地理的な時間帯インジケータ向けに、sun と moon は複数の幾何バリエーションを提供します。
sun(
xy: tuple[float, float],
radius: float,
*,
variant: Literal[
"rays", "standard",
"ring",
"beams",
] = "rays",
num_rays: int = 8,
style: Style,
text: str = "",
text_style: Style | None = None,
) -> None
moon(
xy: tuple[float, float],
width: float,
height: float,
*,
variant: Literal[
"crescent", "standard",
"thin",
"waxing",
"half",
] = "crescent",
mirror: bool = False,
style: Style,
text: str = "",
text_style: Style | None = None,
) -> None
| 関数 | パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|---|
sun |
xy / radius |
tuple / float |
必須 | 中心座標 (cx, cy) と光線先端までの外接半径(> 0)。内側の太陽円盤の半径は 0.54 * radius です。 |
variant |
SunVariant |
"rays" |
• "rays"("standard"): 中実の中心円盤の周囲に独立した num_rays 個の三角形光線を配置。• "ring": 中空の円環リングの周囲に num_rays 個の三角形光線を配置。• "beams": 中実の中心円盤の周囲に num_rays 本の矩形ビームバーを配置。 |
|
num_rays |
int |
8 |
放射状の光線数(>= 3、通常は 8 または 12)。 |
|
moon |
xy / width / height |
tuple / float |
必須 | 中心座標 (x, y) と厳密な外接水平幅・垂直高さ(> 0)。 |
variant |
MoonVariant |
"crescent" |
• "crescent"("standard"): バランスの良い定番の三日月。• "thin": 深くえぐれた細身の三日月。• "waxing": 内部に text を配置できる十分な広さを持つ厚みのある月。• "half": 直線弦を持つ D 字型の半月。 |
|
mirror |
bool |
False |
デフォルト(mirror=False)では外側の凸弧が左(-X)を向き、先端が右(+X)を向きます。mirror=True で水平反転します。 |
from drawlib.canvas import save, setup
from drawlib.shapes import moon, sun
from drawlib.styles import Styles
from drawlib.text import text
setup(width=130, height=46)
lbl = Styles.DarkBold.patch(text_size=9.5)
# Sun variants (rays, ring, beams)
sun((14, 27), radius=8.8, variant="rays", num_rays=8, style=Styles.WarningFlat)
text((14, 8.5), 'sun("rays")', style=lbl)
sun((35, 27), radius=8.8, variant="ring", num_rays=8, style=Styles.WarningNeutral)
text((35, 8.5), 'sun("ring")', style=lbl)
sun((56, 27), radius=8.8, variant="beams", num_rays=10, style=Styles.PrimaryFlat)
text((56, 8.5), 'sun("beams")', style=lbl)
# Moon variants (crescent, thin, waxing, half)
moon((76, 27), width=13, height=16, variant="crescent", style=Styles.SecondaryNeutral)
text((76, 8.5), '"crescent"', style=lbl)
moon((93, 27), width=11, height=16, variant="thin", style=Styles.PrimaryNeutral)
text((93, 8.5), '"thin"', style=lbl)
moon((109, 27), width=14, height=16, variant="waxing", mirror=True, style=Styles.SecondaryNeutral)
text((109, 8.5), '"waxing"', style=lbl)
moon((123, 27), width=9, height=16, variant="half", style=Styles.Neutral)
text((123, 8.5), '"half"', style=lbl)
save()
6. ヘルスチェックハートとイベント稲妻ボルト (heart, lightning)
6.1. 死活監視・ヘルスチェックハート (heart)
heart は、サービスのヘルスチェック、SLA ステータスカード、ユーザーエンゲージメント指標向けに、滑らかな 3 次ベジェ曲線のハート("standard")または中央でひび割れて 2 分割されたハート("broken")を描画します。
heart(
xy: tuple[float, float],
width: float,
height: float,
*,
variant: Literal[
"standard", "classic",
"broken",
] = "standard",
style: Style,
text: str = "",
text_style: Style | None = None,
) -> None
6.2. サーバーレス・イベント稲妻ボルト (lightning)
lightning は、6 種類の幾何スタイル、水平反転(mirror=True)、および頂点の角丸め(style.shape_r)に対応した高電圧ボルト(稲妻)シルエットを描画します。
lightning(
xy: tuple[float, float],
width: float,
height: float,
*,
variant: Literal[
"standard",
"flat",
"double",
"flat_double",
"angled",
"slanted",
] = "standard",
mirror: bool = False,
style: Style,
text: str = "",
text_style: Style | None = None,
) -> None
lightning の variant |
上端形状 | ジグザグ段数 | 主なユースケース |
|---|---|---|---|
"standard" (デフォルト) |
鋭い頂点 | 1 段の定番ボルト | サーバーレス関数(Lambda/Cloud Functions)、Webhook/イベントトリガー、高速キャッシュヒット。 |
"flat" |
水平なフラット上辺 | 1 段の定番ボルト | 定番のバッテリー/充電アイコン、力強い産業用ハザードマーカー。 |
"double" |
鋭い頂点 | 2 段のマルチジグザグボルト | 高電圧サージ、連鎖するイベントストリーム、スパイクアラート。 |
"flat_double" |
水平なフラット上辺 | 2 段のマルチジグザグボルト | 高出力電源やバーストコンピュートのインジケータ。 |
"angled" / "slanted" |
斜めに傾いた上辺 | 非対称なダイナミックボルト | アクションのコールアウト、コミック/プレゼンテーション用のアクセント装飾。 |
from drawlib.canvas import save, setup
from drawlib.shapes import heart, lightning
from drawlib.styles import Styles
from drawlib.text import text
setup(width=132, height=46)
lbl = Styles.DarkBold.patch(text_size=9.5)
# 1. Heart variants ("standard" and "broken")
heart(
(13, 27),
width=17,
height=16,
variant="standard",
style=Styles.DangerFlat,
text="OK",
text_style=Styles.WhiteBold.patch(text_size=9.5),
)
text((13, 8.5), 'heart("standard")', style=lbl)
heart((34, 27), width=17, height=16, variant="broken", style=Styles.DangerNeutral)
text((34, 8.5), 'heart("broken")', style=lbl)
# 2. All 6 Lightning variants
bolt_specs = [
("standard", 54, Styles.WarningFlat),
("flat", 69, Styles.PrimaryFlat),
("double", 84, Styles.WarningNeutral),
("flat_double", 99, Styles.PrimaryNeutral),
("angled", 113, Styles.SecondaryNeutral),
("slanted", 125, Styles.AccentFlat),
]
for var, cx, st in bolt_specs:
lightning((cx, 27), width=10.5, height=19, variant=var, style=st)
text((cx, 8.5), f'"{var}"', style=lbl)
save()
7. ギア・歯車 (gear)
自動化エンジン、バックグラウンドワーカー、CI/CD ランナー、システム設定ノード向けに、gear は円弧状の歯底(ルートバレー)、調整可能な歯先/歯元比率、および任意の透明な中心穴を備えた N 枚の歯を持つ機械歯車を描画します。
gear(
xy: tuple[float, float],
num_teeth: int,
radius_ext: float,
radius_int: float,
*,
tooth_ext_ratio: float | None = None,
tooth_int_ratio: float | None = None,
hole_radius: float | None = None,
style: Style,
text: str = "",
text_style: Style | None = None,
) -> None
パラメータリファレンス
| パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|
xy |
tuple[float, float] |
必須 | ギアの中心座標 (x, y)。 |
num_teeth |
int |
必須 | 歯の数(>= 3、通常は 6〜12)。角度ピッチ pitch = 360° / num_teeth を決定します。 |
radius_ext |
float |
必須 | 歯先の外周半径(> radius_int)。 |
radius_int |
float |
必須 | 歯底の内周半径(0 < radius_int < radius_ext)。 |
tooth_ext_ratio |
float | None |
None |
1 ピッチ角 pitch のうち 外側の歯先 が占める割合を (0.0, 1.0) で指定します。デフォルトは 0.35。tooth_ext_ratio <= tooth_int_ratio を満たす必要があります。 |
tooth_int_ratio |
float | None |
None |
1 ピッチ角 pitch のうち 内側の歯元 が占める割合を (0.0, 1.0) で指定します。デフォルトは 0.55。tooth_int_ratio >= tooth_ext_ratio を満たす必要があります。 |
hole_radius |
float | None |
None |
中央の透明な円形くり抜き穴の半径(0 < hole_radius < radius_int)。None(デフォルト)の場合は中実コアとなり、text の表示に適しています。 |
style |
Style |
必須 | 塗りつぶし、枠線、回転(angle)、および歯の角丸め(shape_r: スカラー float または (4 * num_teeth) 要素タプル)を制御するスタイル。 |
text / text_style |
str / Style | None |
"" / None |
中央配置されるテキストラベルと任意のタイポグラフィ上書き設定。 |
歯のジオメトリとカスタマイズルール
- 台形歯と角歯の切り替え: デフォルト(
tooth_ext_ratio=0.35,tooth_int_ratio=0.55)では、実際のインボリュート歯車のように外側に先細りする台形歯になります。両比率を同じ値(例:tooth_ext_ratio=0.48, tooth_int_ratio=0.48)にすると、側面が真っ直ぐな角歯になります。 - 歯底円弧と角丸め(
style.shape_r):style.shape_rがNoneの場合、歯底と歯先はそれぞれ半径radius_intとradius_extの正確な真円アークに沿います。style.shape_rを指定すると(例:Styles.PrimaryNeutral.patch(shape_r=0.8))、全4 * num_teeth箇所の歯の角が滑らかにフィレット処理されます。 - 中実コアと中心穴の使い分け(
hole_radius): ギア内部にテキストラベルを配置する場合はhole_radiusを省略し、定番のリング型歯車にする場合はhole_radius(例:0.4 * radius_int)を指定してください。
from drawlib.canvas import save, setup
from drawlib.shapes import gear
from drawlib.styles import Styles
from drawlib.text import text
setup(width=126, height=48)
# 1. Solid gear with embedded text (hole_radius=None)
gear(
(18, 27),
num_teeth=8,
radius_ext=13.0,
radius_int=9.8,
style=Styles.PrimaryFlat,
text="Worker",
text_style=Styles.WhiteBold.patch(text_size=10.0),
)
text((18, 8), "hole_radius=None", style=Styles.DarkBold.patch(text_size=9.5))
# 2. Standard 8-tooth gear with center hole (tooth_ext_ratio=0.35, tooth_int_ratio=0.55)
gear(
(49, 27),
num_teeth=8,
radius_ext=13.0,
radius_int=9.5,
hole_radius=4.2,
style=Styles.PrimaryNeutral,
)
text((49, 8), "hole_radius=4.2", style=Styles.DarkBold.patch(text_size=9.5))
# 3. 12-tooth gear with wide square teeth (tooth_ext_ratio=0.48, tooth_int_ratio=0.48)
gear(
(80, 27),
num_teeth=12,
radius_ext=13.0,
radius_int=10.0,
tooth_ext_ratio=0.48,
tooth_int_ratio=0.48,
hole_radius=5.0,
style=Styles.SecondaryNeutral,
)
text((80, 8), "num_teeth=12 (square)", style=Styles.DarkBold.patch(text_size=9.5))
# 4. 6-tooth heavy gear with filleted tooth corners (shape_r=1.0)
gear(
(110, 27),
num_teeth=6,
radius_ext=13.0,
radius_int=8.8,
tooth_ext_ratio=0.38,
tooth_int_ratio=0.60,
hole_radius=3.8,
style=Styles.Neutral.patch(shape_r=1.0),
)
text((110, 8), "num_teeth=6, shape_r=1.0", style=Styles.DarkBold.patch(text_size=9.5))
save()
8. 算術・比較演算子記号 (math_symbol)
視覚的な方程式やコンセプト数式([Card A] + [Card B] = [Outcome] など)向けに、math_symbol は細いフォントグリフではなく、塗りつぶしと枠線を持つ幾何図形として数学演算子を描画します。
math_symbol(
xy: tuple[float, float],
symbol: Literal[
"+", "plus",
"-", "−", "minus",
"*", "x", "×", "multiply",
"/", "÷", "divide",
"=", "equal",
"!=", "≠", "not_equal",
],
width: float,
height: float | None = None,
*,
thickness_ratio: float | None = None,
style: Style,
text: str = "",
text_style: Style | None = None,
) -> None
パラメータリファレンス
| パラメータ | 型 | デフォルト | 説明 |
|---|---|---|---|
xy |
tuple[float, float] |
必須 | 記号バウンディングボックスの中心座標 (x, y)。 |
symbol |
MathSymbol |
必須 | 演算子記号または正規名(下記の 対応する symbol とエイリアス一覧 を参照)。 |
width |
float |
必須 | 記号の外接水平幅(> 0)。 |
height |
float | None |
None |
外接垂直高さ(> 0)。None の場合は width と同じ値(正方形のバウンディングボックス)になります。 |
thickness_ratio |
float | None |
None |
min(width, height) に対するバーの太さ比率を (0.0, 1.0) で指定します。デフォルトは 0.28。 |
style |
Style |
必須 | 塗りつぶし、枠線、回転(angle)、およびバーの角丸め(shape_r: スカラー float)を制御するスタイル。 |
text / text_style |
str / Style | None |
"" / None |
中央配置されるテキストラベルと任意のタイポグラフィ上書き設定。 |
対応する symbol とエイリアス一覧
基本 symbol |
使用可能なエイリアス | 幾何学的な構成 |
|---|---|---|
"+" |
"plus" |
単一化された 12 頂点の直交十字輪郭(内部に重なり合う境界線なし)。 |
"-" |
"−", "minus" |
垂直方向の中央に配置された 1 本の水平矩形バー。 |
"×" |
"*", "x", "multiply" |
45° 回転し (width, height) に収まるようスケールされた単一の 12 頂点斜め十字輪郭。 |
"÷" |
"/", "divide" |
中央の水平バーと上下の円形ドットを結合した複合パス(Path.make_compound_path)。 |
"=" |
"equal" |
中心の上下に対称配置された 2 本の平行な水平バー。 |
"≠" |
"!=", "not_equal" |
2 本の平行な水平バーと斜めのスラッシュを単一の外周輪郭に統合した図形。 |
from drawlib.canvas import save, setup
from drawlib.shapes import math_symbol, rectangle
from drawlib.styles import Styles
from drawlib.text import text
setup(width=124, height=58)
# Row 1: All 6 symbols (+, -, ×, ÷, =, ≠)
symbols = [
("+", 'symbol="+"', Styles.PrimaryFlat),
("-", 'symbol="-"', Styles.SecondaryNeutral),
("×", 'symbol="×"', Styles.PrimaryNeutral),
("÷", 'symbol="÷"', Styles.SecondaryNeutral),
("=", 'symbol="="', Styles.PrimaryFlat),
("≠", 'symbol="≠"', Styles.AccentFlat),
]
for idx, (sym, label, st) in enumerate(symbols):
cx = 13 + idx * 19.6
math_symbol((cx, 42), symbol=sym, width=12.5, style=st.patch(shape_r=0.5))
text((cx, 30), label, style=Styles.DarkBold.patch(text_size=10.0))
# Row 2: Visual equation layout (Card + Card = Result Card)
rectangle(
(24, 13),
width=28,
height=13,
style=Styles.PrimaryNeutral.patch(shape_r=2),
text="Latency",
text_style=Styles.DarkBold.patch(text_size=10.5),
)
math_symbol((46, 13), symbol="+", width=7.5, thickness_ratio=0.32, style=Styles.SecondaryFlat.patch(shape_r=0.4))
rectangle(
(68, 13),
width=28,
height=13,
style=Styles.SecondaryNeutral.patch(shape_r=2),
text="Jitter",
text_style=Styles.DarkBold.patch(text_size=10.5),
)
math_symbol((90, 13), symbol="=", width=7.5, thickness_ratio=0.28, style=Styles.SecondaryFlat.patch(shape_r=0.4))
rectangle(
(108, 13),
width=20,
height=13,
style=Styles.PrimaryFlat.patch(shape_r=2),
text="SLA",
text_style=Styles.WhiteBold.patch(text_size=10.5),
)
save()