首页拓扑图优化

whyczyk

2021-05-26 511ce217a93b68eb3498204f55d9fcdaa6d0edd8

首页拓扑图优化

 src/assets/js/newDiagram/index.js

@@ -17,12 +17,13 @@
        },
        moveDot: {
            radius: 6,
            step: 2.2,
            step: 1,
            gravity: 0.08
        }
        },
        ripplesStep: 0.6
    };
    // 显示线条的id
    this.showLineId = false;
    this.showLineId = true;
}

// 设置canvas
@@ -966,6 +967,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 +975,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
    }

 src/pages/home/topoGraphdiagram/js/gridCircuitDiagram.js

@@ -13,10 +13,10 @@
import system from '../images/system.png'
import shock from '../images/shock.png'
const lineStrokeColor = '#ffffff';
const lineWidth = 1;
const lineWidth = 4;
const arrow = {
    lineWidth: 4,
    size: 40,
    lineWidth: 2,
    size: 30,
    systemColor: '#00f7f9'
}

@@ -576,7 +576,7 @@
        lineWidth: lineWidth,
        points: [
            [line13[0][0], onOff4.arc1.top[1]],
            [line13[0][0], onOff4.arc1.top[1] - 40],
            [line13[0][0], onOff4.arc1.top[1] - 45],
        ]
    })

@@ -629,8 +629,8 @@
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        points: [
            [radiusRect.left[0] - 290, 226],
            [radiusRect.left[0] - 50, 226]
            [radiusRect.left[0] - 300, 226],
            [radiusRect.left[0] - 40, 226]
        ]
    })

@@ -658,7 +658,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [radiusRect.left[0] - 260, 266],
            [radiusRect.left[0] - 50, 266]
            [radiusRect.left[0] - 40, 266]
        ]
    })

@@ -687,7 +687,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [line20[1][0] + arrow.lineWidth / 2, line20[1][1]],
            [line20[1][0] - 30, line20[1][1]]
            [line20[1][0] - 40, line20[1][1]]
        ]
    })

@@ -706,7 +706,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [radiusRect.left[0] - 220, 306],
            [radiusRect.left[0] - 50, 306]
            [radiusRect.left[0] - 40, 306]
        ]
    })

@@ -774,7 +774,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [radiusRect.left[0] - 150, 346],
            [radiusRect.left[0] - 50, 346]
            [radiusRect.left[0] - 40, 346]
        ]
    })

@@ -793,7 +793,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [line27[0][0], line27[0][1] - arrow.lineWidth / 2],
            [line27[0][0], line27[0][1] + 170]
            [line27[0][0], line27[0][1] + 190]
        ]
    })

@@ -811,7 +811,7 @@
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        points: [
            [850, radiusRect.bottom[1] + 50],
            [850, radiusRect.bottom[1] + 40],
            [850, radiusRect.bottom[1] + 80]
        ]
    })
@@ -859,7 +859,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [Image14.bottom[0], Image14.bottom[1] + 65],
            [Image14.bottom[0] - 70, Image14.bottom[1] + 65]
            [Image14.bottom[0] - 90, Image14.bottom[1] + 65]
        ]
    })

@@ -869,7 +869,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [line30[0][0], line30[0][1] + arrow.lineWidth / 2],
            [line30[0][0], line30[0][1] - 18]
            [line30[0][0], line30[0][1] - 25]
        ]
    })

@@ -896,8 +896,8 @@
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        points: [
            [980, radiusRect.bottom[1] + 50],
            [980, radiusRect.bottom[1] + 180]
            [980, radiusRect.bottom[1] + 40],
            [980, radiusRect.bottom[1] + 200]
        ]
    })

@@ -924,7 +924,7 @@
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        points: [
            [radiusRect.right[0] + 50, 346],
            [radiusRect.right[0] + 40, 346],
            [radiusRect.right[0] + 120, 346]
        ]
    })
@@ -944,7 +944,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [line33[1][0], line33[1][1] - arrow.lineWidth / 2],
            [line33[1][0], line33[1][1] + 258]
            [line33[1][0], line33[1][1] + 270]
        ]
    })

@@ -954,7 +954,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [line34[1][0] - arrow.lineWidth / 2, line34[1][1]],
            [line34[1][0] + 110, line34[1][1]]
            [line34[1][0] + 130, line34[1][1]]
        ]
    })

@@ -972,7 +972,7 @@
        strokeStyle: arrow.systemColor,
        lineWidth: arrow.lineWidth,
        points: [
            [radiusRect.right[0] + 50, 280],
            [radiusRect.right[0] + 40, 280],
            [radiusRect.right[0] + 170, 280]
        ]
    })
@@ -992,7 +992,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [line36[1][0], line36[1][1] - arrow.lineWidth / 2],
            [line36[1][0], line36[1][1] + 135]
            [line36[1][0], line36[1][1] + 150]
        ]
    })

@@ -1002,7 +1002,7 @@
        lineWidth: arrow.lineWidth,
        points: [
            [line37[1][0] - arrow.lineWidth / 2, line37[1][1]],
            [line37[1][0] + 40, line37[1][1]]
            [line37[1][0] + 50, line37[1][1]]
        ]
    })