1. 什么是 bonsaijs
bonsaijs 是一种基于 SVG 的绘图库，它提供了一个易于使用的 API，让开发者可以轻松地在网页上创建各种矢量图形，包括动画、交互等等。
bonsaijs 适用于前端开发中的很多场景，如动态图表展示、创意插画绘制、数据可视化等。
2. 安装和使用
安装 bonsaijs 可以使用 npm，命令如下：
npm install bonsaijs --save
安装完成后，在需要使用的 JS 文件中引入 bonsaijs：
import * as bonsai from 'bonsaijs';
3. 绘图基础
创建画布
需要先在 HTML 文件中创建画布容器，并设置好画布的宽、高属性，如下：
<div id="canvas-container" style="width: 500px; height: 500px;"></div>
然后在 JS 中获取该 DOM 容器，并根据其创建 bonsaijs 的 Stage 对象，如下：
let elt = document.querySelector('#canvas-container');
let stage = bonsai.Stage();
stage.width = elt.offsetWidth;
stage.height = elt.offsetHeight;
stage.$canvas.appendTo(elt);新增图形
bonsaijs 中最基本的绘图元素是 DisplayObject，通过创建 DisplayObject 的实例并添加到舞台中，可以实现很多类似画笔的功能。
以创建一个圆形为例，代码如下：
let circle = new bonsai.shapes.Circle(50); circle.fillColor = 'red'; circle.addTo(stage);
其中，第一行代码初始化一个 Circle 实例，传入的参数表示圆形的半径；第二行设置圆形的填充颜色；第三行将该圆添加到舞台上。
如此一来，就可以在画布上看到一个红色的圆形了。
基础动画
bonsaijs 也支持基本动画效果的实现。以一个简单的圆形放大动画为例，代码如下：
let circle = new bonsai.shapes.Circle(50);
circle.fillColor = 'red';
circle.addTo(stage);
circle.animate('1s', {
scaleX: 2,
scaleY: 2,
});其中，animate 函数的第一个参数是动画持续时间，单位可以是 s/ms，也可以省略。
第二个参数是动画的目标状态属性，这里只改变了圆形的 scaleX 和 scaleY，实现了在 1 秒内放大 2 倍的效果。
4. 深入应用
动态图表
在实际开发中，动态图表通常需要根据一定的业务逻辑动态修改图表数据或图例等属性，并且变化过程需要有过渡动画。
bonsaijs 支持这种场景的实现。以一个简单的柱状图为例，代码如下：
-- -------------------- ---- -------
--- ---- - ---- --- --- --- ----
--- --- - ------------
--- -------- - ---
--- --- - ---
--- ---- - - -- - - ---- ---- -
--- --- - --- ------------------
------ ---------
------- --
-- - - --------- - -----
-- -------------
---------- ----------
---
--------------------
----------------- -
------- --------
-- ------------ - --------
---
-该代码通过循环创建多个高度 0 的矩形，并一个个添加到舞台中。然后使用 animate 函数，将矩形高度和 y 坐标值在 1 秒内变化到数据对应的值和位置上，从而实现过渡动画。
交互动画
和动态图表类似，一些需要用户交互的场景也通常需要动画效果。bonsaijs 通过 event 模块支持对绘制元素的事件监听，从而实现交互效果。
以画板为例，代码如下：
-- -------------------- ---- -------
--- ----- - --- --------------- ------- --- ---------- ------ ---
--- --------- - ------
-------------------------- - -- -
------- - ---------
------- - ---------
----------------------
--------- - -----
---
-------------------------- - -- -
-- ----------- -
--------------------- - -- --------- -- -------- ---
-
---
------------------------ -- -- -
--------- - ------
---该代码通过监听 stage 的鼠标按下、移动和抬起事件，动态更新画笔位置，从而实现了随鼠标轨迹绘制的功能。
5. 总结
bonsaijs 是一款轻量级、易于上手且功能丰富的 SVG 绘图库。通过本文的学习，你已经可以使用 bonsaijs 创建各种 SVG 图形、动画以及交互效果了。
在实际项目中，bonsaijs 可以作为一种快速实现 SVG 前端功能的工具，特别适用于一些需要动态数据变化或用户交互的场景。但它也有其不足之处，如不支持复杂的 SVG 效果、性能不如 Canvas 等。因此，需要针对具体需求进行选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600566b181e8991b448e2f2a