前言
在前端开发中，我们经常需要生成一些简单的手绘风格图形，比如流程图、关系图等等。手动绘制这些图形不仅费时费力，而且难以保证绘制的质量和风格一致。因此，开发一个自动化生成手绘图形的工具就成为了必要的需求。
在 npm 仓库中，有一款名为 "roughly" 的包能够实现这一需求，它可以快速地自动生成手绘图形，而且支持多种图形类型和样式自定义，使用起来非常方便。
本篇文章将介绍如何使用 "roughly" 包来生成手绘图形，并提供一些示例代码和一些使用技巧，以供参考。
安装
npm install roughly
基础用法
使用 "roughly" 包生成手绘图形非常简单，只需要引入 RoughCanvas 类，并调用其 draw 方法即可：
import { RoughCanvas } from "roughly";
const canvas = document.getElementById("canvas");
const rc = new RoughCanvas(canvas);
rc.draw("circle", 50, 50, 80, { fill: "red", roughness: 2 });上述代码中，我们首先引入了 RoughCanvas 类，接着创建了一个 Canvas 元素和一个 RoughCanvas 实例，最后调用 draw 方法来绘制一个圆形。
draw 方法的参数如下：
shapeType：要绘制的图形类型，比如 "circle"、"rectangle"、"line" 等等。x、y、width、height：图形的位置和大小，具体根据所绘制的图形而定。options：图形的样式选项，其中包括 fill、stroke、fillStyle、strokeStyle、strokeWidth、roughness 等等。
需要注意的是，draw 方法返回的是一个 Promise 对象，所以我们可以使用 await 来获取绘制结果。
图形类型
在 "roughly" 包中，我们可以绘制多种类型的手绘图形，包括：
- circle：圆形
- rectangle：矩形
- ellipse：椭圆形
- line：直线
- arc：弧形
- curve：曲线
- polygon：多边形
- path：路径
示例代码如下：
-- -------------------- ---- -------
----------------- --- --- --- - ----- ------ ---------- - ---
-------------------- ---- ---- ---- --- - ----- ------- ---------- - ---
------------------ ---- ---- ---- --- - ----- -------- ---------- - ---
--------------- ---- ---- ---- ---- - ------- -------- ------------ -- ---------- - ---
-------------- ---- ---- ---- --- ------- - -- -- - ------- --------- ---------- -- ---
--------
--------
-
----- -----
----- -----
----- -----
----- -----
--
- ------- ------- ---------- -- -
--
--------
----------
-
----- -----
----- -----
----- -----
----- -----
----- -----
--
- ----- --------- ---------- -- -
--
--------
-------
----- --- ---- --- --- - --- --- ---- ---- ---- --- ---
- ------- --------- ---------- -- -
--样式选项
在 "roughly" 包中，我们可以对图形的样式进行一些自定义设置，包括图形的填充色、边框颜色、边框宽度、填充样式、边框样式、草图粗糙度等等。
示例代码如下：
-- -------------------- ---- -------
----------------- --- --- --- - ----- ------ ------- ------- ------------ -- ---------- - ---
-------------------- ---- ---- ---- --- - ----- ------- ------- -------- ---------- - ---
------------------ ---- ---- ---- --- - ----- -------- ------- ------ ---------- - ---
--------
-------
----
----
----
----
- ------- -------- ------------ -- ------------ --------- ---------- - -
--
-------------- ---- ---- ---- --- ------- - -- -- -
------- ---------
---------- ---------
------------ --
---------- ---
---
--------
--------
-
----- -----
----- -----
----- -----
----- -----
--
- ------- ------- ---------- --------- ------------ -- ---------- -- -
--
--------
----------
-
----- -----
----- -----
----- -----
----- -----
----- -----
--
- ----- --------- ------- ------- ---------- -------------- ------------ -- ---------- -- -
--
--------
-------
----- --- ---- --- --- - --- --- ---- ---- ---- --- ---
- ------- --------- --------------- ---- ---- ------------ -- ---------- -- -
--进阶用法
在 "roughly" 包中，我们还可以实现更加复杂的形状和更丰富的图形绘制，比如：
图形组合
我们可以把多个图形组合在一起，形成复杂的图形。这里我们可以使用 Canvas 的 save 和 restore 方法来保存和恢复 Canvas 上下文状态。
示例代码如下：
rc.save();
rc.draw("ellipse", 100, 100, 80, 50, { fill: "red", roughness: 2 });
rc.draw("ellipse", 100, 100, 50, 30, { fill: "blue", roughness: 4 });
rc.draw("ellipse", 100, 100, 20, 10, { fill: "green", roughness: 6 });
rc.restore();渐变填充
我们可以为图形设置渐变填充效果。这里我们可以使用 Canvas 的 createLinearGradient 和 createRadialGradient 方法来创建渐变对象，然后调用 fillStyle 或 strokeStyle 来应用渐变效果。
示例代码如下：
-- -------------------- ---- ------- ----- --------- - -------------------------------- ---- -- ---- ---- ----- ------------------------- ------- --------------------------- --------- ------------------------- -------- ----------------- ---- ---- ---- - ---------- ---------- ---------- - --- ----- --------- - -------------------------------- ---- ---- ----- ------------------------- ---------- --------------------------- ---------- ------------------------- ---------- -------------------- ---- ---- ---- ---- - ---------- ---------- ---------- - ---
文本绘制
我们还可以使用 "roughly" 包在 Canvas 上绘制文字。这里我们可以使用 Canvas 的 fillText 和 strokeText 方法来绘制。
示例代码如下：
rc.drawText("Hello", 100, 100, { fill: "red", font: "48px sans-serif", roughness: 2 });
rc.drawText("World", 200, 200, { stroke: "blue", font: "48px sans-serif", roughness: 4 });SVG 转换
"roughly" 包还可以将 SVG 转换为 Canvas 绘制命令，从而在 Canvas 上绘制对应的图形。这里我们可以使用 RoughSVG 类来实现。
示例代码如下：
-- -------------------- ---- ------- ------ - ------------ -------- - ---- ---------- ----- --- - ----- ------------ --- --- ---------- ------- ------- ----------- ------------ ---------- ----- -- - --- -------------------- ----- -- - --- ------------- -------- ------------------- -- - ----------------- ----------- ------------ ---
结语
通过本文的介绍，相信大家已经能够使用 "roughly" 包来生成手绘风格图形了。当然，这只是 "roughly" 包的基础用法，如果要实现更加复杂的图形和效果，还需要花费更多的时间和精力去实践。
希望本文能够对大家有所帮助，为前端开发工作提供一些想法和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005626781e8991b448dfaf8