연결선 도형

SpreadJS는 Spread에서 서로 다른 셰이프 또는 항목 간에 연결을 만드는 데 사용되는 두 가지 연결선 셰이프를 제공합니다. 이 Spread 인스턴스는 통합 문서에 추가할 수 있는 다양한 연결선 셰이프를 보여 줍니다.

SpreadJS는 두 가지 유형의 연결선 도형을 제공합니다. Straight Elbow 연결선 도형(선)은 독립 실행형 또는 다른 도형에 연결하여 사용할 수 있습니다. 도형의 양쪽에 각각 화살표 유형을 지정할 수 있습니다. 연결선 도형을 추가하고 ConnectorShape API를 사용하여 도형 스타일을 변경할 수 있습니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); initSpread(spread); }; function initSpread(spread) { var shapeData = [ { type: 'straight', }, { type: 'straight', endArrowhead: { style: "triangle", width: 'medium', length: 'medium', } }, { type: 'straight', beginArrowhead: { style: "stealth", width: 'wide', length: 'wide', } }, { beginArrowhead: { style: "stealth", width: 'medium', length: 'medium', }, type: 'straight', endArrowhead: { style: "diamond", width: 'wide', length: 'wide', } }, { type: 'elbow', }, { type: 'elbow', endArrowhead: { style: "oval", width: 'medium', length: 'medium', }, }, { type: 'elbow', beginArrowhead: { style: "oval", width: 'wide', length: 'wide', }, }, { beginArrowhead: { style: "open", width: 'medium', length: 'medium', }, type: 'elbow', endArrowhead: { style: "triangle", width: 'medium', length: 'medium', } } ]; spread.suspendPaint(); var sheet = spread.getSheet(0); sheet.name("ConnectorShape"); for (var i = 0; i < shapeData.length; i++) { initShape(sheet, shapeData[i], i);//add connectorShape } sheet.setValue(1, 4, 'stright'); sheet.setValue(1, 10, 'elbow'); spread.options.tabStripRatio = 0.8; spread.resumePaint(); } function initShape(sheet, shapeData,index) { var colors = ["red", "blue", "black", "pink", "green", "orange"]; var arrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle; var arrowheadLength = GC.Spread.Sheets.Shapes.ArrowheadLength; var arrowheadWidth = GC.Spread.Sheets.Shapes.ArrowheadWidth; var beginX = 200,endX = 400; if(shapeData.type === 'elbow'){ beginX = 550; endX = 750; index = index%4; } var connectorShape = sheet.shapes.addConnector('', GC.Spread.Sheets.Shapes.ConnectorType[shapeData.type], beginX, 120+index*70, endX, 80+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 = 5; lineTemp.color = colors[index]; connectorShape.style(connectorStyle); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="ko-kr"/> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@grapecity/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="app.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <div class="sample-tutorial"> <div id="ss" class="sample-spreadsheets"></div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: 100%; height: 100%; overflow: hidden; float: left; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }