File size: 3,155 Bytes
1b72d7e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 |
/* eslint-disable */
import { useEffect } from 'react'
const id = 'canvasNestCreated'
const Nest = () => {
const destroyNest = ()=>{
const nest = document.getElementById(id)
if(nest && nest.parentNode){
nest.parentNode.removeChild(nest)
}
}
useEffect(() => {
createNest()
return () => destroyNest()
}, [])
return <></>
}
export default Nest
/**
* 创建连接点
* @param config
*/
function createNest() {
const e = document.getElementById('__next')
if(!e) return
function n(e, n, t) {
return e.getAttribute(n) || t
}
function t() {
;(u = i.width =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth),
(d = i.height =
window.innerHeight ||
document.documentElement.clientHeight ||
document.body.clientHeight)
}
function o() {
c.clearRect(0, 0, u, d)
const e = [s].concat(x)
let n, t, i, l, r, w
x.forEach(function (o) {
for (
o.x += o.xa,
o.y += o.ya,
o.xa *= o.x > u || o.x < 0 ? -1 : 1,
o.ya *= o.y > d || o.y < 0 ? -1 : 1,
c.fillRect(o.x - 0.5, o.y - 0.5, 1, 1),
t = 0;
t < e.length;
t++
)
(n = e[t]),
o !== n &&
null !== n.x &&
null !== n.y &&
((l = o.x - n.x),
(r = o.y - n.y),
(w = l * l + r * r),
w < n.max &&
(n === s &&
w >= n.max / 2 &&
((o.x -= 0.03 * l), (o.y -= 0.03 * r)),
(i = (n.max - w) / n.max),
c.beginPath(),
(c.lineWidth = i / 2),
(c.strokeStyle = 'rgba(' + a.c + ',' + (i + 0.2) + ')'),
c.moveTo(o.x, o.y),
c.lineTo(n.x, n.y),
c.stroke()))
e.splice(e.indexOf(o), 1)
}),
m(o)
}
var i = document.createElement('canvas')
i.id = id
var a = (function () {
const t = e
return {
z: n(t, 'zIndex', 0),
o: n(t, 'opacity', 0.7),
c: n(t, 'color', '0,0,0'),
n: n(t, 'count', 99)
}
})(),
c = i.getContext('2d')
let u, d
var m =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
window.oRequestAnimationFrame ||
window.msRequestAnimationFrame ||
function (e) {
window.setTimeout(e, 1e3 / 45)
}
const l = Math.random
var r,
s = { x: null, y: null, max: 2e4 }
;(i.style.cssText =
'position:fixed;top:0;left:0;pointer-events:none;z-index:' + a.z + ';opacity:' + a.o),
(r = 'body'), e.appendChild(i),
t(),
(window.onresize = t),
(window.onmousemove = function (e) {
;(e = e || window.event), (s.x = e.clientX), (s.y = e.clientY)
}),
(window.onmouseout = function () {
;(s.x = null), (s.y = null)
})
for (var x = [], w = 0; a.n > w; w++) {
const e = l() * u,
n = l() * d,
t = 2 * l() - 1,
o = 2 * l() - 1
x.push({ x: e, y: n, xa: t, ya: o, max: 6e3 })
}
setTimeout(function () {
o()
}, 100)
}
|