# 温室咖啡馆：用 VectorPaint 的 29 个闭合路径搭一间等距小屋

语言：zh-CN
原文：[温室咖啡馆：用 VectorPaint 的 29 个闭合路径搭一间等距小屋](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/>)
中文：[中文 HTML](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/>)
English: [English HTML](<https://allluckly.cn/en/works/vectorpaint-greenhouse-cafe-duo/>)
发布于: 2026-10-24T12:58:29+08:00
内容更新于: 2026-10-24T15:04:33+08:00
署名：Bison

在 iPhone Duo 模拟器中，用 VectorPaint 的钢笔闭合、六色填充与几何表单完成温室、门窗、遮阳棚、两盆三角叶植物和四块铺石。记录 29 个闭合路径、花盆移位与小节点提前闭合的修正，附 1080×1080 原生成图。

[视频](<https://allluckly.cn/assets/videos/vectorpaint-greenhouse-cafe-duo-steps-v2.mp4>)

[中文步骤](<https://allluckly.cn/assets/videos/vectorpaint-greenhouse-cafe-duo-steps-v2.zh-CN.vtt>)

[English steps](<https://allluckly.cn/assets/videos/vectorpaint-greenhouse-cafe-duo-steps-v2.en.vtt>)

[Poster](<https://allluckly.cn/assets/images/works/vectorpaint-greenhouse-cafe-duo.png>)

AI 辅助操作 VectorPaint 的真实编辑界面，按步骤展示地基、墙顶、蓝玻璃、红棚、花盆和三角叶，再通过几何表单调整花盆、检查重建后的玻璃、添加铺石并原生导出 PNG。保留完整应用界面；片尾为原生成图和 Duo 四姿态窗口采样。

VectorPaint 本地构建 1.0.7（6），iPhone Duo / iOS 27.1 模拟器，中文界面。AI 辅助操作实际编辑界面。从已有地基轮廓的填色开始，创作片段按顺序剪接，去除等待，以原速至 1.5 倍速播放；字幕注明各段速度。无音轨，附中英文字幕。片尾先展示原生 PNG，再用四张真实窗口截图分步对照 Duo 姿态；并非连续折叠录像。 商店版本界面可能不同。

按章节观看

1. [00:00 给闭合地基填紫色](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=0.0>)
2. [00:06 从地坪立墙并搭屋顶](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=6.0>)
3. [00:25 依次加入三片屋顶玻璃](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=25.333>)
4. [00:39 正窗、门玻璃与三片侧窗](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=39.333>)
5. [01:12 闭合红棚并切换填色](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=72.667>)
6. [01:26 花盆轮廓与门下板](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=86.667>)
7. [01:43 每侧三片大三角叶簇](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=103.333>)
8. [02:13 用几何面板让花盆归位](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=133.333>)
9. [02:39 重建后的玻璃填蓝并检查四角](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=159.333>)
10. [02:47 沿地坪方向补齐四块铺石](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=167.333>)
11. [03:22 通过原生界面导出 PNG](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=202.667>)
12. [03:49 完成作品 PNG](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=229.333>)
13. [03:52 iPhone Duo 四态窗口采样](<https://allluckly.cn/works/vectorpaint-greenhouse-cafe-duo/#t=232.333>)

这间温室咖啡馆只用六种颜色。琥珀色地坪下面露一圈紫色地基，白色正墙接着绿色侧墙，三块蓝玻璃沿屋顶斜面排开。门前留四块白色铺石，两侧各放一盆尖叶植物，最后停在这个程度。

作品在 **iPhone Duo / iOS 27.1 模拟器、VectorPaint 本地构建 1.0.7（6）**中完成，画布 **1080 × 1080 px**。最终原稿保留 **1 个图层、29 个闭合路径、109 个锚点**。

**创作方式说明：本次由 AI 辅助操作 VectorPaint 的真实编辑界面，通过触控、键盘与辅助功能完成钢笔落点、对象选择、填色和几何调整。成图使用应用原生 PNG 导出，没有导入外部合成图，也没有把原稿数据直接写进应用。**视频按创作顺序剪去等待，保留实际应用界面，方便对照每一步操作。

![VectorPaint 原生导出的温室咖啡馆：紫色地基与琥珀地坪，白墙、绿色屋顶和侧墙、三块蓝色屋顶玻璃、陶红棚与花盆，六片三角绿叶和四块白色铺石](<https://allluckly.cn/assets/images/works/vectorpaint-greenhouse-cafe-duo.png>)

## 先把 29 个色块的关系列清楚

整幅画保持平面配色，关闭描边。最后留下的对象如下；中途删除的试画线不计入成品。

| 内容 | 路径数 | 作用 |
| --- | --- | --- |
| 紫色地基、琥珀地坪 | 2 | 建筑下面的一块厚台地 |
| 两面墙、两片屋顶、白色山墙 | 5 | 形成房子的基本体积 |
| 蓝色屋顶玻璃 | 3 | 顺着同一坡面分格 |
| 正面窗、门玻璃、三片侧窗 | 5 | 嵌入各自所在的墙面 |
| 陶红遮阳棚、门下板 | 2 | 前立面的暖色部分 |
| 陶红花盆 | 2 | 分别承托左右叶簇 |
| 大三角叶片 | 6 | 每盆三片，方向不同 |
| 白色菱形铺石 | 4 | 放在门前和两侧空地 |
| 合计 | **29** | 全部为闭合路径 |

这轮用一个图层按绘制顺序叠放。墙、玻璃、遮阳棚和植物仍是独立对象，可以通过图层面板里的对象树分别选择。

## 新建方形画布，先关描边

新建 **1080 × 1080 px** 文档，作品命名为“温室咖啡馆\_Duo\_20261024”。先保留四周白色空间，地坪的左右角不要顶到画布边缘。

选择钢笔，沿轮廓的转角逐点落下，最后回到起点闭合。做完一块后切回选择工具，选中刚画的对象，打开“对象属性 → 外观”，设置填充并关闭“启用描边”。后面每块纯色都按这个方式处理。

填色使用应用内的收藏色板。先确认颜色作用于填充，再选对应颜色。这里没有用渐变，主要靠绿色、白色和蓝色的相接关系说明墙面与玻璃。

| 收藏色 | HEX | 本次用途 |
| --- | --- | --- |
| 紫色 | `#875CBA` | 地基下缘 |
| 琥珀 | `#F7B53D` | 地坪顶面 |
| 苔绿 | `#4A7A59` | 侧墙、屋顶、叶片 |
| 蓝 | `#4578D6` | 屋顶玻璃、门窗 |
| 白 | `#FFFFFF` | 正墙、山墙、铺石 |
| 陶红 | `#E04C2E` | 遮阳棚、门下板、两只花盆 |

## 地坪：两个菱形错开约 20 px

先画紫色菱形，再在上面画琥珀色菱形。上层四个角的位置约为：左角 **(108, 700)**、下角 **(540, 948)**、右角 **(972, 700)**、上角 **(540, 453)**。这里按画布左上角为原点，向右、向下计数，作为构图参考。

紫色底层相对向下错开约 **20 px**，从琥珀色下缘露出来，台地就有了厚度。两块形状都用四个角闭合；长边中间不再补节点。

建筑跟随地坪的两组斜边方向，墙的竖边保持竖直。后面的玻璃与铺石也沿用这几组方向，不在每个局部重新决定角度。

## 墙与屋顶：先绿，再盖白色正面

本次大形的顺序是：先画绿色侧墙，再做两片绿色屋顶，随后加白色正面墙和上方山墙。侧墙与正墙共用中间的转角，屋脊从较近的山墙尖端向右上延伸。

白色正墙与天空同色，靠绿色侧墙、蓝色门窗和陶红棚檐划出范围。山墙保持一个清楚的三角形，两条斜边接住双坡屋顶。

这一组形状总共五个对象。先让墙脚接上地坪、两面墙在同一个竖向转角相接，再进入玻璃；不要用后来的窗格去遮一条已经错开的墙边。

## 玻璃：屋顶三块，正面两块，侧面三块

屋顶三块蓝玻璃都放在同一片绿色坡面上。每块都是四边形，沿着屋脊和屋檐的方向倾斜。绿色底面从玻璃间隙露出，形成较宽的框，不必另外画很多细条。

正面放一扇较矮的窗和一块较高的门玻璃。它们的上、下边跟着白墙倾斜，左右边仍然竖直。门玻璃下方再叠一块陶红门板，和遮阳棚、花盆使用同一种颜色。

绿色侧墙上排三片蓝色窗。三块窗的高低关系沿侧墙走，每块之间保留绿色墙面。这样即使不加玻璃反射，也能清楚读出正面、侧面和屋顶三个方向。

制作中有一块屋顶蓝色路径看起来已经成面，核对原稿时仍是开放路径。实际做法是从对象树中选中它、正常删除，再用钢笔重新围出闭合四边形填蓝。最终三块屋顶玻璃都已闭合。

## 遮阳棚：用一块斜四边形接住门窗

陶红遮阳棚横跨正面窗和门的上方，是一个向左下伸出的斜四边形。先沿前墙方向放它靠墙的一条边，再把外侧两角向外带出，闭合后填陶红。

棚的两端稍微超过门窗范围，让它从白墙前面伸出来。它与下方门板之间留出蓝色门玻璃，避免整扇门都变成红色。

## 小叶画不稳，就改成每盆三个大三角

这次在半展开视口里画小形状时，多次遇到节点太近、路径提前结束。原先一片叶子打算用更多转角围出，实际落点挤在一起，反而难以闭合。后来回到全展开约 **56%** 的视图，把叶簇改成每盆三个较大的三角形。

每个三角形只保留三个角：一处向外的尖端、一处展开的侧角、一个伸进花盆上缘的下端。左盆三片向左上、中上和右上张开，右盆也用三个不同朝向的尖角。叶片统一填苔绿，共六个对象。

这里选择把轮廓做大，而不是保留难操作的小折线。三片叶子叠放后，仍然有高低与伸展方向，缩小看也能认出植物。

## 花盆位置不准，用几何表单只改 Y

两只花盆都是上宽下窄的陶红四边形。画完叶簇后，花盆与叶根的承接位置需要校正。本次通过“图层面板 → 对象树”分别选中花盆，再进“对象属性 → 属性类别 → 几何”，把位置基准点设为左上。

保持横向位置和尺寸不变，只改 **Y**：左盆从 **782.07** 改到 **695.67**，上移 **86.4 px**；右盆从 **755.47** 改到 **706.87**，上移 **48.6 px**。输入后点击“应用位置与尺寸”，让盆体接住叶片下端。

这是移动已有对象，不需要重画花盆。旁边有多个同色对象时，从对象树精确选取，再核对当前属性，比较容易避免误把棚或门板一起挪走。

## 四块铺石，留出足够的节点间距

铺石最后画，使用白色菱形，每块约 **125 px 宽、75 px 高**。先放左、上、右、下四个角，再回到起点闭合；四块分别落在门前左右空地，保持与地坪相近的斜边方向。

本次把铺石做得比最初的小草图更大，四角在屏幕上能分开，闭合也更可靠。它们不是矩形旋转出的装饰线，而是四个独立、可选择的白色面。

## 清理试样，保存，再导出完整画布

制作过程中，从对象树清理无面积短线与未闭合试样。小路径失败时，不要只看它有没有颜色；也要确认它是不是自己需要的那块完整形状。

先保存可编辑原稿，再走 **分享 → PNG → 完整画布 → 1× → 白色背景 → 导出 PNG**。本页成图直接使用应用实际生成的 **1080 × 1080 px PNG**，没有在应用外重绘。原稿另行保留，后面改某一块玻璃、叶片或铺石时，可以继续选择原对象编辑。

本次导出 PNG 后又清掉了一条没有可见面积、没有描边的双节点试画线，前后画面没有可见变化；最终保存的原稿保留 **29 个闭合路径**。

## Duo 的四个姿态，按真实窗口分步对照

作品完成后，实际切换 **Open → Partially Open → Closed → Open** 并采集设备窗口。半展开时可以看到底部内嵌的图层与对象树；合拢后是更紧凑的横向布局，随后再回到展开视图。

这部分采用实际姿态切换后的稳定窗口采样，按步骤剪接。切换中有黑屏与等待，因此不把它称作连续铰链运动录像。姿态改变的是编辑视口，原稿仍保留 1080 × 1080 px 和同一组对象。

想先练同样的操作，可以看[钢笔路径与曲线](<https://allluckly.cn/guides/vectorpaint-pen-curves/>)、[填充与描边](<https://allluckly.cn/guides/vectorpaint-fill-stroke/>)和[等距盒子练习](<https://allluckly.cn/guides/vectorpaint-isometric-box/>)；PNG 与可编辑原稿的用途见[导出格式选择](<https://allluckly.cn/guides/vectorpaint-export-formats/>)。