Tldraw 实用指南 - 在线方便的画图工具

## 什么是 Tldraw？

你有没有遇到过这样的情况：

- 开会时想画个流程图，但纸笔太慢，电脑上的工具又太复杂
- 想跟同事协作讨论设计，但大家都在不同地方
- 有个产品想法，想快速画个原型，但不会代码

如果你也有这些困扰，那今天推荐的这个工具绝对能帮忙 - Tldraw。

Tldraw 是一个开源的无限画布白板工具，简单来说就是一个在线画板。

https://appstore.lazycat.cloud/#/shop/detail/wcloud.gblw.app.tldraw


## 快速上手指南

### 基础使用

商店安装之后，打开就能用，无需注册

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/a6757a02-113a-4e87-a0ef-532a7bcf3da8.png "image.png")

**基本工具：**
- 🖊️ **画笔** - 自由绘画，有手绘效果
- 📦 **形状** - 矩形、圆形、箭头等
- 📝 **文本** - 添加文字说明
- 🗒️ **便签** - 类似Post-it便签纸
- 🖼️ **图片** - 上传图片到画布
- ✋ **选择** - 选择、移动、缩放元素


![image.png](https://dl.playground.lazycat.cloud/guidelines/496/34c59340-c3fd-42d8-9962-1d7cff308fc5.png "image.png")

左侧是常规的菜单

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/80d05070-2f20-4137-878d-dce2e790b715.png "image.png")

右侧可以设置颜色、字体等

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/a57fab63-db86-4d1a-89ea-684f9549b6c2.png "image.png")

### 保存和导出

- **自动保存** - 内容会自动保存在浏览器本地
- **导出图片** - 支持PNG、SVG格式
- **导出数据** - 可以导出.tldr文件，方便备份

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/cabd2ccb-b1fa-4ab1-bce0-a3ce2d16c568.png "image.png")

Tldraw的手绘风格是它的特色，但你可以调整：
- 选中元素后，右侧面板可以调整样式
- 可以选择实线、虚线、点线
- 可以调整粗细和颜色
- 可以选择填充样式

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/74cd4d3a-436c-4fb8-b9d3-fa9f699707d9.png "image.png")

### 导出技巧

**导出高质量图片：**
1. 选中要导出的区域
2. 右键选择"Export as PNG"
3. 可以设置背景色和分辨率

**导出矢量图：**
- 选择"Export as SVG"
- 可以在其他设计软件中继续编辑

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/336db203-526b-4449-a535-3244617e33d6.png "image.png")

## VS Code集成

Tldraw还有VS Code插件，可以在编辑器中直接使用：

1. 在VS Code中搜索"tldraw"插件
2. 安装后可以创建.tldr文件
3. 直接在编辑器中画图和做笔记
4. 特别适合技术文档和设计稿

![image.png](https://dl.playground.lazycat.cloud/guidelines/496/dc7773e7-22a7-4ca7-bedb-db867292b5d2.png "image.png")
 
## 总结

Tldraw 让画图变得简单有趣，不再需要复杂的工具和繁琐的操作，想到什么就画什么。

## 相关资源

- **官方网站：** https://www.tldraw.com/
- **GitHub地址：** https://github.com/tldraw/tldraw
- **Make It Real：** https://makereal.tldraw.com/
- **开发者文档：** https://tldraw.dev/
- **VS Code插件：** 搜索"tldraw"