别再从零开始构建绘图工具：认识 js-draw，这个支持无限缩放和手写笔输入的库
发布: (2025年12月25日 GMT+8 21:29)
4 min read
原文: Dev.to
Source: Dev.to
Quick Summary
js-draw 是一个用于 JavaScript 和 TypeScript 的自由手绘库。它让用户能够在极宽的缩放范围内创建和操作绘图，支持触摸和手写笔，并提供可自定义的工具。绘图可以导出为 SVG，库还内置了协作编辑功能。
Key Takeaways
- ✅ 实际上是无限画布，缩放范围从 10⁻¹⁰× 到 10¹⁰×，实现高精度绘图。
- ✅ 强大的触摸屏和手写笔支持，包括捏合缩放、旋转捕捉，以及禁用触摸绘图的选项。
- ✅ 完全可配置的绘图工具；开发者可以添加自定义笔类型并持久化工具栏状态。
- ✅ 内置协作编辑支持，适用于实时多用户应用。
- ✅ 基于 SVG 的保存/加载，确保绘制资产的可伸缩性和互操作性。
Project Statistics
- ⭐ Stars: 244
- 🍴 Forks: 24
- ❗ Open Issues: 17
Tech Stack
- ✅ TypeScript
Overview
如果你曾尝试为 Web 应用构建严肃的绘图或标注功能，你一定了解其中的痛点：处理多种输入、在大规模下保持性能、以及实现流畅的缩放。js-draw 通过提供一个完整的高性能解决方案来解决这些问题，让开发者能够专注于业务逻辑，而不是底层的 canvas 操作。
Massive Zoom Range
该库的缩放能力大约在 10⁻¹⁰× 到 10¹⁰× 之间，实际上为你提供了一个无限画布。这对于需要极端精度的场景——技术图表、详细的教育标注或复杂的数字白板——至关重要，同时保持体验的流畅和响应。
Touch and Stylus Input
js-draw 为现代输入设备提供一流的支持。它原生处理捏合缩放和旋转手势，并包含将画布旋转锁定在整齐的 90 度增量的旋转捕捉功能。开发者还可以禁用触摸绘图，以防止手写笔用户在屏幕上放手时产生意外标记。
Customizable Tools
工具栏完全可配置：笔刷样式、颜色、尺寸、笔触平滑、自动校正等都可以通过内置界面进行调整。可以注入自定义笔类型，并且整个工具栏状态可以保存和恢复，确保跨会话的一致体验。
Collaborative Editing
除了核心绘图机制，js-draw 还提供强大的实时多用户协作支持。因为同步层已经由库处理，集成协作白板变得更加简单。
SVG Export
所有内容都可以保存为并从 SVG 子集加载，保证资产保持可伸缩且兼容其他图形工具。