canvas实战系列一（Konva实现基本流程图）

一、建设背景

    由于一个项目上需要实现在系统中展现整体流程图，并可以根据不同颜色显示不同节点的完成状态，且节点可以点击进去查看节点详情。具体流程图如下：

二、实现思路

    一开始是想通过原始canvas，封装画圆圈，画矩形，画箭头等方法，然后建立坐标系去实现，后来经过实践，发现图形绘制是可以做到，但是事件处理比较棘手，最后还是放弃使用原生canvas，选择使用canvas库来实现，经过评估选择，最后选择Konva.js库。Konva.js 是一个用于HTML5 Canvas的强大JavaScript库，它使得在网页上创建交互式Canvas应用变得更加简单。它支持各种基础元素的创建，且支持拖拽以及各种鼠标事件的响应处理。

三、Konva.js 基本使用

①、引入Konva.js库：首先，你需要在你的HTML文件中引入Konva.js库。你可以从官方网站下载Konva.js，也可以通过链接引入。

 <script src="https://unpkg.com/konva@4.0.18/konva.min.js"></script>

②、创建Canvas容器：在HTML文件中创建一个容器用于放置Konva.js绘制的图形。

 <div id="container"></div>

③、编写JavaScript代码：使用Konva.js创建和管理图形对象。

      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height
      });

      var layer = new Konva.Layer();

      var rect1 = new Konva.Rect({
        x: 20,
        y: 20,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
      });
      // add the shape to the layer
      layer.add(rect1);

      stage.add(layer);

四、具体实现

①、创建html容器及样式

<style>
  body {
    margin: 0;
    box-sizing: border-box;
    width: 100vw;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .parentBox {
    width: 80%;
    height: 80vh;
    border: 2px solid #aaa;
  }
</style>

 <div class="parentBox" id="parentBox">
   <div id="container"></div>
 </div>

②、封装节点和节点名称方法（可以定义不同颜色参数，文本，以及文本换行行数，文字上下） 

function titleCircle(clayer, x, y, fillColor, title, textWidth, isup, rows) {
  var complexCircle = new Konva.Circle({
    x: x,
    y: y,
    radius: cwidth,
    fill: fillColor,
    stroke: 'black',
    strokeWidth: 1
  })
  complexCircle.name(title)
  var textX = x - textWidth / 2
  var textY = y + 12
  if (isup) {
    textY = y - 14 * (rows + 1)
  }
  var complexText = new Konva.Text({
    x: textX,
    y: textY,
    text: title,
    fontSize: 10,
    fontFamily: 'sans-serif',
    lineHeight: 1.2,
    fill: '#000',
    width: textWidth,
    padding: 4,
    align: 'center'
  })

  clayer