反饋已提交
網絡繁忙
大屏展示过程中静态图片不够美观和酷炫;安装该插件可以对大量的图片进行3D动态展示,
用户可以通过自定义的方式实现效果设置和形态切换
图片展示时,实现 3D 炫酷效果来展示,效果如下图所示:
点击下载插件:3D卡片动画插件
设计器插件安装方法参照 设计器插件管理
服务器安装插件方法参照 服务器插件管理
安装插件后,选中单元格,添加图片lightbox类型的超级链接,在弹出的设置窗口中填写图片的 URL。
安装该插件后,以决策报表为例,图表里会多出一个 3D 卡片动画控件,如下图所示:
点击下载images文件夹并解压:images.zip
将images文件夹复制到%FR_HOME%\webapps\webroot\help\picture目录下,如下图所示:
新建决策报表,添加内置数据集,内容如下图所示:
注:imgPath为绝对路径,内置数据集中的图片路径必须和电脑中图片路径一致。若是远程连接到服务器则图片应存放在对应的服务器上才能访问。
将 3D 卡片动画控件拖入到报表中,选中 3D 卡片动画控件,可以看到相应的配置。
数据设置如下图所示:
具体含义如下表所示:
卡片的图片地址
支持 Window 和 Unix 地址分隔符,必须是绝对路径
图片在表状形态下的 X 坐标位置,数值为整数,从 1 开始
注:其中 X、Y 坐标为必填内容。
1)样式
2)相机
3)控制
4)位置
调整图像位置和卡片之间的间隙
5)CSS
输入卡片各要素的 CSS 代码,让你的卡片更漂亮。
注:非技术人员这里可保持默认,无需配置。基本样式可以在样式栏中配置,这里只是让你的卡片更加好看。
背景样式:图表展示框的样式,可以在此添加纹理图案。
卡片样式:包括伪元素样式,可以写一些代码。
效果如下图所示:
代码如下:
卡片伪元素(::before)
content:''; width: 25px;height: 20px;position: absolute;bottom:0;right:0;-webkit-border-bottom-right-radius: 30px;-webkit-box-shadow: -2px -2px 5px rgba(0, 0, 0, 0.3);-webkit-transform:rotate(-20deg)skew(-40deg,-3deg)translate(-13px,-13px);
卡片样式
margin: 20px auto; width: 120px; min-height: 160px; padding: 10px; position:relative; border-top: 1px solid #ccc; border-right: 1px solid #ccc; -webkit-border-bottom-right-radius: 60px 60px; -webkit-box-shadow: -1px 2px 2px rgba(0, 0, 0, 0.2);
1)交互选项:在此面板配置图形形状,转换,旋转的参数,可以让图形连贯切换,效果更为炫酷。
2)条件显示:未启用。
点击预览,效果如1.2 插件简介所示。
注:不支持移动端。
点击下载已完成模板:3D卡片动画.frm
点击下载 image 文件夹并解压:images.zip
滑鼠選中內容,快速回饋問題
滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。
不再提示
10s後關閉
反馈已提交
网络繁忙