在前端开发中，很多时候需要绘制一些图形或者展示一些弹窗等。这时候，我们可以使用 @tangential/drawer 这个 npm 包来帮助我们快速绘制出我们所需的图形。
安装
首先，我们需要使用 npm 来安装这个包。在命令行中输入以下命令：
--- ------- ------------------
使用
引入包：
------ ---------------- ---- ---------------------
创建画布
我们需要先创建一个画布，才能在上面绘画。创建画布需要传入一个 DOM 节点。
----- ------ - ---------------------------------- ----- ------ - --- -------------------------
绘制图形
线
绘制一条线：
----------------- ----- - -- --- -- -- -- --- - -- ---- -- --- -- ------------ ------ ---------- -- ---
矩形
绘制一个矩形：
----------------- -- --- -- --- ------ ---- ------- ---- ---------- -------- ---------- -- ---
圆
绘制一个圆：
------------------- -- ---- -- ---- -- --- ---------- ------- ---------- -- ---
弧线
绘制一条弧线：
---------------- -- ---- -- ---- -- --- ----------- -- --------- ------- - -- ---------- --------- ---------- -- ---
文本
绘制一行文本：
----------------- ----- ------- ------- -- --- -- --- ---------- -------- ----- ----- ------------ ---
清除画布
清除画布上的所有图形：
---------------
意义
@tangential/drawer 这个包可以帮助我们更快速、更简单地绘制出我们所需的图形。使用起来也很方便，代码简洁。我们可以在项目中使用这个包来为用户呈现更好的交互效果，提高用户的体验感受。
示例代码
下面是一个完整的示例：
------ ---------------- ---- --------------------- ----- ------ - ---------------------------------- ----- ------ - --- ------------------------- ----------------- ----- - -- --- -- -- -- --- - -- ---- -- --- -- ------------ ------ ---------- -- --- ----------------- -- --- -- --- ------ ---- ------- ---- ---------- -------- ---------- -- --- ------------------- -- ---- -- ---- -- --- ---------- ------- ---------- -- --- ---------------- -- ---- -- ---- -- --- ----------- -- --------- ------- - -- ---------- --------- ---------- -- --- ----------------- ----- ------- ------- -- --- -- --- ---------- -------- ----- ----- ------------ --- ---------------
你可以将这段代码复制到你的项目中并运行。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6005581d81e8991b448d5470