Canvas系列教程（N）绘制组织关系图

WebGIS小智

于 2023-01-29 01:26:48 发布

阅读量985

点赞数 1

分类专栏： Canvas专题讲解文章标签： javascript html canvas 组织关系图 js图表

本文链接：https://blog.csdn.net/lz5211314121/article/details/128783817

版权

Canvas专题讲解专栏收录该内容

10 篇文章 ¥29.90 ¥99.00

订阅专栏

超级会员免费看

本文介绍了如何使用JavaScript和Canvas自定义绘制组织关系图。由于现有的图表库使用不便且不支持自定义，作者通过创建一个类，实现了矩形、线条和文字的绘制，并通过递归方法渲染图形。文章详细讲解了矩形、线条和文字的绘制方法，以及如何确定父节点和子节点的位置，以保持图形居中和间隙均匀。最后，提供了案例的源代码和运行效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前段时间工作中需要用到层级关系，组织关系图来展示一些项目文件之间的关系，就像下面这样：

最开始我查阅了一些网上的图表js库，发现不仅是使用起来很麻烦，而且也不支持自定义，样式什么的都是写死的，不方便自定义修改。于是乎在这种情况下我就用canvas自己写了一个这样的组织关系图。

我们先来捋一下思路，首先，我们的做法肯定是编写一个class或者是构造函数，内部写一些属性和方法，在实例化的时候通过循环，递归等方式不断的调用方法实现图形的渲染。

为此我将整幅图分成三部分，第一，矩形的绘制，第二，线条的绘制，第三，文字的绘制。

首先封装一个绘制矩形的方法：

  drawRect(startX, startY, width, height, color) {
          this.ctx.beginPath();
          this.ctx.moveTo(startX, startY);
          this.ctx.lineTo(startX + width, startY