---
title: "VectorPath コンポーネント — zenit Zig UI"
description: "ベクターパスのジオメトリ：ストローク、塗り、ヒットテスト。パスは GPU で描画され、ヒットテストも描画と同じジオメトリを使います。"
url: https://zenit.z.express/ja/components/vectorpath
language: ja
alternate_en: https://zenit.z.express/components/vectorpath.md
alternate_zh: https://zenit.z.express/zh/components/vectorpath.md
alternate_es: https://zenit.z.express/es/components/vectorpath.md
alternate_ko: https://zenit.z.express/ko/components/vectorpath.md
alternate_fr: https://zenit.z.express/fr/components/vectorpath.md
alternate_de: https://zenit.z.express/de/components/vectorpath.md
project: zenit v0.1.0-alpha (Zig 0.15.2, macOS)
source: https://github.com/version-next/zenit
---

# VectorPath

`ui.path`

ベクターパスのジオメトリ：ストローク、塗り、ヒットテスト。

[Video](https://zenit.z.express/media/stories/vectorpath.mp4?v=b261110454)

**BEHAVIOR CONTRACT**

パスは GPU で描画され、ヒットテストも描画と同じジオメトリを使います。

**RECORDED INTERACTION**

各種パスを一巡します。

`examples/storybook/stories.zig:3272`

```zig
pub fn buildVectorPath(scope: *ui.Scope, cx: *ui.Cx) anyerror!*ui.Node {
    _ = scope;
    const a = cx.allocator;
    const c = try col(cx, 16);

    // 相邻多 path 节点：encoder 侧应合并为少数 draw（polygon 组 + triangles 组）
    try c.appendChild(a, try label(cx, "Batched fill_path — adjacent stars (polygon mode)"));
    const stars = try row(cx, 12);
    const star_colors = [_]ui.Color{
        ui.Color.rgb(235, 87, 87),
        ui.Color.rgb(242, 153, 74),
        ui.Color.rgb(39, 174, 96),
        ui.Color.rgb(45, 156, 219),
    };
    for (star_colors) |color| {
        const n = try ui.box(cx, .{
            .width = .{ .px = 64 },
            .height = .{ .px = 64 },
            .background = color,
        }, .{});
        try setStarGeometry(n, a, 64);
        try stars.appendChild(a, n);
    }
    try c.appendChild(a, stars);

    try c.appendChild(a, try label(cx, "Bursts 40-pt (earclip triangles mode)"));
    const bursts = try row(cx, 12);
    const burst_colors = [_]ui.Color{
        ui.Color.rgb(155, 81, 224),
        ui.Color.rgb(47, 128, 237),
        ui.Color.rgb(33, 150, 83),
    };
    for (burst_colors) |color| {
        const n = try ui.box(cx, .{
            .width = .{ .px = 64 },
            .height = .{ .px = 64 },
            .background = color,
        }, .{});
        try setBurstGeometry(n, a, 64);
        try bursts.appendChild(a, n);
    }
    try c.appendChild(a, bursts);

    return c;
}
```

[GitHub でソースを見るexamples/storybook/stories.zig:3272](https://github.com/version-next/zenit/blob/HEAD/examples/storybook/stories.zig#L3272)

Storybook にあるこの story のコードそのままです（zenit 5f9add5+wip 2026-09-30）。`W` は `ui.widgets` のことで、`col` / `row` / `label` は Storybook 内の小さなレイアウトヘルパーです。