'use strict'; Object.defineProperty(exports, "__esModule", { value: true }); var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); /** * Created by hustcc on 18/6/23. * Contract: i@hust.cc */ var _sizeSensor = require('size-sensor'); var _utils = require('./utils'); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var CanvasNest = function () { function CanvasNest(el, config) { var _this = this; _classCallCheck(this, CanvasNest); this.randomPoints = function () { return (0, _utils.range)(_this.c.count).map(function () { return { x: Math.random() * _this.canvas.width, y: Math.random() * _this.canvas.height, xa: 2 * Math.random() - 1, // 随机运动返现 ya: 2 * Math.random() - 1, max: 6000 // 沾附距离 }; }); }; this.el = el; this.c = _extends({ zIndex: -1, // z-index opacity: 0.5, // opacity color: '0,0,0', // color of lines pointColor: '0,0,0', // color of points count: 99 }, config); this.canvas = this.newCanvas(); this.context = this.canvas.getContext('2d'); this.points = this.randomPoints(); this.current = { x: null, // 当前鼠标x y: null, // 当前鼠标y max: 20000 // 圈半径的平方 }; this.all = this.points.concat([this.current]); this.bindEvent(); this.requestFrame(this.drawCanvas); } _createClass(CanvasNest, [{ key: 'bindEvent', value: function bindEvent() { var _this2 = this; (0, _sizeSensor.bind)(this.el, function () { _this2.canvas.width = _this2.el.clientWidth; _this2.canvas.height = _this2.el.clientHeight; }); this.onmousemove = window.onmousemove; window.onmousemove = function (e) { _this2.current.x = e.clientX - _this2.el.offsetLeft + document.scrollingElement.scrollLeft; // 当存在横向滚动条时,x坐标再往右移动滚动条拉动的距离 _this2.current.y = e.clientY - _this2.el.offsetTop + document.scrollingElement.scrollTop; // 当存在纵向滚动条时,y坐标再往下移动滚动条拉动的距离 _this2.onmousemove && _this2.onmousemove(e); }; this.onmouseout = window.onmouseout; window.onmouseout = function () { _this2.current.x = null; _this2.current.y = null; _this2.onmouseout && _this2.onmouseout(); }; } }, { key: 'newCanvas', value: function newCanvas() { if (getComputedStyle(this.el).position === 'static') { this.el.style.position = 'relative'; } var canvas = document.createElement('canvas'); // 画布 canvas.style.cssText = (0, _utils.canvasStyle)(this.c); canvas.width = this.el.clientWidth; canvas.height = this.el.clientHeight; this.el.appendChild(canvas); return canvas; } }, { key: 'requestFrame', value: function requestFrame(func) { var _this3 = this; this.tid = (0, _utils.requestAnimationFrame)(function () { return func.call(_this3); }); } }, { key: 'drawCanvas', value: function drawCanvas() { var _this4 = this; var context = this.context; var width = this.canvas.width; var height = this.canvas.height; var current = this.current; var points = this.points; var all = this.all; context.clearRect(0, 0, width, height); // 随机的线条和当前位置联合数组 var e = void 0, i = void 0, d = void 0, x_dist = void 0, y_dist = void 0, dist = void 0; // 临时节点 // 遍历处理每一个点 points.forEach(function (r, idx) { r.x += r.xa; r.y += r.ya; // 移动 r.xa *= r.x > width || r.x < 0 ? -1 : 1; r.ya *= r.y > height || r.y < 0 ? -1 : 1; // 碰到边界,反向反弹 context.fillStyle = 'rgba(' + _this4.c.pointColor + ')'; context.fillRect(r.x - 0.5, r.y - 0.5, 1, 1); // 绘制一个宽高为1的点 // 从下一个点开始 for (i = idx + 1; i < all.length; i++) { e = all[i]; // 当前点存在 if (null !== e.x && null !== e.y) { x_dist = r.x - e.x; // x轴距离 l y_dist = r.y - e.y; // y轴距离 n dist = x_dist * x_dist + y_dist * y_dist; // 总距离, m dist < e.max && (e === current && dist >= e.max / 2 && (r.x -= 0.03 * x_dist, r.y -= 0.03 * y_dist), // 靠近的时候加速 d = (e.max - dist) / e.max, context.beginPath(), context.lineWidth = d / 2, context.strokeStyle = 'rgba(' + _this4.c.color + ',' + (d + 0.2) + ')', context.moveTo(r.x, r.y), context.lineTo(e.x, e.y), context.stroke()); } } }); this.requestFrame(this.drawCanvas); } }, { key: 'destroy', value: function destroy() { // 清除事件 (0, _sizeSensor.clear)(this.el); // mouse 事件清除 window.onmousemove = this.onmousemove; // 回滚方法 window.onmouseout = this.onmouseout; // 删除轮询 (0, _utils.cancelAnimationFrame)(this.tid); // 删除 dom this.canvas.parentNode.removeChild(this.canvas); } }]); return CanvasNest; }(); CanvasNest.version = '2.0.4'; exports.default = CanvasNest; module.exports = exports['default'];