SpreadJS实现鹰眼功能

前言：

所谓“鹰眼”是一种电子地图技术，用于显示当前窗口在全图中的位置，常用于飞行员飞行时寻找目标。当前窗口换图时，鹰眼自动进行相应变化。鹰眼进行漫游。通过改变鹰眼中窗口位置可改变相应的主窗口地图显示区域。简单来说有点类似RTS游戏中的雷达或者小地图。
背景：


当导入一个行列比较多的Excel文件时，希望能够生成一个缩略图。通过在缩略图中点击一个大致位置，可以将SpreadJS的显示区域切换至该处。这样方便用户在大型文件中快速定位和切换屏幕（滚动条）位置。

解决思路：
首先分析上述需求，我们可以将需求分解为一下功能的实现：
1.缩略图的生成。
2.根据在图片中点击获取点击相对图片的相对坐标 x,y。
3.根据坐标计算SpreadJS滚动条需要滚动的像素并进行滚动。

解决方案：
根据上述梳理好的思路，我们来考虑其中每一步的实现：
1.缩略图的生成

      通过SpreadJS的照相机功能，我们可以快速生成生成缩略图的图片。大致思路是将照相机生成的图片形状转存为图片，然后利用浮层去展示，展示的时候进行一定比例缩放在屏幕右下角。

1. let usedRange = sheet.getUsedRange(GC.Spread.Sheets.UsedRangeType.all);
   
2.                                                         var rowCount,colCount;
   
3.                                                        
   
4.                                                         if (usedRange) {
   
5.                                                                 rowCount = usedRange.rowCount == -1 ? sheet.getRowCount() : usedRange.rowCount;
   
6.                                                                 colCount = usedRange.colCount == -1 ? sheet.getColumnCount() : usedRange.colCount;
   
7.                                                         } else {
   
8.                                                                 rowCount = sheet.getRowCount();
   
9.                                                                 colCount = sheet.getColumnCount();
   
10.                                                         }
    
11.                                                        
    
12.                                                         let range = new GC.Spread.Sheets.Range(0,0,
    
13.                                                                 sheet.getRowCount() > 1000 ? rowCount : sheet.getRowCount(),
    
14.                                                                 sheet.getColumnCount() > 1000 ? colCount : sheet.getColumnCount());
    
15.                                                                
    
16.                                                         if(range){
    
17.                                                                 let rangeStr = GC.Spread.Sheets.CalcEngine.rangeToFormula(range);
    
18.                                                                 let shape = sheet.shapes.addCameraShape("myCameraShape1", rangeStr, 240, 200);
    
19.                                                                 let imagesrc = shape.toImageSrc();
    
20.                                                                 sheet.shapes.remove(shape.name());
    
21.                                                                 var eagleEyeImage = document.createElement('img');
    
22.                                                                 eagleEyeImage.id = "eagleEyeImage";
    
23.                                                                  eagleEyeImage.src = imagesrc; // 替换为你的图片地址
    
24.                                                                 // 将图片添加到浮层中
    
25.                                                                 var eagleEyeOverlay = document.getElementById("eagleEyeOverlay");
    
26.                                                                 eagleEyeOverlay.appendChild(eagleEyeImage);
    
27.                                                                 eagleEyeOverlay.style.display = "block";
    
28.                                                                 eagleEyeOverlay.style.width = "250px";
    
29.                                                                 eagleEyeOverlay.style.height = "150px";

复制代码

      这里有两点说明：

首先，我们是可以通过getUsedRange获取表格中的使用区域，这样做可以规避多余的空白区域（考虑到过多的空白区域会影响性能）。但同时这样做会导致有些故意留白的表格的留白部分获取不到的问题，所以这里我用了一个判断，判断rowCount、colCount大于1000的时候采用usedRange中的rowCount，colCount，否则使用表格的rowCount和colCount。这样可以在性能与还原度中做一个平衡。

另外，UsedRange如果是整行或整列的话会返回 -1的结果，这里我们需要对 -1做特殊处理，否则后续步骤会有问题

2.给图片对象添加点击事件，点击后获取相对的点击位置 x,y。照相机生成的shapeWidth，shapeHeight 即为图片原始的宽度和高度，也就是表格的真实宽度和高度。

1. eagleEyeImage.addEventListener('click', function(event) {
   
2. var shapeWidth = shape.width();
   
3. var shapeHeight = shape.height();
   
4. clickEagleEye(event,sheet,shapeWidth,shapeHeight);
   
5. });

复制代码

1. function clickEagleEye(event,sheet,width,height){
   
2.                                 var x = event.offsetX;
   
3.                                 var y = event.offsetY;
   
4.                                 var h = x * width / 250;
   
5.                                 var v = y * height / 150;
   
6.                                 scrollh = h - lastScrollH;
   
7.                                 scrollv = v - lastScrollV;
   
8.                                 sheet.scroll(scrollv, scrollh);
   
9.                                 lastScrollH = h;
   
10.                                 lastScrollV = v;
    
11.                         }

复制代码

          3.根据之前传入的表格真实的宽度和高度，图片缩放后的宽度高度，以及相对图片的点击位置。我们可以计算得出点击出位于真实表格的相对位移。之后通过sheet.scroll方法来控制滚动条滚动相应距离。

具体应用如下图所示：

点击视图上的对应按钮，右下角会弹出缩略图，点击缩略图上位置，表格页面会调转到对应位置。
完整的demo可以参考附件：