首页拓扑图问题修改

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
@@ -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";
   // 添加配置项
@@ -966,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;
@@ -973,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
   }
@@ -1299,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;