oas-render

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OAS Render

OAS 渲染

When to use

使用场景

Use this skill when the task is about visualizing an OAS plan rather than authoring its data: picking a mm→px scale, choosing axis orientation, deciding layer order, producing SVG/Canvas/WebGL output. There are no new JSON object types here — this is a rendering contract over existing OAS entities.

当任务是可视化OAS计划而非编辑其数据时，使用此技能：例如设置毫米到像素的缩放比例、选择轴方向、确定图层顺序、生成SVG/Canvas/WebGL输出。此处不涉及新的JSON对象类型——这是基于现有OAS实体的渲染约定。

Critical rules

关键规则

Pick one mm→px scale per render context. A single scale factor applies to every coordinate in the drawing; do not mix scales across entities or layers. Aspect ratio must be preserved.
OAS Y-axis points up. Most screen renderers (SVG, Canvas) have Y pointing down. Invert Y at the render boundary; do not mutate the source data.
Use the documented SVG group ids. Group output into
```
<g id="oas-rooms">
```
,
```
<g id="oas-walls">
```
,
```
<g id="oas-openings">
```
,
```
<g id="oas-circulation">
```
,
```
<g id="oas-labels">
```
— the spec depends on this naming for selection and theming.
Walls render in one of two ways. Either as a
```
<line>
```
with
```
stroke-width = thickness_mm * scale
```
, or as a polygon for full accuracy. Pick one strategy per renderer; don't mix.
Follow the documented draw order. Room fills → room boundaries → walls → openings → circulation → labels → annotations. The spec lists the exact order — don't reinvent it.
Renderers should not invent geometry. Doors, windows, labels, dimensions all come from existing OAS entities. Don't synthesize them from inferred adjacency.

每个渲染上下文选择一个毫米→像素的缩放比例。单个缩放因子适用于绘图中的所有坐标；请勿在不同实体或图层间混合使用缩放比例。必须保持宽高比。
OAS的Y轴向上。大多数屏幕渲染器（如SVG、Canvas）的Y轴向下。在渲染边界处反转Y轴；请勿修改源数据。
使用文档规定的SVG组ID。将输出分组到
```
<g id="oas-rooms">
```
、
```
<g id="oas-walls">
```
、
```
<g id="oas-openings">
```
、
```
<g id="oas-circulation">
```
、
```
<g id="oas-labels">
```
中——规范依赖此命名进行选择和主题设置。
墙体有两种渲染方式。要么使用
```
<line>
```
元素，设置
```
stroke-width = thickness_mm * scale
```
，要么使用多边形以保证完全精确。每个渲染器选择一种策略；请勿混合使用。
遵循文档规定的绘制顺序：房间填充→房间边界→墙体→开口→流通区域→标签→注释。规范列出了确切顺序——请勿自行更改。
渲染器不应生成新几何图形。门、窗、标签、尺寸均来自现有OAS实体。请勿通过推断相邻关系合成这些元素。

Full schema

完整 schema

See docs/render.md for the full rendering rules, including layer ordering, recommended line weights, and target-specific guidance for SVG / Canvas / WebGL.

查看docs/render.md获取完整渲染规则，包括图层顺序、推荐线宽以及针对SVG/Canvas/WebGL的特定目标指南。