open/lib/CanvasNest.js

'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'];