tldraw：创建无限画布体验的白板软件

在你日常工作中，是否常常需要使用白板来进行团队协作？不妨试试 tldraw 吧！这是一个专为 Web 开发的无限画布体验项目，基于 React 库开发，能够帮助你轻松构建数字白板，实现各种绘图、设计和演示的功能。今天，我就来带大家了解一下这个神奇的工具。

github_practical_tldraw_1

什么是 tldraw？

tldraw 是由 tldraw Inc. 团队开发的一个开源项目，已经获得了 34K 的 Star。在GitHub上，你可以找到它的公开 monorepo。这个项目的主要目标是为 Web 应用创建无限画布体验，非常适合用于协作白板、设计工具和演示应用。

github_practical_tldraw_2

进阶使用

tldraw不仅仅是一个画布，它提供了丰富的配置和扩展功能。

相机选项

你可以使用cameraOptions属性来设置相机的约束、缩放行为等选项。

github_practical_tldraw_3

自定义渲染器

虽然tldraw不完全支持自定义渲染器，但你可以参考官方示例，尝试实现自己的渲染器。

github_practical_tldraw_4

静态资源

确保预加载自定义字体和图标，以保证组件正常运行。

github_practical_tldraw_5

持久化键

通过给<Tldraw/>组件提供persistenceKey属性，可以使编辑器的数据在本地持久化存储。

github_practical_tldraw_6

只读模式

如果你希望用户只能查看内容而不能进行修改，可以使用readonly属性。

github_practical_tldraw_7

强制移动设备模式

你还可以强制编辑器UI以移动设备的模式渲染。

github_practical_tldraw_8

快速开始

要在你的React应用中添加一个tldraw画布，只需要简单的几步。

1. 安装

首先，设置一个React项目，推荐使用Vite。然后，使用以下命令安装tldraw库：

    
    npm install tldraw

2. 导入样式

创建或编辑一个名为index.css的CSS文件，并将以下内容粘贴进去：

    
    @import url("https://fonts.googleapis.com/css2?family=Inter:wght@500;700&display=swap");
@import url("tldraw/tldraw.css");

body {
  font-family: "Inter";
}

3. 渲染Tldraw组件

在你的React项目中，导入<Tldraw />组件和之前创建的index.css文件。然后，将Tldraw组件包装在一个<div>元素中，并设置样式使其全屏显示：

    
    import { Tldraw } from 'tldraw'
import './index.css'

export default function App() {
	return (
		<div style={{ position: 'fixed', inset: 0 }}>
			<Tldraw />
		</div>
	)
}

这样，你的应用中就有了一个全屏的tldraw画布。

最后嘛，tldraw真的是一个非常强大且灵活的工具，特别适合那些需要在Web上实现协作绘图和设计功能的开发者。如果你厌倦了其他受限的工具，不妨试试tldraw，或许它会带给你完全不同的体验。