利用浮动对象实现标注区域的功能

这篇文章分享一个比较实用的功能：利用浮动对象实现标注区域的功能。
一、场景：
我先描绘几个应用场景，看看是不是大家也会遇到：
1、当用户选中某片区域，想做一个框选的标记，但又不想真的修改这部分区域的样式时，类似：


2、多人协同编辑时，其它用户选中的区域，需要用人名+标记的方式对这个区域进行标记，如图：


二、思路：


1、自定义单元格paint
可能有机智的同学已经想到了，用自定义单元格的paint方法，在paint中通过修改Style对象可以实现
既修改渲染样式，又能不影响单元格实际style属性。如下代码所示：

1.     CustomBase.prototype.paint = function (context, value, x1, y1, a1, b1, style, ctx) {
   
2.         if (!context) {
   
3.             return;
   
4.         }
   
5.         if(this.showEffect){
   
6.             if(sels && sels.length !== 0){
   
7.                 var row = ctx.row, col = ctx.col;
   
8.                 sels.forEach(function (sel) {
   
9.                     // 设置当前绘制样式，不会影响导出效果
   
10.                     var rowSpan = sel.row + sel.rowCount;
    
11.                     var colSpan = sel.col + sel.colCount;
    
12.                     if(row >= sel.row && row < rowSpan
    
13.                         || col >= sel.col && col < colSpan){
    
14.                         style.backColor = "red";
    
15.                     }
    
16.                 })
    
17.             }
    
18.         }
    
19.         oldPaint.apply(this, [context, value, x1, y1, a1, b1, style, ctx]);
    
20.     };

复制代码

但是很可惜，在这个案例中，无法通过paint方法实时修改单元格的border，
原因在于border的渲染不是在paint中执行的，paint的渲染区域不包含border，因此这里不能实现。

2、利用浮动div，框选出对应的区域：
Dexter版主分享过一篇相关的文章，非常巧妙地利用div实现了这个功能：
https://gcdn.grapecity.com.cn/showtopic-76594-1-1.html
界面美观，自定制程度高，对用户操作没有任何影响。
唯一的小问题就是这个示例相对有一点点复杂，需要咱们做一些补充和封装。
强烈推荐。

3、利用SpreadJS的浮动对象，选出对应区域：
SpreadJS浮动对象是原生支持的功能，能够自动随单元格位置、尺寸的变动而变动，
不需要我们自己用事件去处理，只需要设置宽、高为0，仅保留边框，即可实现框选的效果。
关键代码：

1. var upperborder = new GC.Spread.Sheets.FloatingObjects.FloatingObject("userId_" + userId + "_upperborder");
   
2. // 起始行
   
3. upperborder.startRow(row);
   
4. // 起始列
   
5. upperborder.startColumn(col);
   
6. // 结束行
   
7. upperborder.endColumn(col + colCount);
   
8. // 结束列
   
9. upperborder.endRow(row);
   
10. // 是否允许移动
    
11. upperborder.allowMove(false);
    
12. // 是否允许更改尺寸
    
13. upperborder.allowResize(false);
    
14. // 是否选中
    
15. upperborder.isSelected(false);
    
16. // 是否锁定
    
17. upperborder.isLocked(true);
    
18. // 随单元格尺寸变化而变化
    
19. upperborder.dynamicSize(true);
    
20. // 设置样式
    
21. upperborder.content(topBorderElement);

复制代码

完整代码见附件。