tldraw - 30K Star的开源白板工具

tldraw,是由英国开发者、交互设计师Steve Ruiz开发的。可以通过直接访问tldraw.com使用,也可以自行托管。目前在Github上有30K star。

视频介绍https://www.bilibili.com/video/BV1R94y1N7KT/

# 创建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还提供了便签功能、媒体图片功能、框架、激光笔等功能;所有图形都可双击后打开文字输入功能,图形样式可以直接在工具栏中修改为其他图形,在图形上右键支持复制、锁定、排序等等功能
  • 其他:官方网址的右上角还提供了共享编辑功能,有不超过三十人的限制
  • web-software/tldraw.txt
  • 最后更改: 2024/01/31 12:29
  • ossdate