Rough.js 手绘风格图形

Rough.js 以手绘涂鸦的风格渲染图形。RoughDrawing 组件允许你通过 JSON 配置定义形状，所有颜色自动跟随当前主题变化。

基础图形

矩形、圆形、椭圆和直线——绘图的基本构建块。

每个形状支持不同的 fillStyle 填充样式：hachure（默认阴影线）、cross-hatch（交叉阴影线）、zigzag（锯齿线）、solid（实心）和 dots（点阵）。roughness 参数控制手绘效果的粗糙程度——值越大越像手绘。

简易流程图

结合多个 Rough.js 图形可以创建非正式的手绘风格流程图，比起严谨的方框箭头图更加亲和。

柱状图可视化

一个手绘风格的柱状图，展示前端框架使用率对比——证明 Rough.js 同样能用轻松友好的方式呈现数据。

上面的柱状图使用不同的填充样式区分类别。实际使用中可以添加文本标签——但即便没有标签，视觉层次也很清晰。

配置参考

RoughDrawing 组件接受一个 config 属性——JSON 字符串，结构如下：

图形类型

图形选项

每个图形支持 options 对象：

• stroke — 描边颜色（使用 var(--foreground) 以适配主题）
• fill — 填充颜色（使用 var(--accent) 以使用强调色）
• fillStyle — hachure、cross-hatch、zigzag、solid、dots
• roughness — 粗糙度等级（0 = 平滑，3+ = 非常粗糙）
• strokeWidth — 描边宽度（像素）