VectorPath
ui.path矢量路径几何:描边、填充与命中。Vector path geometry: stroke, fill and hit-testing.
BEHAVIOR CONTRACT
路径几何在 GPU 上渲染,命中测试与绘制共用同一几何。Paths render on the GPU; hit-testing uses the same geometry.
RECORDED INTERACTION
录像扫过各类路径。Sweeps the paths.
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;
}这是 Storybook 中该 story 的原样代码(zenit 5f9add5+wip 2026-09-30)。其中 W 即 ui.widgets,col / row / label 是 Storybook 内的布局小工具。The story's verbatim source from the Storybook (zenit 5f9add5+wip 2026-09-30). W is ui.widgets; col / row / label are small Storybook layout helpers.