首页拓扑图问题修改

whyczyk

2021-07-19 b9f0dfc4c0c48d65842d417b5babe1304439a735

 src/assets/js/newDiagram/index.js

@@ -11,18 +11,26 @@
   this.opts = { // 默认配置
      lineWidth: 3, // 线宽
      onOffBase: { // 开关的基础配置
         radius: 3,
         radius: 4,
         width: 16,
         lineWidth: 2,
      },
      moveDot: {
         radius: 6,
         step: 2.2,
         step: 0.8,
         gravity: 0.08
      }
      },
      ripplesStep: 0.6
   };

   // 转动轴全局配置
   this.rollAxis = {
      speed: 0.1,
      start: 0,
   };

   // 显示线条的id
   this.showLineId = false;
   this.showLineId = true;
}

// 设置canvas
@@ -245,7 +253,14 @@
   ctx.beginPath();
   ctx.lineWidth = option.lineWidth ? option.lineWidth : opts.lineWidth;
   let color = option.gradientColor ? option.gradientColor : ['#ffa500', '#ffff1d'];
   let gnt = ctx.createLinearGradient(points[0][0], points[0][1], points[1][0], points[1][1]); //线性渐变的起止坐标
   let type = option.type ? option.type : 'abeam';
   let gnt;
   if (type == 'abeam') {
      gnt = ctx.createLinearGradient(points[0][0], points[0][1], points[1][0], points[1][1]); //线性渐变的起止坐标
   } else {
      gnt = ctx.createLinearGradient(points[0][0] + 10, points[0][1], points[0][0] + 10, points[0][1] + ctx.lineWidth); //线性渐变的起止坐标
   }

   ctx.strokeStyle = gnt;
   gnt.addColorStop(0, color[0]);
   gnt.addColorStop(1, color[1]);
@@ -289,10 +304,86 @@
      });
   }
   // 设置执行的方法
   option.method = "line";
   option.method = "gradientline";
   // 添加配置项
   this.addOptions(option);
   return points;
};

// 绘制线
Diagram.prototype.moveGradientline = function (option) {
   let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文
   let points = option.points;
   let opts = this.opts;
   let start = option.start ? option.start : 0;
   ctx.beginPath();
   ctx.lineWidth = option.lineWidth ? option.lineWidth : opts.lineWidth;
   let color = option.gradientColor ? option.gradientColor : ['#ffa500', '#ffff1d'];
   let type = option.type ? option.type : 'abeam';
   let gnt;
   if (this.getOption(option.id)) {
      if (type == 'abeam') {
         gnt = ctx.createLinearGradient(points[0][0], points[0][1], points[1][0], points[1][1]); //线性渐变的起止坐标
      } else {
         if (start + 0.02 >= 1) {
            start = 0;
         } else {
            start = start + 0.02;
         }
         gnt = ctx.createLinearGradient(points[0][0], points[0][1] - ctx.lineWidth / 2, points[0][0], points[0][1] + ctx.lineWidth / 2); //线性渐变的起止坐标
         gnt.addColorStop(0, color[1]);
         gnt.addColorStop(start, color[0]);
         gnt.addColorStop(1, color[1]);
         this.setOption(option.id, 'start', start);
      }
   } else {
      option.start = start;
   }

   ctx.strokeStyle = gnt;
   points.forEach((point, index) => {
      if (index != 0) {
         ctx.lineTo(point[0], point[1]);
      } else {
         ctx.moveTo(point[0], point[1]);
      }
   });
   if (!option.hide) {
      ctx.stroke();
   }
   // 控制线条id显示
   if (this.showLineId) {
      let point = [];
      if (points[0][0] == points[1][0]) {
         // 设置x轴坐标
         point[0] = points[0][0];
         // 设置y轴坐标
         if (points[0][1] > points[1][1]) {
            point[1] = points[1][1] + (points[0][1] - points[1][1]) / 2;
         } else {
            point[1] = points[1][1] + (points[0][1] - points[1][1]) / 2;
         }
      } else {
         // 设置y轴坐标
         point[1] = points[0][1];
         // 设置x轴坐标
         if (points[0][0] > points[1][0]) {
            point[0] = points[1][0] + (points[0][0] - points[1][0]) / 2;
         } else {
            point[0] = points[1][0] + (points[0][0] - points[1][0]) / 2;
         }

      }
      this.text({
         text: option.id ? option.id : '',
         point: point,
         hide: option.hide,
      });
   }
   // 设置执行的方法
   option.method = "moveGradientline";
   // 添加配置项
   this.addOptions(option);
};

// 获取线缩放后的具体信息
@@ -498,7 +589,7 @@
   let point = option.point;
   let state = option.state ? true : false;
   let color = option.color ? option.color : '#50cef5';
   let onOffBase = this.opts.onOffBase;
   let onOffBase = option.onOffBase ? option.onOffBase : this.opts.onOffBase;

   // 开关的第一个圆
   let arc1 = this.arc({
@@ -683,7 +774,6 @@
   option.right = [point[0] + option.width, point[1] + option.height / 2];
   option.top = [point[0] + option.width / 2, point[1]];
   option.bottom = [point[0] + option.width / 2, point[1] + option.height];

   // 设置执行的方法
   option.method = "drawImage";
   // 添加配置项
@@ -728,6 +818,7 @@
   ctx.font = fontSize + 'px Arial';
   ctx.textAlign = option.align ? option.align : 'start';
   ctx.textBaseline = option.baseline ? option.baseline : 'top';
   ctx.padding = option.padding ? option.padding : 8;
   let Yzoom = this.stc.clientHeight / this.height;
   let borderColor = option.borderColor ? option.borderColor : '#5a62c9'; //矩形边框颜色
   let bgColor = option.bgColor ? option.bgColor : '#191553'; //矩形填充颜色
@@ -750,24 +841,27 @@
         let radiusRectY;
         switch (ctx.textBaseline) {
            case 'top':
               radiusRectY = point[1] - 8
               radiusRectY = point[1] - ctx.padding
               break;
            case 'bottom':
               radiusRectY = point[1] - 8 - fontHeight
               radiusRectY = point[1] - ctx.padding - fontHeight
               break;
            case 'middle':
               radiusRectY = point[1] - 8 - (fontHeight / 2)
               radiusRectY = point[1] - ctx.padding - (fontHeight / 2)
               break;
         }
         let radiusRectData = {
            id: option.id,
            showPanel: option.showPanel,
            point: [point[0] - 16, radiusRectY - 1],
            width: fontWidth + 32,
            height: fontHeight * texts.length + 16,
            point: [point[0] - ctx.padding * 2, radiusRectY - 1],
            width: fontWidth + ctx.padding * 4,
            height: fontHeight * texts.length + ctx.padding * 2,
            strokeStyle: borderColor,
            fillStyle: bgColor,
            r: (fontHeight * texts.length + 16) / 2,
            r: (fontHeight * texts.length + ctx.padding * 2) / 2,
         }
         if (option.type) {
            radiusRectData.r = 1;
         }
         radiusRectInfo = this.drawRadiusRect(radiusRectData);
         ctx.fillStyle = option.fillStyle ? option.fillStyle : '#FFFFFF';
@@ -879,6 +973,7 @@
// 绘制扩散
Diagram.prototype.ripples = function (option) {
   let ctx = this.f_ctx;
   let opts = this.opts;
   let point = option.point;
   let start = option.start ? option.start : point;
   let flush = option.flush ? option.flush : false;
@@ -886,7 +981,7 @@
   let maxRadius = option.maxRadius ? option.maxRadius : 50;
   let minRadius = option.minRadius ? option.minRadius : 1;
   let radius = option.radius ? option.radius : minRadius;
   radius++;
   radius += opts.ripplesStep;
   if (radius >= maxRadius) {
      radius = minRadius
   }
@@ -1212,4 +1307,49 @@
   });
};

/**
 * 绘制转动的轴
 * @param option 配置项
 * start起始坐标点,end结束坐标点必填项
 * start.y=end.y
 */
Diagram.prototype.drawRollAxis = function (option) {
   let ctx = option.flush ? this.f_ctx : this.s_ctx; // 获取上下文
   let start = option.start;
   let end = option.end;
   let height = option.height ? option.height : 16;
   let width = Math.abs(start[0] - end[0]);
   let rollAxis = this.rollAxis;

   let rollNumber = rollAxis.start; // 旋转轴的开始点
   let rollSpeed = rollAxis.speed; // 旋转的速度
   let color1 = option.color1 ? option.color1 : "#cdcaca"; // 开始颜色
   let color2 = option.color2 ? option.color2 : "#FFFFFF"; // 中间颜色
   let grd = ctx.createLinearGradient(start[0], start[0], start[0], height + start[0]); // 渐变色
   grd.addColorStop(rollNumber - Math.floor(rollNumber), color1);
   rollNumber = rollNumber + 0.25;
   grd.addColorStop(rollNumber - Math.floor(rollNumber), color2);
   rollNumber = rollNumber + 0.25;
   grd.addColorStop(rollNumber - Math.floor(rollNumber), color1);
   rollNumber = rollNumber + 0.25;
   grd.addColorStop(rollNumber - Math.floor(rollNumber), color2);
   rollNumber = rollNumber + 0.25;
   grd.addColorStop(rollNumber - Math.floor(rollNumber), color1);
   ctx.fillStyle = grd;
   ctx.fillRect(start[0], start[1], width, height);

   rollAxis.start += rollSpeed;
   if (rollAxis.start > 1.25) {
      rollAxis.start = 0;
   }

   // 添加配置项
   option.method = "drawRollAxis";
   this.addOptions(option);
   return {
      left: [start[0], start[1] + height / 2],
      bottom: [end[0], end[1] + height / 2],
   }
}

export default Diagram;