tldraw 是一个免费开源的虚拟白板工具，它提供了一个无限大的画布，用户可以在上面自由地绘制草图、图表、流程图等。它的目标是提供一个简单易用、功能强大且支持实时协作的在线绘图体验。
特性
- tldraw 画布及其上的所有内容都是独立的 React 组件，使用常规的 HTML 和 CSS 渲染。如果你能在网页上做到的，现在也能在画布上做到。
- 创建、编辑和操作数千个对象，包括图像、互动组件和嵌入内容。高度优化，适用于桌面、平板和移动设备的性能。
- 通过 tldraw sync 实现实时协作，或使用自己的后端提供共享体验。内置支持协同编辑、实时光标、视口跟随和光标聊天。
- 将图像、视频，甚至其他网站拖放到画布上。粘贴网址以创建互动书签。导出图像和数据。
- 创建自定义元素、工具、交互和用户界面。使用运行时 Editor API 控制画布。
安装
要使用 tldraw SDK，首先安装 tldraw 包：
npm i tldraw然后在任何 React 组件中导入并使用 Tldraw 组件。
import { Tldraw } from 'tldraw'
import 'tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}包装器
确保 Tldraw 组件被包装在一个有明确大小的父容器中。Tldraw 的高度和宽度设置为 100%，因此它会填满其父容器。
CSS
除了 Tldraw 组件本身外，你还应该从 tldraw 包中导入 tldraw.css 文件。
import 'tldraw/tldraw.css'你也可以使用 @import 语法将此文件导入到另一个 CSS 文件中。
@import url('tldraw/tldraw.css');如果你想深度定制 tldraw 的外观，可以将 tldraw.css 文件复制到一个新的 CSS 文件中，进行修改后再导入。
字体
我们还使用 Inter 作为默认的 tldraw 字体。你可以按自己喜欢的方式导入这个字体（或使用其他字体！），但我们使用的是来自 Google Fonts 的 CSS 导入：
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap');HTML
如果你在全屏应用中使用 Tldraw 组件，可能还需要更新 index.html 中的 meta viewport 元素，如下所示。
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />这可能对 Tldraw 正常运行不是至关重要，但如果设置了这些 viewport 选项，一些功能（如安全区域定位）将能够正常工作。
