1. 简介
在前端开发中，绘制图形是非常常见的需求。constellation-canvas是一款基于HTML5 Canvas开发的JavaScript库，可以帮助我们简单快速地绘制星系图，并可以自定义样式与行为。下面将展示如何安装和使用这个npm包。
2. 安装
在使用constellation-canvas之前，我们需要安装它。可以通过npm或者yarn来进行安装。
npm install constellation-canvas
或者
yarn add constellation-canvas
3. 使用
安装成功后，我们就可以在项目中使用这个库了。在HTML文件中添加一个canvas标签，并为它指定一个ID。
<canvas id="constellation-canvas"></canvas>
然后，在JavaScript中，引入constellation-canvas库并创建一个星系图对象。
import ConstellationCanvas from 'constellation-canvas';
const canvas = document.getElementById('constellation-canvas');
const options = {
// 配置参数
};
const constellation = new ConstellationCanvas(canvas, options);constellation-canvas构造函数的第一个参数需要传入一个canvas标签对象，第二个参数则是可选的，用于配置星系图的样式、行为等。
4.配置
接下来，我们看一下可选参数的配置方法：
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
lineWidth |
Number | 1 | 连线的宽度 |
lineColor |
String | '#cccccc' | 连线的颜色 |
dotColor |
String | '#ffffff' | 点的颜色 |
dotRadius |
Number | 1 | 点的半径 |
generate |
Boolean | true | 是否在创建时自动生成点与线 |
velocityX |
Number | 0.1 | 点的初始水平速度 |
velocityY |
Number | 0.1 | 点的初始垂直速度 |
mouseEffect |
Boolean/Object | false | 鼠标事件开关或者配置项，详见下文。 |
fullscreen |
Boolean | false | 是否全屏 |
resizeCanvas |
Boolean | false | 是否自适应窗口大小 |
enableStars |
Boolean | true | 是否绘制星星 |
starRadius |
Number | 1 | 星星的半径 |
starsAmount |
Number | 512 | 星星的总数 |
starsColor |
String | '#ffffff' | 星星的颜色 |
enableMouseColor |
Boolean | false | 是否开启鼠标悬停点亮 |
mouseStarColor |
String | '#ffffff' | 鼠标悬停时亮起的星星颜色 |
disableContextMenu |
Boolean | false | 是否禁用鼠标右键菜单 |
dotSize |
Array | [1, 5] |
创建随机数点大小范围，第一个值是最小半径，第二个是最大半径 |
其中，mouseEffect选项需要额外的配置项，示例代码如下：
-- -------------------- ---- ------- ----- ----------------- - - -- --- -------- ----- --------- ---------- ---------- ---------- --------- ---- -- ----- ------- - - ------------ ------------------ --
具体来说，mouseEffect对象有以下可选项：
| 属性名 | 类型 | 说明 |
|---|---|---|
enabled |
Boolean | 是否开启鼠标事件效果 |
dotColor |
String | 鼠标靠近时的点的颜色 |
lineColor |
String | 鼠标靠近时的连线的颜色 |
distance |
Number | 鼠标靠近点的距离，单位为像素。默认为100。如果鼠标离指定距离以上，则效果的开销将很小。 |
5. 方法
constellation-canvas提供了几个方法，可以用于添加、删除、更新节点，以及控制星系图的动画。
5.1 添加节点
可以使用addNode()方法来添加节点。该方法会返回添加的节点的id，可以用于删除、更新该节点。
const node1 = constellation.addNode(); const node2 = constellation.addNode();
这样就添加了两个节点。
5.2 更新节点
使用updateNode()方法来更新节点的属性。
const node = constellation.addNode();
const nodeId = node.id;
const updateData = {
x: 100,
y: 100,
};
constellation.updateNode(nodeId, updateData);这样就更新了节点的坐标。
5.3 删除节点
使用removeNode()方法来删除节点。需要输入节点的id作为参数。
const node = constellation.addNode(); const nodeId = node.id; constellation.removeNode(nodeId);
这样就删除了一个节点。
5.4 动画
使用play()方法来开始动画，使用stop()方法来停止动画。
constellation.play();
constellation.stop();
6. 简单示例
以下是一个简单的使用示例，具有鼠标事件效果和自适应窗口大小等特性。
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
-------------------------------------
-------
----- ---- -
------- --
-------- --
------- -----
------ -----
--------- -------
-
------- -
------ -----
------- -----
-
--------
-------
------
------- ---------------------
------- --------------
------ ------------------- ---- -----------------------
----- ------ - ----------------------------------
----- ------- - -
------------ -
-------- -----
--
------------- -----
----------- -----
--
----- ------------- - --- --------------------------- ---------
---------
-------
-------7. 总结
经过以上的学习，我们已经能够用npm包 constellation-canvas来快速绘制星系图，并自定义它的样式和行为。如果读者有需要这方面的需求，这个npm包会是您的不错选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005580481e8991b448d5276