tldraw - 30K Star的开源白板工具
tldraw,是由英国开发者、交互设计师Steve Ruiz开发的。可以通过直接访问tldraw.com使用,也可以自行托管。目前在Github上有30K star。
安装
# 创建React应用 npx create-react-app tldraw-demo # 进入目录 cd tldraw-demo # npm安装tldraw npm install @tldraw/tldraw@beta
修改src/App.js
文件为:
import { Tldraw } from '@tldraw/tldraw' import '@tldraw/tldraw/tldraw.css' export default function () { return ( <div style={{ position: 'fixed', inset: 0 }}> <Tldraw /> </div> ) }
npm start
启动,通过浏览器打开:http://your-ip:3000
介绍
- 菜单栏:左上角是菜单栏,提供页面新建/重命名、撤销、重做、删除、复制、多种对齐方式等功能,对齐方式这里跟PPT、原型设计软件的对齐功能类似;文件导出,支持导出为svg、png、json格式,官方网址中还支持保存为自有格式tldr;切换夜间模式等等
- 属性栏:可以选择颜色、透明度、填充类型、边框类型、设置边框大小/文字大小、文字对齐方式
- 工具栏:除了常用的功能外,tldraw还提供了便签功能、媒体图片功能、框架、激光笔等功能;所有图形都可双击后打开文字输入功能,图形样式可以直接在工具栏中修改为其他图形,在图形上右键支持复制、锁定、排序等等功能
- 其他:官方网址的右上角还提供了共享编辑功能,有不超过三十人的限制