SpreadJS线条组件如何删除

请问SpreadJS线条组件如何调用api进行删除？ 如图，通过点击按钮删除选中的线条  

俊123 发表于 2024-8-20 15:25
附件是demo

运行您提供的文件，浏览器提示缺少文件，如下图所示：


需要您提供一个能够复现问题的完整demo。

附件是demo

俊123 发表于 2024-8-19 18:05
还是不行，ShapeSelectionChanged代码没有触发，获取不到名称

这个添加线条的代码，看看是否有问题

添加线条的代码和官网教程中的一致，而且您也通过代码创建了线条，所以添加线条的代码没问题。那请您给我们提供一个能够复现问题的完整demo吧，这样有助于定位问题。

还是不行，ShapeSelectionChanged代码没有触发，获取不到名称

这个添加线条的代码，看看是否有问题
function onLine() {
                                var spread = GC.Spread.Sheets.Designer.findControl(document.getElementById('ExcelTemplateDiv')).getWorkbook();
                                var index = spread.getActiveSheetIndex(); //获取控件的活动工作表索引。
                                var sheet = spread.getSheet(index); // 获取下标为0的工作表
                                console.log(index)
                                var command = {
                                        canUndo: true,
                                        execute: function(spread, options, isUndo) {
                                                var Commands = GC.Spread.Sheets.Commands;
                                                if (isUndo) {
                                                        Commands.undoTransaction(spread, options);
                                                        return true;
                                                } else {
                                                        Commands.startTransaction(spread, options);
                                                        var shapeData = [{
                                                                type: 'straight',
                                                        }]
                                                        spread.suspendPaint();
                                                        // var sheet = spread.getSheet(0);
                                                        // sheet.name("ConnectorShape");
                                                        for (var i = 0; i < shapeData.length; i++) {
                                                                console.log("shapeData[i]", shapeData[i],shapeData)
                                                                initShape(sheet, shapeData[i], i); //add connectorShape
                                                        }
                                                        sheet.setValue(1, 1, 'STRAIGHT');
                                                        sheet.setValue(1, 5, 'ELBOW');
                                                        spread.options.tabStripRatio = 0.8;
                                                        spread.resumePaint();
                                                        Commands.endTransaction(spread, options);
                                                        return true;
                                                }
                                        }
                                };

                                var rowindex = sheet.getActiveRowIndex(); //获取选择的行信息
                                var selections = sheet.getSelections();
                                var commandManager = spread.commandManager();
                                commandManager.register('initShape', command);
                                commandManager.execute({
                                        cmd: 'initShape',
                                        sheetName: spread.getSheet(index).name()
                                });

                        }

                        //线条
                        function initShape(sheet, shapeData, index) {
                                var colors = ["#000000", "#F8B22E", "black", "#00C2D6"];
                                var arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle;
                                var arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength;
                                var arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth;
                                var beginX = 70,
                                        endX = 250;
                                if (shapeData.type === 'elbow') {
                                        beginX = 320;
                                        endX = 500;
                                        index = index % 4;
                                }
                                var connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX,
                                        80 + index * 70, endX, 50 + index * 70);
                                if (shapeData.beginArrowhead !== undefined) {
                                        var connectorBeginStyle = connectorShape.style();
                                        var beginLine = connectorBeginStyle.line;
                                        beginLine.beginArrowheadStyle = arrowheadStyle[shapeData.beginArrowhead.style];
                                        beginLine.beginArrowheadWidth = arrowheadWidth[shapeData.beginArrowhead.width];
                                        beginLine.beginArrowheadLength = arrowheadLength[shapeData.beginArrowhead.length];
                                        connectorShape.style(connectorBeginStyle);
                                }
                                if (shapeData.endArrowhead !== undefined) {
                                        var connectorEndStyle = connectorShape.style();
                                        var endLine = connectorEndStyle.line;
                                        endLine.endArrowheadStyle = arrowheadStyle[shapeData.endArrowhead.style];
                                        endLine.endArrowheadWidth = arrowheadWidth[shapeData.endArrowhead.width];
                                        endLine.endArrowheadLength = arrowheadLength[shapeData.endArrowhead.length];
                                        connectorShape.style(connectorEndStyle);
                                }
                                var connectorStyle = connectorShape.style();
                                var lineTemp = connectorStyle.line;
                                lineTemp.width = 3;
                                lineTemp.color = colors[index];
                                connectorShape.style(connectorStyle);
                        }

俊123 发表于 2024-8-19 16:46
请问，我选中当前线条了但是我如果点击删除线条就会失焦，在没有键盘的情况下操作如何获取当前选中的这个线 ...

您可以通过ShapeSelectionChanged事件获取被选中的线条以及其他形状，通过监听信息进一步获取线条名称，参考如下代码：

1. sheet.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, function(e, args) {
   
2.     console.log('shape selection changed: ', e, args);
   
3.     var shape = args.shape;
   
4.     console.log('shape name: ', shape.name());
   
5. });

复制代码

请问，我选中当前线条了但是我如果点击删除线条就会失焦，在没有键盘的情况下操作如何获取当前选中的这个线条的名称。   shapes.remove('？？？');

您好！在SpreadJS中，线条也是一种形状，工作表中所有形状都被ShapeCollection统一管理，通过ShapeCollection:remove()便可将指定名称的形状删除，可以参考如下代码：

1. var shapes = sheet.shapes;
   
2. shapes.remove('shapeName');
   

复制代码

关于相关API，请参考官网API文档了解详情：
Worksheet:shapes()--https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Worksheet#shapes
ShapeCollection--https://demo.grapecity.com.cn/spreadjs/help/api/classes/GC.Spread.Sheets.Shapes.ShapeCollection

在按钮居中加入下面的代码即可实现你说的功能，遍历shapes得到选中的shape，使用remove删除即可

1.             document.getElementById("test").onclick = function () {
   
2.                   var sheet = spread.getActiveSheet();
   
3.                   sheet.shapes.all().forEach(shape => {
   
4.                         if (shape.isSelected()) {
   
5.                               sheet.shapes.remove(shape.name());
   
6.                         }
   
7.                   });
   
8.             }

复制代码

我使用chrome的移动端模式，没有复现你说的shape失去选中焦点的问题，参考下面的gif，可以顺利删除shape