Repolode
提交项目
quickdrawjs

quickdrawjs/quickdraw

一款 MIT 协议的无限画布白板 SDK，支持 React、React Native 和原生 JavaScript，可作为 tldraw 的免费替代。

可替代:tldraw

在 GitHub 查看官网
Star
555
Fork
45
未关闭 Issue
7
最近提交
昨天

这是什么？

Quickdraw 是一个白板 SDK，可将绘图画布嵌入网页或移动应用。它包含三个包：与框架无关的核心引擎（附带浮动工具栏）、React 组件及 hooks，以及通过 WebView 封装引擎并提供类型化桥接的 React Native 组件。核心包没有运行时依赖，以原生 ESM 形式运行于现代浏览器，无需构建步骤。

画板支持带压感的手绘笔、荧光笔、带手绘风格的形状、箭头、文字、便签、图片以及激光笔。它还提供框选与键盘微移、无限画布平移缩放、触控笔掌压拒绝、按手势合并的撤销重做、明暗主题、多种网格背景，以及 PNG 导出。

文档状态是由不可变记录组成的扁平映射，每次变更都会输出可 JSON 序列化的 diff。这些 diff 用于快照持久化、撤销历史以及通过任意传输方式实现的实时同步。项目本身不包含官方多人协作服务端。

核心功能

  • 01支持带压感的手绘笔与荧光笔
  • 02提供形状、箭头、文字、便签和图片插入
  • 03无限画布，支持平移、缩放与双指捏合
  • 04按手势合并的撤销重做，并可导出 PNG
  • 05输出可 JSON 序列化的 diff，用于持久化与实时同步

适用场景

  • 为 React 网页应用添加白板或草图功能
  • 通过 WebView 在 Expo 或 React Native 应用中嵌入绘图画布
  • 基于自有服务端同步文档 diff，构建协作式图表工具
  • 在无构建步骤的原生 HTML 页面中直接使用白板

快速上手

  1. 1

    安装 React 包

    npm install @quickdrawjs/react
  2. 2

    导入样式表并在应用中渲染 Quickdraw 组件

使用前须知

  • README 称该项目尚处早期，目前缺少官方多人协作服务器、图层、画框和富文本功能。
  • 默认会显示 'Made with Quickdraw' 水印，需要设置 watermark={false} 才能关闭。

标签

#whiteboard#canvas#drawing#react#react-native#javascript#sdk#collaboration#collaborative-whiteboard#diagram

常见问题

quickdraw 是什么？
一款 MIT 协议的无限画布白板 SDK，支持 React、React Native 和原生 JavaScript，可作为 tldraw 的免费替代。 Quickdraw 是一个白板 SDK，可将绘图画布嵌入网页或移动应用。它包含三个包：与框架无关的核心引擎（附带浮动工具栏）、React 组件及 hooks，以及通过 WebView 封装引擎并提供类型化桥接的 React Native 组件。核心包没有运行时依赖，以原生 ESM 形式运行于现代浏览器，无需构建步骤。
quickdraw 可以免费使用吗？用的什么许可证？
quickdraw 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
quickdraw 还在维护吗？
活跃维护中。quickdraw 最近一次提交是在 2026年10月18日。
quickdraw 适合用来做什么？
为 React 网页应用添加白板或草图功能 通过 WebView 在 Expo 或 React Native 应用中嵌入绘图画布 基于自有服务端同步文档 diff，构建协作式图表工具 在无构建步骤的原生 HTML 页面中直接使用白板
quickdraw 怎么安装和运行？
安装 React 包: npm install @quickdrawjs/react 导入样式表并在应用中渲染 Quickdraw 组件
在哪里获取 quickdraw？
源代码和安装说明在 GitHub 上：https://github.com/quickdrawjs/quickdraw

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目