vue canvas绘制信令图二、-CSDN博客

本文链接：https://blog.csdn.net/qq_41646249/article/details/139356839

本文介绍如何在Vue.js中利用canvas绘制信令图，重点在于根据标题内容调整区域间隔，实现无内容区域间隔小，有内容区域间隔大的效果。详细步骤包括设置初始间隔、计算坐标、判断标题数据、绘制虚线、箭头处理及完整代码展示。

摘要由CSDN通过智能技术生成

需求：根据信令图标题的每2个区域之间有无内容来给宽度，无内容区域的间隔要小一些。有内容区域的间隔大一些。

先上效果图：

从上面的效果图可以看出无内容区域的间隔宽度变小了很多。

1、先设置一个最先间隔的宽度：minGapX: 200,

2、然后设置一个存放有计算后的间隔数据： titleAttrArr: []

3、测算出坐标点离最左边的距离

this.titleAttrArr = []
let offsetLeft = 0

4、标题title没有向右数据, 还得判断它的下一级有没有向左数据

let index = this.resultData.findIndex(
   (item) => item.startDataDir == v && item.dataDirStr === "上行"
 );

if (index === -1) {
   // title没有向右数据, 还得判断他的下一级有没有向左数据
   let index2 = this.resultData.findIndex(
    (item) =>
        item.startDataDir == this.showTitleArr[i + 1] && item.dataDirStr === "下行"
    );
   if (index2 === -1) {
       trueGap = this.minGapX;
    } else {
       trueGap = this.gapX;
    }
 } else {
   // 有向右数据说明是正常gap
   trueGap = this.gapX;
 }

5、画虚线和标题以及对应方法里面的调整

 this.paintText(context, v, i, offsetLeft);
 this.drawDashed(context, i, offsetLeft);

6、画箭头的处理

        let kOffsetLeft = 0,
          jOffsetLeft = 0;
        this.titleAttrArr.map((item) => {
          if (v.startDataDir === item.titleName) {
            kOffsetLeft = item.offsetLeft;
          }
          if (v.endDataDir === item.titleName) {
            jOffsetLeft = item.offsetLeft;
          }
        });
        // 箭头
        this.paintArr(
          v,
          [kOffsetLeft + this.paddingLeft, height],
          [jOffsetLeft + this.paddingLeft, height],
          kOffsetLeft < jOffsetLeft ? "right" : "left",
          context
        );