JS实现粒子上浮背景

  • 文档创建者:L大大
  • 编辑次数:2次
  • 最近更新:Leo.Tsai 于 2020-03-20
  • 1. 概述

    1.1 预期效果

    大屏场景下,给决策报表添加一个酷炫的粒子上浮背景,如下图所示:

    F1F93F60-12A3-497B-99D0-ADFCB2F4107B.GIF

    1.2 实现思路

    接用 JS 代码来生成动态背景。

    2. 示例

    2.1 报表设计

    新建决策报表,选中 body 组件,添加初始化后事件,如下图所示:

    Snag_63d5a1e.png

    JavaScript 代码如下:

    $("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');
    //在body中插入canvas画布,并置于底层
    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;};}();function _classCallCheck(instance, Constructor) {if (!(instance instanceof Constructor)) {throw new TypeError("Cannot call a class as a function");}}var Line = function () {
      function Line(x, y, size, color, speed, seed, amplitude) {_classCallCheck(this, Line);
        this.x = x;
        this.y = y;
        this.size = size;
        this.color = color;
        this.speed = speed;
        this.seed = seed;
        this.amplitude = amplitude;
        this.i = this.seed;
      }_createClass(Line, [{ key: 'update', value: function update()
        {
          this.y -= this.speed;
          this.i += this.seed;
        } }, { key: 'draw', value: function draw(
        canvas) {
          var x = this.x + Math.sin(this.i) * this.amplitude;
          canvas.ctx.beginPath();
          canvas.ctx.fillStyle = this.color;
          canvas.ctx.shadowColor = this.color;
          canvas.ctx.shadowBlur = 5;
          canvas.ctx.arc(x, this.y, this.size, 0, 2 * Math.PI);
          canvas.ctx.fill();
          canvas.ctx.closePath();
        } }]);return Line;}();var
    Canvas = function () {
      function Canvas(ctx, w, h) {_classCallCheck(this, Canvas);
        this.ctx = ctx;
        this.width = w;
        this.height = h;
        this.scale = 1.0;
        this.lines = [];
      }_createClass(Canvas, [{ key: 'pushParticle', value: function pushParticle()
        {
          var x = Math.random() * this.width;
          var y = this.height + Math.random() * 250;
          var size = 1 + Math.random();
          var g = Math.floor(150 + Math.random() * 50);
          var b = Math.floor(150 + Math.random() * 50);
          var color = 'rgba(120,' + g + ',' + b + ',0.7)';
          var speed = 2 + Math.random() * 1.5;
          var seed = Math.random() / 20;
          var amp = Math.random() * 15;
          this.lines.push(new Line(x, y, size, color, speed, seed, amp));
        } }, { key: 'start', value: function start()
        {
          for (var i = 0; i < 100; i++) {
            this.pushParticle();
          }
        } }, { key: 'update', value: function update()
        {
          for (var i = 0; i < this.lines.length; i++) {
            var line = this.lines[i];
            line.update();
          }
          this.lines = this.lines.filter(function (line) {
            return line.y > -2;
          });
          var toAdd = 100 - this.lines.length;
          if (toAdd === 0) {return;}
          for (var _i = 0; _i < toAdd; _i++) {
            this.pushParticle();
          }
        } }, { key: 'draw', value: function draw()
        {
          this.ctx.shadowColor = '#000';
          this.ctx.shadowBlur = 0;
          this.ctx.globalCompositeOperation = 'source-over';
          this.ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
          this.ctx.fillRect(0, 0, this.width, this.height);
          this.ctx.globalCompositeOperation = 'lighter';
          for (var i = 0; i < this.lines.length; i++) {
            var line = this.lines[i];
            line.draw(this);
          }
        } }]);return Canvas;}();
    (function (_) {
      var canvasElement = document.getElementById('canvas'),
      ctx = canvasElement.getContext('2d'),
      canvas = new Canvas(ctx);
      var w = canvasElement.width = window.innerWidth,
      h = canvasElement.height = window.innerHeight,
      density = 1;
      function setup() {
        window.addEventListener('resize', resize);
        density = window.devicePixelRatio != undefined ? window.devicePixelRatio : 1.0;
        canvasElement.width = w * density;
        canvasElement.height = h * density;
        canvas.width = w;
        canvas.height = h;
        canvas.scale = density;
        ctx.scale(density, density);
        canvas.start();
        draw();
      }
      function draw() {
        canvas.update();
        canvas.draw();
        window.requestAnimationFrame(draw);
      }
      function resize() {
        w = canvasElement.width = window.innerWidth;
        h = canvasElement.height = window.innerHeight;
        canvasElement.width = w * density;
        canvasElement.height = h * density;
        canvas.width = w;
        canvas.height = h;
        ctx.scale(density, density);
      }
      setup();
    })();

    2.2 效果预览

    保存报表,点击表单预览,效果如预期效果中所示。

    3. 模板下载

    已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现粒子上浮背景.frm

    点击下载模板:JS实现粒子上浮背景.frm

    附件列表


    主题: 决策报表应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!