[17] 单元格里面图片双击问题

我现在用的是点击这个方法，获取图片的信息。但发现点击好像满不了我所达到的效果。

我想双击的时候，获取图片相应的信息。但没有找到相应的事件。

我所想要达到的效果是，双击之后，显示层弹,图片就能显示原始图片了。
如果单击的话，也能达到效果。但是用户对于删除图片等操作就不友好。

1. spread.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, function (sender, args) {
   
2. 
   
3.         console.log(countConfig, "单元格点击图片---", sender, args);
   
4. 
   
5.     });

复制代码

图片插入单元格

1. let Designer = GC.Spread.Sheets.Designer.findControl('designer-container');
   
2.     let spread = Designer.getWorkbook()
   
3.     let sheet = spread.getActiveSheet();
   
4.     let height = sheet.getRowHeight(1)   //获取第2行行高
   
5.     let width = sheet.getColumnWidth(2) //获取第2列宽度
   
6.     console.log(height, '--宽度--', width)
   
7.     let pic = sheet.shapes.addPictureShape("pic2", "https://p3.toutiaoimg.com/tos-cn-i-qvj2lq49k0/2e346589036945b9a9272983760b4b88~tplv-tt-large.image", 0,0,width,height)
   
8.     pic.startRow(1)  //开始行在第二行
   
9.     pic.endRow(2)  //结束行在第三行
   
10.     pic.startColumn(1)  //开始列在第二列
    
11.     pic.endColumn(2)     //结束列在第三列
    
12.     // pic.includeEmptyRegionCells(true)
    
13.     pic.allowMove(false)  //图片不允许移动
    
14.     pic.allowResize(false)  //图片不允许拉动调整大小
    
15.     pic.dynamicMove(true)  //图片是否随插入行列移动
    
16.     pic.dynamicSize(true)  //图片是否随行高列宽变化而变化

复制代码

您好，可以参考附件中的demo

Ellia.Duan 发表于 2024-8-13 17:19
您好，可以参考附件中的demo

好奇怪，我直接把代码拿过来，好像双击不生效。不会到最后一步去。
帮忙看下是什么原因



给你看下我的代码
我用的是vue3

所有的代码，都在 onMounted 方法里面

let designer = new GC.Spread.Sheets.Designer.Designer(document.getElementById("designer-container"), config);
  let spread = designer.getWorkbook();

let sheet = spread.getActiveSheet();

config 的参数，我没有放出来。

1. if (row >= startRow && row <= endRow && col >= startColumn && col <= endColumn)  不会进入到这个方法里面来。

复制代码

1. document.getElementById('designer-container').addEventListener('dblclick', function (e) {
   
2.         let _x = e.pageX - this.offsetLeft
   
3.         let _y = e.pageY - this.offsetTop
   
4.         let result = spread.hitTest(_x, _y)
   
5.         var {row, col} = getHitAreaName(result);
   
6. 
   
7.         for (let i = 0; i < sheet.shapes.all().length; i++) {
   
8.             if (sheet.shapes.all()[i] instanceof GC.Spread.Sheets.Shapes.PictureShape) {
   
9.                 let pic = sheet.shapes.all()[i]
   
10.                 let startRow = pic.startRow()
    
11.                 let endRow = pic.endRow()
    
12.                 let startColumn = pic.startColumn()
    
13.                 let endColumn = pic.endColumn()
    
14.                 if (row >= startRow &&  row <= endRow && col >= startColumn && col <= endColumn) {
    
15.                     console.log(startRow,endRow,startColumn,endColumn)
    
16.                     console.log(pic,"----当前图片双击", pic.name())
    
17.                 }
    
18. 
    
19.             }
    
20.         }
    
21.     });

复制代码

这是放插入单元格的图片

1. const newaddImgRow = () =>{
   
2.     let Designer = GC.Spread.Sheets.Designer.findControl('designer-container');
   
3.     let spread = Designer.getWorkbook()
   
4.     let sheet = spread.getActiveSheet();
   
5.     let height = sheet.getRowHeight(1)   //获取第2行行高
   
6.     let width = sheet.getColumnWidth(2) //获取第2列宽度
   
7.     console.log(height, '--宽度--', width)
   
8.     let pic = sheet.shapes.addPictureShape("pic2", "https://p3.toutiaoimg.com/tos-cn-i-qvj2lq49k0/2e346589036945b9a9272983760b4b88~tplv-tt-large.image", 0,0,width,height)
   
9.     pic.startRow(1)  //开始行在第二行
   
10.     pic.endRow(2)  //结束行在第三行
    
11.     pic.startColumn(1)  //开始列在第二列
    
12.     pic.endColumn(2)     //结束列在第三列
    
13.     // pic.includeEmptyRegionCells(true)
    
14.     pic.allowMove(false)  //图片不允许移动
    
15.     pic.allowResize(false)  //图片不允许拉动调整大小
    
16.     pic.dynamicMove(true)  //图片是否随插入行列移动
    
17.     pic.dynamicSize(true)  //图片是否随行高列宽变化而变化
    
18. }

复制代码

插入图片是生效的。

鸳鸯配2024 发表于 2024-8-13 18:20
好奇怪，我直接把代码拿过来，好像双击不生效。不会到最后一步去。
帮忙看下是什么原因

如果代码没有执行到最后一步，那就先排查下进入最后一步之前的点击区域和图片位置的行列信息，看看是否符合进入最后一步的条件。

Wilson.Zhang 发表于 2024-8-14 10:01
如果代码没有执行到最后一步，那就先排查下进入最后一步之前的点击区域和图片位置的行列信息，看看是否符 ...

我不知道问题在哪，能帮忙看下吗？

鸳鸯配2024 发表于 2024-8-14 11:03
我不知道问题在哪，能帮忙看下吗？

在分析这个问题，这些代码没能复现出来您的问题，咱们的工程环境不一致，需要您提供一个能够复现问题的demo。