首页拓扑图问题修改

whyczyk

2021-07-19 b9f0dfc4c0c48d65842d417b5babe1304439a735

 src/assets/js/newDiagram/index.js

@@ -11,16 +11,24 @@
   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 = true;
}
@@ -581,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({
@@ -766,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";
   // 添加配置项
@@ -811,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'; //矩形填充颜色
@@ -833,26 +841,26 @@
         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){
         if (option.type) {
            radiusRectData.r = 1;
         }
         radiusRectInfo = this.drawRadiusRect(radiusRectData);
@@ -965,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;
@@ -972,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
   }
@@ -1298,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;