feat: 新增第 2 页静物文字画
地、桌、椅与桌下暗枪构成场景,桌上竖排酒杯与烛火,右下角酒桶,右上角吊灯。
This commit is contained in:
1 parent
54235eb631
commit
b84340fac1
4 files changed
+118
-1
No files matched your search
@@ -2,7 +2,7 @@
|
||||
|
||||
一个 28 列 × 44 行的汉字文字画 Demo。黑底、每格一个汉字,空白处由淡色「天」铺满;画面包含晚霞云、落日、飞鸟、天线与城市楼群,上方以整格扣出的黑色标题框居中呈现「关于「甲子」的虚构故事」。
|
||||
|
||||
项目规划为三张类似页面,当前实现第 1 页(`page1.html`)与第 3 页(`page3.html`)。
|
||||
项目规划为三张类似页面,当前实现第 1 页(`page1.html`)、第 2 页(`page2.html`)与第 3 页(`page3.html`)。
|
||||
|
||||
## 效果概述
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
```
|
||||
.
|
||||
├─ page1.html # 第 1 页入口
|
||||
├─ page2.html # 第 2 页入口
|
||||
├─ page3.html # 第 3 页入口
|
||||
├─ pyproject.toml # uv 环境与导出依赖
|
||||
├─ uv.lock # 依赖锁定
|
||||
@@ -25,10 +26,12 @@
|
||||
│ ├─ css/
|
||||
│ │ ├─ common.css # 三页共用:字体、骨架、网格、标题框
|
||||
│ │ ├─ page1.css # 第 1 页配色
|
||||
│ │ ├─ page2.css # 第 2 页配色
|
||||
│ │ └─ page3.css # 第 3 页配色与前景标题
|
||||
│ ├─ js/
|
||||
│ │ ├─ text-scene.js # 共享文字画渲染引擎
|
||||
│ │ ├─ page1.js # 第 1 页场景数据
|
||||
│ │ ├─ page2.js # 第 2 页场景数据
|
||||
│ │ └─ page3.js # 第 3 页场景数据
|
||||
│ └─ fonts/zpix.ttf # Zpix 像素字体
|
||||
└─ references/a.html # 原始参考页
|
||||
@@ -41,6 +44,7 @@
|
||||
```bash
|
||||
python -m http.server 8000
|
||||
# 第 1 页 http://localhost:8000/page1.html
|
||||
# 第 2 页 http://localhost:8000/page2.html
|
||||
# 第 3 页 http://localhost:8000/page3.html
|
||||
```
|
||||
|
||||
@@ -49,6 +53,7 @@ python -m http.server 8000
|
||||
现有页面:
|
||||
|
||||
- `page1.html`:完整日落城市文字画,空白处铺淡色「天」。
|
||||
- `page2.html`:无「天」背景;底排「地」,其上以「桌」「椅」「枪」摆出桌子、椅子与枪。
|
||||
- `page3.html`:无「天」背景的演职员表;含 35 个演职员 nametag、电线、麻雀、草、消防栓与下半屏火山。
|
||||
|
||||
共用与专属:
|
||||
@@ -108,6 +113,10 @@ uv run playwright install chromium
|
||||
- 天线:`.ant`(深色款为 `.ant-dark`)。
|
||||
- 楼群:`.bld` 与 `.bld-1` 至 `.bld-8`。
|
||||
|
||||
### 第 2 页(assets/js/page2.js)
|
||||
|
||||
`block(x, y, w, h, text, cls)` 按矩形铺字:桌面与桌腿、靠背/座面/椅腿、枪口/枪身/握把都由若干矩形拼出,坐标按格对齐;配色见 `page2.css` 的 `.table`、`.chair`、`.gun`、`.ground`。
|
||||
|
||||
### 第 3 页(assets/js/page3.js)
|
||||
|
||||
通过 `glyphs` 数组放置任意背景字:`{ text, x, y, cls, vertical }`,坐标仍按格对齐。前景标题 `.credits` 由页面脚本追加,可在 `page3.css` 中调整字号与位置。
|
||||
|
||||
Reference in new issue
Block a user