连接器形状

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

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

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

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

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

示例代码

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

// 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不支持以下方案：