反饋已提交
網絡繁忙
大屏场景下,给决策报表添加一个酷炫的粒子上浮背景,如下图所示:
设置初始化 JS 事件来生成动态背景。
新建决策报表,选中 body 组件,添加初始化后事件,如下图所示:
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;}();varCanvas = 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();})();
保存报表,点击PC端预览,效果如预期效果中所示。
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现粒子上浮背景.frm
点击下载模板:JS实现粒子上浮背景.frm
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙