hairline-create

Hairline：创作一个图形

你要创作一个 Hairline 风格的图形：用圆角立体形状绘制的等距线稿，以单笔画成，并回应指针动作。它以单个 HTML 文件交付，无需安装任何内容。@lucasmarkes/hairline 的六个图形是标杆；examples/terrain.js 和 examples/riffle.js 是其中两个，格式就是你要采用的格式。

你只需编写一项内容：图形。引擎（kernel.js）和页面（bench.html）都是固定的。切勿编辑它们、粘贴修改后的副本，也不要重新编写内核已经提供的内容。

下面提到的所有文件都在此技能文件夹中。图形和页面要写入用户的工作目录：从该目录运行 build.mjs、validate.mjs 和 look.mjs，并使用它们在此文件夹中的路径。

0. 源文件

仅当请求附带 .svg 文件时执行。运行 node read.mjs <file.svg>：它会在工作目录中生成 SVG 图片和一张记录测量结果的卡片。然后阅读 source.md 并回答其中的问题。对象及其组成部分就此确定：第 1 步中的每个概念都必须保留它们。

1. 概念

阅读 concepts.md。其中有一个关于空状态的章节，以及一个关于根据标记绘制图形的章节。然后提出两到三个概念，每个概念一行：

名称。 对象。指针如何与它互动。读数显示什么。漫游停在哪里。

等用户选择。只有当用户带着已经选定的对象和手势前来时，才跳过这一步。如果没人可问，就选择静止姿态最有表现力的概念，并说明你选了哪个。

如果有源文件（第 0 步），每个概念都必须保留对象及其组成部分：概念之间只能在手势上有所不同；若请求中已经给定手势，则只能在形态和读数上有所不同。

一个图形，一个想法。需要标签才能看懂的概念，还不算真正的概念。

2. 构建

1. 阅读 rules.md。十条规则不是建议：违反其中任意一条的图形都不算完成。
2. 阅读 kernel.js 顶部的索引：从哈希线下方的注释读到 var HL 为止。它列出了你可以调用的所有内容。不要阅读后面的代码。
3. 阅读最贴近你概念的示例：连续场景看 examples/terrain.js，离散物件看 examples/riffle.js。
4. 按照示例的结构，在用户的工作目录中将图形写为 <name>.js：从 HL 中选取所需内容，定义 mount({ stage, svg, read }, value)，使其返回 { set, destroy }，并以 hairline({ name, means, rules, range, tour, mount }) 结束文件。
   • name：小写，一个单词或用连字符连接的词。
   • means：用一句话说明图形展示的内容，最多 140 个字符。它会显示在舞台下方。
   • rules：该图形最依赖的规则编号。
   • range：滑块控制的那个数值，分别对应强度为 0、0.5 和 1 时的取值。中间值是默认值，三个值应朝同一方向递增或递减。mount 的 value，以及滑块移动时 set(value) 收到的 value，都是这个数值：图形自身的数值，取自 range，而不是 0 到 1。
   • tour：页面播放时，隐形指针访问的三个到六个 viewBox 坐标点；若不需要漫游，则设为 null。这是无人操作页面时，陌生访客看到的一轮漫游。使用字面量 [x, y] 数值，其中至少一个必须是点。图形本身绝不播放：播放由页面的播放按钮和软件包负责。
5. 组装图形：运行 node build.mjs <name>.js 会写出 hairline-<name>.html；第 3 步中每次运行 look.mjs 也会生成该文件。若没有 Node，则通过文件操作复制 bench.html，将 kernel.js 的内容放入 /*KERNEL*/，再将你的图形放入 /*FIGURE*/，除此之外不得改动任何内容。

3. 检查

1. 运行 node look.mjs <name>.js --answer x,y,z --edge x,y,z；如果有 SVG 文件，再加上 --source <file.svg>。这些点是图形的世界坐标点，具体说明见 look.md。此命令会构建页面、验证页面、在一张图上生成八张截图（hairline-<name>-look.png），并检查画框、读数和控制台。修复所有显示为失败的项目，然后再次运行，直到退出码为 0。
2. 阅读 look.md，再查看截图拼图，并回答其中的问题。修复未通过的项目，然后回到第 1 步。

look.mjs 需要浏览器，并会在此文件夹之外安装一次 playwright-core。如果没有浏览器，请在每次构建后运行 node validate.mjs hairline-<name>.html 进行检查，并按照 look.md 中“没有浏览器时”的说明进行外观检查。如果没有 Node，请阅读 validate.mjs 顶部的检查清单，并根据代码逐项作答。

不要交付验证器拒绝的页面。没有实际查看，就不要说外观检查已完成。

4. 交付

如果可以，请将 hairline-<name>.html 发布为工件。如果无法发布，请将文件留在对方可以打开的位置，并说明文件所在位置。然后每项各用一行说明：

• 隐喻：这个对象是什么，指针会对它做什么；
• 依托的规则；
• 巡游路线：依次停留在哪里；
• 无法验证的事项（没有 Node、没有浏览器），如实说明。

然后请对方在页面上按下播放按钮，或使用 ?play=1 打开页面，并询问这一轮播放是否讲述了图形的故事。如果没有人可以询问，请说明巡游路线尚未经过评判。

5. 调整

对方要求修改时，只编辑 <name>.js，然后重新运行 look.mjs 并查看新的截图拼图。第十个版本也必须达到和第一个版本相同的标准。若要修改巡游路线，只改 tour。

常见问题

如果你发现自己在……	应改为……
在图形上添加标签、数字或字母	用几何形状表达（规则 10）；名称放在 read.textContent 中
想要使用颜色、填充或辉光	将一条描边从 sil 移到 hi（规则 04）
编写计时器、requestAnimationFrame 或 CSS 动画	使用 register(stage, tick)，配合弹簧或补间动画（规则 07 和 08）
根据当前绘制的形状检测指针	根据静止姿态或目标姿态检测（规则 01）
画一个有十二条边的盒子	用两个圆角环组成 prism：一个轮廓和一道折痕（规则 09）
把某个部件画成普通的圆角块	为它添加使其成为该对象的特征，也就是你在概念中命名的特征（concepts.md）
因为省事而让静止姿态平坦、空荡或对称	认真构图：静止姿态就是缩略图（规则 05）
在盒子上盖个标记来说明它属于谁	将标记本身构建为对象，或直接省略（concepts.md 中的“From a mark”）
修改内核或工作台来让某些东西正常工作	问题出在图形上；修改图形
让巡游路线依次经过每个部件	设置三个停留点，每个都展示不同的答案，然后离场：一轮播放应该是一句话，而不是清单
引入第二个构想	删掉它：只保留一个图形、一个构想
沿着 SVG 路径描画，或照搬其坐标	根据卡片给出的比例，将部件构建成实体（source.md）
保留 SVG 中作为装饰的部分	删除它：这个对象由两三个部件组成