lanyuanxiaoyao
124ef0e5ce
将 README.md 拆分为多个专题文档，减少认知负荷： - 用户文档迁移到 docs/ (用户指南、元素、模板、参考等) - 开发文档迁移到 docs/development/ (架构、模块、规范) - README.md 精简至 ~290 行，仅保留概览和导航 - 删除 README_DEV.md，内容已迁移 - 归档 OpenSpec 变更 refactor-docs-progressive-disclosure
101 lines
1.8 KiB
Markdown
101 lines
1.8 KiB
Markdown
# 图片元素
|
|
|
|
图片元素用于在幻灯片中插入图片。
|
|
|
|
## 基本语法
|
|
|
|
```yaml
|
|
- type: image
|
|
box: [x, y, width, height]
|
|
src: "path/to/image.png" # 支持相对路径和绝对路径
|
|
```
|
|
|
|
## 属性
|
|
|
|
| 属性 | 类型 | 必需 | 说明 |
|
|
|------|------|------|------|
|
|
| `type` | 字符串 | 是 | 必须为 "image" |
|
|
| `box` | 数组 | 是 | 位置和尺寸 [x, y, width, height]（英寸） |
|
|
| `src` | 字符串 | 是 | 图片文件路径 |
|
|
|
|
## 图片路径
|
|
|
|
支持相对路径和绝对路径：
|
|
|
|
```yaml
|
|
# 相对路径（相对于 YAML 文件位置）
|
|
- type: image
|
|
src: "images/logo.png"
|
|
box: [1, 1, 2, 2]
|
|
|
|
# 绝对路径
|
|
- type: image
|
|
src: "/Users/username/pictures/photo.jpg"
|
|
box: [1, 1, 4, 3]
|
|
```
|
|
|
|
## 示例
|
|
|
|
### 基本图片
|
|
|
|
```yaml
|
|
slides:
|
|
- elements:
|
|
- type: image
|
|
src: "photo.jpg"
|
|
box: [1, 1, 4, 3]
|
|
```
|
|
|
|
### 多个图片
|
|
|
|
```yaml
|
|
slides:
|
|
- elements:
|
|
- type: image
|
|
src: "logo.png"
|
|
box: [0.5, 0.5, 2, 2]
|
|
|
|
- type: image
|
|
src: "banner.jpg"
|
|
box: [3, 0.5, 6.5, 2]
|
|
```
|
|
|
|
### 与文本组合
|
|
|
|
```yaml
|
|
slides:
|
|
- elements:
|
|
- type: text
|
|
content: "项目 Logo"
|
|
box: [1, 3, 3, 0.5]
|
|
font:
|
|
size: 24
|
|
align: center
|
|
|
|
- type: image
|
|
src: "logo.png"
|
|
box: [1, 3.5, 3, 3]
|
|
```
|
|
|
|
## 支持的格式
|
|
|
|
支持常见图片格式，包括：
|
|
- PNG (.png)
|
|
- JPEG (.jpg, .jpeg)
|
|
- GIF (.gif)
|
|
- BMP (.bmp)
|
|
- 其他 PowerPoint 支持的格式
|
|
|
|
## 注意事项
|
|
|
|
- 图片路径相对于 YAML 文件位置
|
|
- 建议使用高分辨率图片以获得最佳显示效果
|
|
- 图片会按照 box 指定的尺寸进行缩放
|
|
|
|
## 相关文档
|
|
|
|
- [坐标系统](../reference/coordinates.md) - 位置和尺寸单位
|
|
- [形状元素](shape.md) - 几何形状绘制
|
|
|
|
[返回文档索引](../README.md)
|