图片控件设计器插件

编辑
  • 文档创建者:jiangsr
  • 浏览次数:2297次
  • 编辑次数:10次
  • 最近更新:Kevin-s 于 2019-06-24
  • 1. 描述   

    决策报表中无法方便地添加图片,影响体验观感,不利于决策报表设计实现。


    因此我们提供了 图片控件设计器插件,在决策报表中添加图片显示。

    这个插件把以往只能把图片插入单元格的形式脱离了出来,可以使设计者在决策报表中随意的插入图片。

    因为控件可以随意拖动,同时还能设置超级链接,这样就可以通过选择精美的图片来设计想要的按钮模式。

    像在原来报表中一样方便地设置图片的效果,可以用于决策报表头部的logo和banner设计。

    2. 插件介绍

    2.1 插件安装

    设计器插件安装方法参照 设计器插件管理

    服务器安装插件方法参照 服务器插件管理

    2.2 插件使用说明

    1)该控件只能应用于决策报表设计
    2)该控件在决策报表设计的时候不能拖入参数面板
    3)该控件可以多次拖入决策报表中。
    4)该控件可以设置图片样式:默认,拉伸,平铺,自适应。
    # 默认:即原图显示,如果组件大小<原图大小,则从左上角开始,多出部分截断不显示
    # 平铺:即图片重复以铺满组件
    # 拉伸:即以图片组件宽高进行自适应,如果图片小则拉伸填充组件,否则进行压缩填充
    # 适应:即以图片宽高原比例自适应组件大小
    5)该控件可以设置超链接,每个图片可设置多个超链接,如果图片设置了超链接,则在浏览器端,点击图片可以触发超链接。

    2.3 具体使用

    1)添加图片控件到决策报表


    2)属性设置

    图片:点击编辑框,会弹出图片的选择和样式设置界面。


    超链接:点击超链接的编辑框,就会弹出超链接的设置界面,改界面可以添加多种超链接,按需添加即可,其添加方式和单元格中添加超链接一样。

    3. 示例

    3.1 模板设置

    打开模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\frm\内边距设置.frm

    3.2 添加控件

    将“图片控件设计器”插件拖入到模板中,如下图所示:


    3.3 设置属性

    1)图片设置

    选择图片路径,为了美观,将设置为“拉伸”显示,如下图所示:


    2)链接设置

    以网页链接为例:设置点击图片跳转到百度页面,如下图所示:

    注:移动端不支持超链到“悬浮窗图表”和“文件下载”。

    3.4 移动端设置

    注:移动端图片展示效果要求 App 版本为 v9.3,“图片控件设计器插件”版本为 v1.8.3,HTML5 报表展现插件 5.1 及以上版本。

    设置移动端属性为“手机端重布局”,并将图片控件排列在第一位,如下图所示:

    1)保留布局

    图片根据容器的大小来显示,图片格式设置如下:

    • 默认:即从左上角开始原图显示,如果容器大小<原图大小,多出部分截断不显示,如果容器大小>原图大小,空白部分留白 

    • 平铺:即左上角开始图片重复以铺满容器

    • 拉伸:即以控件容器宽高进行自适应,如果图片小则拉伸充满,否则进行压缩充满

    • 适应:即以图片宽高原比例自适应控件容器大小,任意宽或高缩放至充满容器边界后,停止缩放居中显示

    2)手机重布局

    图片自适应容器大小

    手机端重布局设置可参考:[通用]手机重布局

    4. 效果预览

    4.1 PC 端预览效果

    保存模板并预览,点击图片可跳转到百度页面,如下图所示:



    4.2 移动端预览效果

    注:要求 App 版本为 v9.3,“图片控件设计器插件”版本为 v1.8.3,HTML5 报表展现插件 5.1 及以上版本。

    1)App 效果预览


    2)H5 效果预览



    附件列表


    主题: 二次开发
    标签: 暂无标签 编辑/添加标签
    如果您认为本文档还有待完善,请编辑

    文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
    关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
    若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

    此页面有帮助吗?只是浏览 [ 去社区提问 ]