自定义复杂列头排序按钮

背景：列头自定义排序按钮我们之前有过实现，地址：https://demo.grapecity.com.cn/SpreadJS/cdn/extendedExample/#/demos/columnHeaderSort
但在复杂表头的情况下（含合并单元格、不定行高时），排序按钮的尺寸会变得过大或产生位移，
应某些客户要求，改进了此示例。


核心代码（完整示例见附件）：

1. SortHearderCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
   
2.                         spreadNS.CellTypes.ColumnHeader.prototype.paint.apply(this, arguments);
   
3.                         var margin = 3;
   
4.                         var gap = 1;
   
5.                         var color = "red";
   
6.                         var size = 20;
   
7.                         var tag = context.sheet.getTag(context.row, context.col, context.sheetArea);
   
8.                         ctx.save();
   
9.                         if(!tag || tag && tag.ascending){
   
10.                                 ctx.beginPath();
    
11.                                 ctx.fillStyle = color;
    
12.                                 ctx.moveTo(x+width-size+margin,y+height/2-gap );
    
13.                                 ctx.lineTo(x+width-margin,y+height/2-gap);
    
14.                                 ctx.lineTo(x+width-size/2,y + (height - size)/2 + margin);
    
15.                                 ctx.closePath();
    
16.                                 ctx.fill();
    
17.                         }
    
18.                         if(!tag || tag && !tag.ascending){
    
19.                                 ctx.beginPath();
    
20.                                 ctx.fillStyle = color;
    
21.                                 ctx.moveTo(x+width-size+margin,y+height/2+gap);
    
22.                                 ctx.lineTo(x+width-margin,y+height/2+gap);
    
23.                                 ctx.lineTo(x+width-size/2,y+(height+size)/2 - margin);
    
24.                                 ctx.closePath();
    
25.                                 ctx.fill();
    
26.                         }
    
27.                         ctx.restore();
    
28.                 };

复制代码