SpreadJS 自定义右键菜单功能扩展——图片右键菜单

背景：我们知道使用 SpreadJS 能够根据自己的需求自定义右键菜单的功能。以此实现在工作簿的不同区域右键点击，呼出不同的右键菜单，实际的项目中有小伙伴有这样的需求：想要在右击图片时，呼出自定义的右键菜单实现自己额外对图片处理的逻辑。

示例实现： 1. 右键图片呼出自定义菜单
                  2. 双击图片响应事件
                  3.双击单元格、行头、列头响应事件




右键菜单的主要思路是通过继承ContextMenu的方式自定义右键菜单逻辑

1. function ContextMenu(){}
   
2.         ContextMenu.prototype = new GC.Spread.Sheets.ContextMenu.ContextMenu(spread);
   
3.         ContextMenu.prototype.onOpenMenu = function (menuData, itemsDataForShown, hitInfo, spread) {}

复制代码

判断右键区域并编写呼出菜单的逻辑

1. if (hitInfo.worksheetHitInfo.floatingObjectHitInfo && hitInfo.worksheetHitInfo.floatingObjectHitInfo.floatingObject) {
   
2.                   
   
3.       itemsDataForShown.push({text: "新增图片", name: "add", command: "addPic",
   
4.       workArea: "viewportcolHeaderrowHeaderslicercorner"});
   
5.       itemsDataForShown.push({text: "删除图片", name: "delete", command: "delePic",
   
6.       workArea: "viewportcolHeaderrowHeaderslicercorner"});
   
7.       itemsDataForShown.push({text: "选择图片", name: "select", command: "selectPic",
   
8.       workArea: "viewportcolHeaderrowHeaderslicercorner"});
   
9.       itemsDataForShown.push({text: "缩放图片", name: "zoom", command: "zoomPic",
   
10.       workArea: "viewportcolHeaderrowHeaderslicercorner"});
    
11.                   
    
12.             }

复制代码

需要实现右键菜单的命令还需要注册对应的命令

1. spread.commandManager().register("addPic",{
   
2.      canUndo: true,
   
3.      execute: function (context, options, isUndo) {
   
4.      var Commands = GC.Spread.Sheets.Commands;
   
5.      // 在此加cmd
   
6.     options.cmd = "addPic";
   
7.     if (isUndo) {
   
8.          Commands.undoTransaction(context, options);
   
9.     return true;
   
10.     } else {
    
11.          Commands.startTransaction(context, options);

复制代码

双击响应事件主要是依靠hitTest函数实现，也就是通过判断鼠标双击的区域做出响应，关于命中测试可以参考学习指南：
https://demo.grapecity.com.cn/sp ... rkbook/hit-testing#

1. function getHitAreaName(result){
   
2.             if(result) {
   
3.                 var str = "";
   
4.                 var worksheetHitInfo = result.worksheetHitInfo;
   
5.                 var tabStripHitInfo = result.tabStripHitInfo;
   
6.                 if (worksheetHitInfo.floatingObjectHitInfo && worksheetHitInfo.floatingObjectHitInfo.floatingObject) {
   
7.                     alert("我是图片")
   
8.                 } else {
   
9.                     var hitTestType = worksheetHitInfo.hitTestType;
   
10.                     if (hitTestType === 0) {
    
11.                         str = '我是表角';
    
12. 
    
13.                     } else if (hitTestType === 1) {
    
14.                         str = '我是列头';
    
15.                         alert(str);
    
16.                     } else if (hitTestType === 2) {
    
17.                         str = '我是行头';
    
18.                         alert(str);
    
19.                     } else {
    
20.                         var row = worksheetHitInfo.row;
    
21.                         var col = worksheetHitInfo.col;
    
22.                         str = '我是单元格';
    
23.                         alert(str)
    
24.                     }
    
25.                 }
    
26.             }
    
27.         }

复制代码

下载附件即可查看完整的demo！