使用 rough.js 支持手绘图表
在信息图表、教学材料、地图和报告中,通常会采用更轻松随意的形状、填充和线条风格,以使图表不那么枯燥乏味。这种粗犷的风格增加了手绘阴影、粗略的轮廓和连接线,以及手写文本标签。
我们花了几个小时将rough.js集成到我们现有的、相当有限的漫画风格中,结果非常实用。
注意:此粗体样式在 13.3.1 版本及更高版本中可用。
应用粗犷风格
选择一个或多个要进行粗糙化处理的形状和连接器。
在右侧的格式面板中,单击“草图”将粗略样式应用于选定的形状、标签和连接线。

使用漫画风格
粗略的草图风格看起来更像是手绘示意图。使用漫画风格可以产生更微妙的效果。
选择要应用漫画风格的形状和连接线。
在格式面板的“样式”选项卡中,单击“属性”。
在底部,将“草图样式”下拉菜单更改为“漫画”。

更改属性以自定义草图样式
您还可以更改许多其他属性来自定义草图样式。请注意,并非所有这些属性都适用于您选择的样式,它们可能适用于其他样式。
单击形状或连接线,然后在右侧格式面板的“样式”选项卡中展开“属性”部分。最常用的属性如下。
抖动- 边框、连接线和填充颜色绘制的粗糙程度或随机程度。
填充粗细- 设置用于在形状中绘制填充颜色的“画笔”的宽度。
阴影线间距- 设置绘制的填充线之间的距离。
阴影线角度- 设置绘制的填充线的方向。或者,也可以使用“方向”形状属性更改角度。
禁用多次描边- 在绘制形状或连接线的边框时,仅使用“钢笔”一次描边。
禁用多次描边填充- 仅使用“钢笔”在形状中绘制一次填充颜色。
素描风格- 可在粗略素描风格和漫画素描风格之间进行选择。

更改整个图表的样式
您可以使用预设样式之一来设置新的全局样式,而无需选择形状和连接器并单独应用样式。
确保图表中没有任何内容被选中,然后单击右侧格式面板中的“样式”选项卡。
选择您想要使用的样式设置。使用预设样式可以更改形状、边框、文本、连接线和绘图画布的颜色。使用复选框可以快速更改其他样式设置:
素描采用粗略的风格。
圆角处理使形状的边角变得圆润。
弯曲将连接器样式更改为弯曲。
注意:您只会看到适用于所选形状的样式选项。

使用rough=1URL 参数
或者,将其添加rough=1为 URL 参数,使整个图表都应用该样式。例如,在使用免费的 draw.io 在线图表编辑器时:
这种粗略的风格可以让流程图在培训和入职材料中不那么令人生畏。
