4.0 KiB
tldraw
欢迎访问 tldraw 的公共单库仓库 tldraw。
什么是 tldraw?
tldraw 是一个可协作的数字白板,可在 tldraw.com 上使用。其编辑器、用户界面和其他底层库是开源的,并且在此仓库中提供。它们还通过 npm 分发。您可以使用 tldraw 为您的产品创建一个可插入的白板,或者以此为基础构建自己的无限画布应用程序。
访问 tldraw.dev 以获取更多信息。
注意 本仓库包含 tldraw 当前版本的源代码。您可以在这里找到原始版本的源代码 here。
安装与使用
要了解如何在您的 React 应用程序中使用 tldraw,请遵循我们的指南 here 或查看 examples sandbox。
import { Tldraw } from '@tldraw/tldraw'
import '@tldraw/tldraw/tldraw.css'
export default function () {
return (
<div style={{ position: 'fixed', inset: 0 }}>
<Tldraw />
</div>
)
}
本地开发
要运行本地开发服务器,首先克隆此仓库。
安装依赖:
yarn
启动本地开发服务器:
yarn dev
在 localhost:5420 打开示例项目。
示例
我们的开发服务器包含多个示例,展示了您如何自定义 tldraw 或使用其 API 的不同方法。每个示例都位于 apps/examples 文件夹中。
- 例如:在基本示例中使用
localhost:5420。 - 示例:
localhost:5420/api用于 API 示例。
要了解更多关于使用 tldraw 的信息,请访问我们的文档:docs。
关于此仓库
顶层布局
这个仓库的内容分为四个主要部分:
/apps包含我们的应用程序源代码/packages包含我们的公共包源代码/scripts包含用于构建和发布的脚本/assets包含应用程序依赖的图标和翻译/docs包含我们 docs 站点 tldraw.dev 的内容
应用程序
examples: 我们的本地开发 / 示例项目vscode: 我们的 Visual Studio Code 扩展
Packages
assets: 一个用于处理 tldraw 字体和翻译的库editor: tldraw 编辑器state: 一个信号库,也被称为 signiastore: 一个内存中的响应式数据库tldraw: tldraw 主包,包含编辑器和 UItlschema: 形状定义和迁移utils: 其他库共享的基础数据工具validate: 用于运行时验证的验证库
社区
有问题、评论或反馈?加入我们的 discord 或 发起讨论 。
分发
您可以在 npm 上找到 tldraw 这里 。
目前,tldraw 包处于测试版。我们还提供了一个 Canary 版本,该版本始终与本仓库的主要分支保持最新。
许可证
本仓库中各种应用程序和包的源代码(以及我们的 2.0 及以上版本的分发和发布)目前采用 Apache-2.0 许可证。这些许可条款将在我们即将发布的 2.0 版本中发生变化。如果您计划在商业产品中使用 tldraw,请联系 hello@tldraw.com。
贡献
联系
在 Twitter 上关注我们 @tldraw 或发送邮件至 hello@tldraw.com。您还可以加入我们的 Discord 获取快速帮助和支持。
