SpreadJS 文档
SpreadJS 文档 / 开发者指南 / 特性 / 管理数据可视化和对象 / 形状 / 连接器形状
在本主题中
    连接器形状
    在本主题中

    连接器形状可用于使用不同的线,箭头和连接点连接两个或更多个形状。 SpreadJS为在表单中添加和自定义连接器形状提供了广泛的支持。

    您可以使用不同类型的箭头在工作表中添加连接器形状,包括普通箭头(无侧指),基本箭头(无侧指),打开箭头,隐形箭头,椭圆形箭头和菱形箭头。

    基本上,连接器的形状有以下两种类型:

    1. 直线连接器形状-指使用直线连接器连接两个或多个形状的形状。
    2. 弯头连接器形状-指使用成角度的连接器连接两个或多个形状的形状。

    下面共享的截图描绘了连接器形状,该连接器形状将带有箭头的矩形和圆形连接起来。

    示例代码

    本示例说明如何在工作表中添加连接器形状。

    JavaScript
    复制代码
    // Adding the connector shape to the worksheet 
            
     window.onload = function ()
    {
       var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
       var sheet = spread.getActiveSheet();          
       //Add two shapes between which a connector shape will be added
       var shape1 = sheet.shapes.add("myShape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 150, 100, 100, 100);            
       var shape2 = sheet.shapes.add("myShape2", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 700, 100, 100, 100);
       // Add a connector shape to connect the two shapes defined above
       var connectorShape = sheet.shapes.addConnector("myConnectorShape", GC.Spread.Sheets.Shapes.ConnectorType.straight, 250, 150, 700, 150);
       // Setting connector shape style
       var oldStyle = connectorShape.style();
       oldStyle.line.color = 'red';
       oldStyle.line.lineStyle = GC.Spread.Sheets.Shapes.PresetLineDashStyle.dot;
       oldStyle.line.width = 10;
       oldStyle.line.capType = GC.Spread.Sheets.Shapes.LineCapStyle.square;
       oldStyle.line.joinType = GC.Spread.Sheets.Shapes.LineJoinStyle.miter;
       oldStyle.line.beginArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle;
       oldStyle.line.beginArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.narrow;
       oldStyle.line.beginArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.short;
       oldStyle.line.endArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle;
       oldStyle.line.endArrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth.medium;
       oldStyle.line.endArrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength.medium;
       connectorShape.style(oldStyle);
      // Set startConnector for the connector shape
       var startConnector = connectorShape.startConnector();
       connectorShape.startConnector({ name: shape1.name(), index: 3 });
       
       // Set endConnector for the connector shape
       var endConnector = connectorShape.endConnector();
       connectorShape.endConnector({ name: shape2.name(), index: 2 });
    };
    

     

    注意: 集成连接器形状时,SpreadJS不支持以下方案:

    • 不支持曲线和自由类型的连接器形状。 另外,与Excel相比,连接器形状的布局可能会显示不同。 在使用BentArrow连接形状时,Excel可能会显示裁剪结果覆盖的区域,但SpreadJS会将其保留为填充。
    • 调整某些形状的大小,例如:Balloon,RectangularCallout,OvalCallout,CloudCallout等,可能会导致剪切结果。 此外,将点调整为最大值时,诸如Cube和DiagonalStrip等形状可能会产生意外结果。