多热点图片插件

1.1 版本

1.2 应用场景

允许用户在插入图片的同时，在图片上设计多个热点区域。每个热点区域可以关联一个网页链接，当用户点击该热点区域时，便会跳转到相应的网页。提升图片的交互性和信息传达能力，适用于多种场景，例如：

• 产品展示：在一张产品图片上标注多个热点区域，每个热点对应一个产品详情页面，用户可以点击热点了解更多信息

• 数据分析：在统计图表上标注热点区域，点击后显示详细的数据信息或跳转到相关数据分析页面，便于用户深度挖掘和分析数据

• 地图应用：在地图上标注热点区域，用户点击后可以查看具体地点的详细信息或导航路线

1.3 功能描述

帆软提供「多热点图片」插件，主要用于在图片上加入热点区域进行网页链接跳转。

• 支持图片编辑功能

• 支持圆形、矩形和自定义多边形的热点区域设置

• 支持热点区域链接配置
  

• 不支持移动端

• 不支持在 FVS 可视化看板和决策报表中使用

2.1 插件安装

点击下载插件：多热点图片插件

设计器插件安装方法请参见：设计器插件管理

服务器安装插件方法请参见：服务器插件管理

2.2 功能入口

新建普通报表，将单元格调整到合适大小，选中单元格。

• 点击设计器左上角「插入>单元格元素/悬浮元素>插入多热点图片」，即可打开多热点图片设计窗口。

• 通过设计器工具栏也可打开多热点图片设计窗口。如下图所示：

2.3 编辑多热点图片

1）添加图片

点击插入多热点图片元素后，会自动弹出多热点图片编辑窗口

在设计窗口右边点击“添加图片”按钮，选择一张图片进行添加。如下图所示：

2）调整布局

新增图片后，可以选择图片的布局方式，支持「默认」、「拉伸」、「适应」三种布局方式。

• 默认：原始图片大小

• 拉伸：适应图片父元素大小

• 适应：按比例缩放适应父元素大小。

三种布局方式的预览效果如下：

默认	拉伸	适应

3）设置热点区域

• 矩形区域：在设计窗口右边点击“矩形区域”按钮，然后在图片需要设置热点的区域，按下鼠标左键（保持按下不松开）拖动鼠标，最后松开鼠标左键，即可设置矩形热点区域。如下图所示：

• 圆形区域：设置步骤跟矩形区域一致。
  

• 多边形区域：在设计窗口右边点击“多边形区域”按钮，然后在图片上单击>移动位置>点击>再移动位置>再单击（可多次设置点），最后双击结束，即可设置多边形区域。如下图所示：

注：画区域的时候，画笔的颜色及粗细，可自定义设置。

4）设置网页链接

在画好的热点区域内，点击鼠标右键可弹出输入框，输入网页链接地址，即可完成热点区域的设置。如下图所示：

5）热点区域删除

在设计窗口右边点击“清除区域”按钮，然后在图片上画矩形区域，画完后区域内的热点即可被清除掉。

注：清除区域的范围要大于需要消除的热点区域

2.4 效果预览

保存报表，点击「分页预览」，效果如 1.2 节应用场景中所示。

注：不支持移动端。

点击下载模板：多热点图片插件.cpt