大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家细数 2024 年最火的几个白板应用。话不多说，直接进入正题！

excalidraw

excalidraw 是一款开源的虚拟手绘风格白板， 支持多人协作和端到端加密。

Excalidraw 编辑器（npm 包）支持以下核心特性：

• 免费且开源
• 无限的、基于画布的白板
• ??类似手绘的风格
• 黑暗模式
• ?可定制
• 图片支持
• 形状库支持
• 本地化（i18n）支持
• ? 导出为 PNG、SVG 和剪贴板
• 开放格式 - 将绘图导出为 .excalidraw json 文件
• ?? 多种工具 - 矩形、圆形、菱形、箭头、线条、自由绘制、橡皮擦
• ?? 箭头绑定和标记箭头
• 支持 撤消 / 重做、 缩放和平移支持

excalidraw.com 上托管的应用程序是用户可以使用 Excalidraw 构建的内容的最小 demo，其源代码也是该存储库的一部分，并且该应用程序具有以下功能：

• PWA 支持（离线工作）
• 实时协作
• 端到端加密
• 本地优先支持（自动保存到浏览器）
• 可共享链接（导出到可以与其他人共享的只读链接）

开发者可以通过以下说明将 Excalidraw 集成到自己的 React 应用程序：

npm install react react-dom @excalidraw/excalidraw
// 或者 yarn
yarn add react react-dom @excalidraw/excalidraw

目前 Excalidraw 在 Github 通过 MIT 协议开源，有超过 66.8k 的 star、6k 的 fork、代码贡献者 300+、妥妥的前端顶级开源项目。

tldraw

开发者可以使用 Tldraw React 组件在应用程序中嵌入功能齐全且可扩展的白板。同时，对于多人白板，开发者还可以将组件插入选择的协作后端。

用户可以使用编辑器 API 来创建、更新和删除形状、控制相机或执行其他任何操作；也可以使用自己的自定义形状和自定义工具来扩展 tldraw；甚至使用用户界面覆盖来更改菜单和工具栏的内容，或者隐藏 UI 并将其替换为自己的 UI。

如果想更深入 tldraw，可以使用 TldrawEditor 组件作为更小的引擎，而无需默认的 tldraw 形状或用户界面。tldraw 和 Excalidraw 的最大的区别是，后者 Excalidraw 渲染到 HTML Canvas，而 tldraw 渲染到常规 DOM 树。

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

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

目前 tldraw 在 Github 上开源，有超过 30.9k 的 star、1k 的 fork、代码贡献者 150+、妥妥的前端顶级开源项目。

drawio

draw.io 是用于构建图表应用程序的技术堆栈，也是世界上使用最广泛的基于浏览器的终端用户图表软件。

draw.io 是 JGraph Ltd 和 draw.io AG 的注册商标。 JGraph Ltd 是一家在英国注册的公司，draw.io AG 是一家在瑞士注册的公司。 这些公司共同开发并拥有该软件，运营 diagrams.net 和 draw.io 网站，并拥有 diagrams.net 和 draw.io 品牌。

本质上，draw.io 项目是一个可配置的图表 / 白板可视化应用程序。

draw.io 具有以下特点：

• 支持分享：不用担心许可证或平台就可以工作。
• 强大的功能：与共享光标实时协作， draw.io 拥有用户对专业绘图工具所期望的一切。
• 隐私第一：将数据存储在任何用户想要的地方，官方无法访问该数据。

除了运行该项目之外，还在 https://app.diagrams.net 上运行图表界面的生产级部署。

目前 drawio 在 Github 通过 Apache-2.0 协议开源，有超过 37.6k 的 star、7.2k 的 fork、代码贡献者 300+、妥妥的前端顶级开源项目。

konva

Konva 是一个 HTML5 Canvas JavaScript 框架，支持桌面和移动应用程序的高性能动画、过渡、节点嵌套、分层、过滤、缓存、事件处理等等。

开发者可以将事物绘制到舞台上，向其添加事件侦听器、移动、缩放以及独立于其他形状旋转以支持高性能动画，即使应用程序使用数千个形状也是如此。

Konva 适用于所有现代移动和桌面浏览器，浏览器需要能够运行 ES2015 规范中的 javascript 代码。 对于较旧的浏览器，可能需要 polyfill 来弥补缺失的功能。

目前 Konva 不能直接在 IE11 中运行。 为了让它工作，只需要提供一些 polyfill，例如 Array.prototype.find、String.prototype.trimLeft、String.prototype.trimRight、Array.from。

import Konva from 'konva';

const stage = new Konva.Stage({
  width: 500,
  height: 500,
});
// then all regular Konva code will work

目前 konva 在 Github 通过 MIT 协议开源，有超过 10.4k 的 star、1k 的 fork、依赖项目量 48k、代码贡献者 180+、妥妥的前端优质开源项目。

perfect-freehand

perfect-freehand 用于绘制完美的压力感应徒手线条，支持 Figma Plugin、Flutter / Dart、 Python 等。

perfect-freehand 包导出一个名为 getStroke 的函数，该函数将根据点数组生成多边形的点。为了完成这项工作，getStroke 首先根据输入点（灰色）创建一组样条点（红色），然后创建轮廓点（蓝色）。 开发者还可以使用喜欢的技术以任何喜欢的方式渲染结果。

import {getStroke} from 'perfect-freehand'

const inputPoints = [
  [0, 0],
  [10, 5],
  [20, 8],
  // ...
]

const outlinePoints = getStroke(inputPoints)

目前 perfect-freehand 在 Github 通过 MIT 协议开源，有超过 4.2k 的 star、1k 的 fork、依赖项目量 4k、代码贡献者 30+、妥妥的前端优质开源项目。

本文总结

本文主要和大家介绍 2024 年最火的几个白板应用，包括：excalidraw、tldraw、drawio、konva、perfect-freehand。因为篇幅问题，关于每一个白板应用的只是做了一个简短的介绍，但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。如果大家有什么疑问欢迎在评论区留言。

参考资料

https://github.com/excalidraw/excalidraw

https://github.com/tldraw/tldraw

https://www.youtube.com/watch?v=Lj9QZOPPy3I

https://github.com/jgraph/drawio

https://www.drawio.com/

https://www.youtube.com/watch?app=desktop&v=WbPhV1dyva4