反饋已提交
網絡繁忙
大屏场景下,给决策报表添加一个酷炫的抽象动画背景,效果如下图所示:
插入 JS 代码,引用外部 CSS 文件,生成动态抽象背景。
新建决策报表,选中 body 组件,添加初始化后事件,如下图所示:
JavaScript 代码如下:
$("body").prepend('<canvas id="canvas" style="position:absolute;z-index:-2;"></canvas>');var smoothTrail = function(c, cw, ch){ this.init = function(){ this.loop(); }; var _this = this; this.c = c; this.ctx = c.getContext('2d'); this.cw = cw; this.ch = ch; this.mx = 0; this.my = 0; //trail this.trail = []; this.maxTrail = 200; this.mouseDown = false; this.ctx.lineWidth = .1; this.ctx.lineJoin = 'round'; this.radius = 1; this.speed = 0.4; this.angle = 0; this.arcx = 0; this.arcy = 0; this.growRadius = true; this.seconds = 0; this.milliseconds = 0; this.rand = function(rMi, rMa){return ~~((Math.random()*(rMa-rMi+1))+rMi);}; this.hitTest = function(x1, y1, w1, h1, x2, y2, w2, h2){return !(x1 + w1 < x2 || x2 + w2 < x1 || y1 + h1 < y2 || y2 + h2 < y1);}; this.createPoint = function(x, y){ this.trail.push({ x: x, y: y }); }; this.updateTrail = function(){ if(this.trail.length < this.maxTrail){ this.createPoint(this.arcx, this.arcy); } if(this.trail.length >= this.maxTrail){ this.trail.splice(0, 1); } }; this.updateArc = function(){ this.arcx = (this.cw/2) + Math.sin(this.angle) * this.radius; this.arcy = (this.ch/2) + Math.cos(this.angle) * this.radius; var d = new Date(); this.seconds = d.getSeconds(); this.milliseconds = d.getMilliseconds(); this.angle += this.speed*(this.seconds+1+(this.milliseconds/1000)); if(this.radius <= 1){ this.growRadius = true; } if(this.radius >= 200){ this.growRadius = false; } if(this.growRadius){ this.radius += 1; } else { this.radius -= 1; } }; this.renderTrail = function(){ var i = this.trail.length; this.ctx.beginPath(); while(i--){ var point = this.trail[i]; var nextPoint = (i == this.trail.length) ? this.trail[i+1] : this.trail[i]; var c = (point.x + nextPoint.x) / 2; var d = (point.y + nextPoint.y) / 2; this.ctx.quadraticCurveTo(Math.round(this.arcx), Math.round(this.arcy), c, d); }; this.ctx.strokeStyle = 'hsla('+this.rand(170,300)+', 100%, '+this.rand(50, 75)+'%, 1)'; this.ctx.stroke(); this.ctx.closePath(); }; this.clearCanvas = function(){ //this.ctx.globalCompositeOperation = 'source-over'; //this.ctx.clearRect(0,0,this.cw,this.ch); this.ctx.globalCompositeOperation = 'destination-out'; this.ctx.fillStyle = 'rgba(0,0,0,.1)'; this.ctx.fillRect(0,0,this.cw,this.ch); this.ctx.globalCompositeOperation = 'lighter'; }; this.loop = function(){ var loopIt = function(){ requestAnimationFrame(loopIt, _this.c); _this.clearCanvas(); _this.updateArc(); _this.updateTrail(); _this.renderTrail(); }; loopIt(); }; };var isCanvasSupported = function(){ var elem = document.createElement('canvas'); return !!(elem.getContext && elem.getContext('2d'));};var setupRAF = function(){ var lastTime = 0; var vendors = ['ms', 'moz', 'webkit', 'o']; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x){ window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame']; window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame'] || window[vendors[x]+'CancelRequestAnimationFrame']; }; if(!window.requestAnimationFrame){ window.requestAnimationFrame = function(callback, element){ var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; }; if (!window.cancelAnimationFrame){ window.cancelAnimationFrame = function(id){ clearTimeout(id); }; };}; if(isCanvasSupported){ var c = document.createElement('canvas'); c.width = 400; c.height = 400; var cw = c.width; var ch = c.height; document.body.appendChild(c); var cl = new smoothTrail(c, cw, ch); setupRAF(); cl.init(); }
1)将 sty.css 拷贝到目录%FR_HOME%\webapps\webroot\help\css下,如下图所示:
2)选中 body,再次添加一个初始化事件,引用上述 CSS 文件,如下图所示:
var link = '<link rel="stylesheet" href="' + FR.server + '/help/css/sty.css">';$("head").append(link);
保存模板,点击PC端预览,效果如 1.1预期效果 中所示。
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现抽象动画背景.frm
点击下载模板:JS实现抽象动画背景.frm
点击下载 CSS 文件:sty.css
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙