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 <文件.svg>：它会将 SVG 写入为操作者工作目录中的一张图片和一张包含其所测量数据的卡片。然后阅读 source.md 并回答其问题。对象及其部件现在已固定：步骤 1 中的每个概念都保留它们。
1. 概念
阅读 concepts.md。它包含一个关于空状态的部分和一个关于从标记绘制的图形的部分。然后提供两到三个概念，每行一个：
名称。 对象。指针对其执行的操作。读取显示的内容。游览停靠的位置。
等待人员选择。仅当他们已经带着对象和已选手势到达时，跳过此步骤。如果没有可询问的人，选择静止状态最强的概念，并说明你选择了哪一个。
如果有来源（步骤 0），每个概念都保留对象及其部件：它们的区别在于手势，或者当手势随请求一同提供时，在于形式和读取内容。
一个图形，一个想法。需要标签才能被理解的概念还不是一个概念。
2. 构建
- 阅读
rules.md。这十条规则不是建议：违反其中一条的图形不算完成。 - 阅读
kernel.js顶部的索引：哈希行下的注释，直到var HL。它列出了你可以调用的所有内容。不要阅读其下方的代码。 - 阅读更接近你概念的示例：
examples/terrain.js用于连续场域，examples/riffle.js用于离散项目。 - 在操作者的工作目录中将图形编写为
<名称>.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]数字，其中至少一个是指针位置。图形从不自行播放：页面的播放按钮和程序包负责播放。
- 组装它：
node build.mjs <名称>.js会写入hairline-<名称>.html，并且每次运行步骤 3 中的look.mjs都会如此。如果没有 Node.js，复制bench.html，将kernel.js的内容放入/*KERNEL*/所在位置，将你的图形放入/*FIGURE*/所在位置，通过文件操作完成，不更改其他任何内容。
3. 检查
node look.mjs <名称>.js --answer x,y,z --edge x,y,z，如果有来源则加上--source <文件.svg>，这些点是你图形的世界坐标点，如look.md所述。它会构建页面、验证页面、拍摄八张图片到一张纸上（hairline-<名称>-look.png），并检查帧、读取内容和控制台。修复它打印为失败的所有行，然后重新运行，直到它以代码 0 退出。- 阅读
look.md，然后阅读那张图片，并回答其问题。修复失败的内容，然后返回步骤 1。
look.mjs 需要浏览器，并且会在此文件夹外部安装一次 playwright-core。如果没有浏览器，在每次构建后使用 node validate.mjs hairline-<名称>.html 进行检查，并按照 look.md 中“Without a browser”部分所述进行查看。如果没有 Node.js，阅读 validate.mjs 顶部的检查列表，并根据你的代码回答每一项。
不要交付验证器拒绝的页面。如果你没有查看过，就不要说查看完成了。
4. 交付
如果可以，将 hairline-<名称>.html 发布为工件。如果无法做到，将文件留在操作者可以打开的地方，并说明文件位置。然后，每行说明以下内容：
- 隐喻：对象是什么，指针对其执行什么操作；
- 它依赖的规则；
- 游览：停靠的位置，按顺序；
- 你无法验证的任何内容（没有 Node.js，没有浏览器），如实说明。
然后要求操作者按下页面上的播放按钮，或使用 ?play=1 打开页面，并说明这个循环是否讲述了这个图形的故事。如果没有可询问的人，则说明游览未经过判断。
5. 调整
当操作者要求更改时，只编辑 <名称>.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 中属于装饰的部分 | 放弃它：两到三个部件构成对象 |