如何用Rough.js与Excalidraw打造专业级手绘图表工具：完整指南
项目地址: https://gitcode.com/gh_mirrors/ro/rough Rough.js是一个强大的JavaScript库，它能让你轻松创建具有手绘风格的图形，为数据可视化和图表设计带来独特的艺术感。本文将详细介绍如何使用Rough.js结合Excalidraw，从零开始构建一个功能完备的手绘图表工具，让你的数据展示既专业又富有创意。
🎨 什么是Rough.js？
Rough.js是一个轻量级的开源库，它通过模拟手绘的不完美线条和填充效果，为Web应用添加自然、有机的视觉风格。与传统的精确图形库不同，Rough.js专注于创建具有"手工绘制"质感的图形元素，非常适合制作流程图、思维导图、原型设计等需要展现创意和个性的场景。
Rough.js的核心功能集中在src/rough.ts文件中，它提供了一套完整的API来创建各种手绘风格的基本图形，包括线条、矩形、圆形、多边形等。
🚀 快速开始：安装与基础使用
要开始使用Rough.js，首先需要将库引入到你的项目中。你可以通过npm安装：
git clone https://gitcode.com/gh_mirrors/ro/rough
cd rough
npm install
npm run build
安装完成后，你可以在HTML文件中引入Rough.js，并开始创建简单的手绘图形。以下是一个基本示例：
<canvas id="myCanvas" width="800" height="600"></canvas>
<script type="module">
import rough from './bin/rough.js';
const canvas = document.getElementById('myCanvas');
const rc = rough.canvas(canvas);
// 创建一个手绘风格的矩形
rc.rectangle(50, 50, 200, 100, {
stroke: 'blue',
strokeWidth: 2,
fill: 'rgba(0,255,0,0.2)',
fillStyle: 'hachure'
});
</script>
这段代码会在画布上创建一个蓝色边框、绿色填充的手绘风格矩形。你可以通过调整参数来改变线条粗细、颜色、填充样式等。
✨ Rough.js核心功能详解
基本图形绘制
Rough.js提供了丰富的API来绘制各种基本图形。以下是一些常用的图形绘制方法：
- 矩形：
rc.rectangle(x, y, width, height, options) - 圆形：
rc.circle(x, y, diameter, options) - 椭圆：
rc.ellipse(x, y, width, height, options) - 线条：
rc.line(x1, y1, x2, y2, options) - 多边形：
rc.polygon(points, options)
这些方法都接受一个options参数，用于自定义图形的外观。你可以设置线条颜色、粗细、填充颜色、填充样式等。
填充样式
Rough.js提供了多种填充样式，让你的图形更加丰富多彩。主要的填充样式包括：
hachure：交叉斜线填充solid：实色填充dots：点状填充cross-hatch：十字交叉填充zigzag：锯齿形填充
你可以在src/fillers/目录下找到这些填充样式的实现代码。例如，src/fillers/zigzag-filler.ts实现了锯齿形填充效果。
自定义配置
Rough.js允许你通过全局配置来调整手绘效果的整体风格。你可以设置线条的粗糙度、弯曲度、随机ness等参数，从而创建出不同风格的手绘效果。
const rc = rough.canvas(canvas, {
roughness: 2, // 线条的粗糙程度，值越大越粗糙
bowing: 1, // 线条的弯曲程度
strokeWidth: 1.5, // 默认线条宽度
curveTightness: 0 // 曲线的紧密度
});
🖌️ 与Excalidraw结合使用
Excalidraw是一个流行的手绘风格协作绘图工具，它基于Rough.js构建。将Rough.js与Excalidraw结合使用，可以创建功能更强大的手绘图表工具。
虽然本项目中没有直接包含Excalidraw的代码，但你可以通过以下步骤将Rough.js与Excalidraw集成：
- 安装Excalidraw：
npm install @excalidraw/excalidraw - 在你的应用中引入Excalidraw组件
- 使用Excalidraw的API来创建和管理手绘图形
Excalidraw提供了丰富的功能，如拖拽、缩放、旋转、对齐等，这些功能可以与Rough.js的手绘效果完美结合，打造专业级的手绘图表工具。
📝 实战示例：创建手绘风格的流程图
下面我们通过一个实例来展示如何使用Rough.js创建一个手绘风格的流程图。
<canvas id="flowchart" width="800" height="600"></canvas>
<script type="module">
import rough from './bin/rough.js';
const canvas = document.getElementById('flowchart');
const rc = rough.canvas(canvas, { roughness: 1.5 });
// 绘制开始节点
rc.rectangle(50, 50, 120, 60, { fill: 'rgba(255,255,0,0.3)', fillStyle: 'solid' });
rc.text('开始', 110, 85, { fontSize: 20 });
// 绘制处理节点
rc.rectangle(50, 150, 120, 60, { fill: 'rgba(0,255,255,0.3)', fillStyle: 'hachure' });
rc.text('处理数据', 110, 185, { fontSize: 20 });
// 绘制判断节点
rc.polygon([[50, 250], [110, 220], [170, 250], [110, 280]], { fill: 'rgba(255,0,255,0.3)', fillStyle: 'dots' });
rc.text('条件判断', 110, 255, { fontSize: 20 });
// 绘制结束节点
rc.circle(110, 380, 60, { fill: 'rgba(0,255,0,0.3)', fillStyle: 'solid' });
rc.text('结束', 110, 385, { fontSize: 20 });
// 绘制连接线
rc.line(110, 110, 110, 150, { strokeWidth: 2 });
rc.line(110, 210, 110, 235, { strokeWidth: 2 });
rc.line(170, 250, 230, 250, { strokeWidth: 2 });
rc.line(230, 250, 230, 350, { strokeWidth: 2 });
rc.line(230, 350, 110, 350, { strokeWidth: 2 });
</script>
这个示例创建了一个简单的流程图，包含开始节点、处理节点、判断节点和结束节点，并用手绘风格的线条连接它们。你可以通过调整参数来改变图形的样式，创造出独特的视觉效果。
📚 深入学习与资源
要深入学习Rough.js，你可以参考以下资源：
- 官方文档：虽然本项目中没有单独的文档文件，但你可以在README.md中找到基本的使用说明。
- 源代码：通过阅读src/目录下的源代码，你可以了解Rough.js的内部实现原理。特别是src/core.ts和src/renderer.ts文件，它们包含了核心的渲染逻辑。
- 视觉测试：visual-tests/目录下包含了大量的HTML文件，展示了Rough.js的各种功能和效果。你可以直接在浏览器中打开这些文件，查看实际效果并学习示例代码。
🎯 总结
Rough.js是一个功能强大且易于使用的手绘风格图形库，它为Web应用带来了独特的视觉体验。通过本文的介绍，你已经了解了Rough.js的基本概念、安装方法、核心功能以及如何与Excalidraw结合使用。
无论你是要创建数据可视化图表、流程图、思维导图，还是只是想为你的Web应用添加一些艺术感，Rough.js都是一个值得尝试的工具。现在就动手尝试，用Rough.js和Excalidraw打造属于你的专业级手绘图表工具吧！
希望本文对你有所帮助。如果你有任何问题或建议，欢迎在项目的Issue中提出。祝你使用愉快！
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
