개요

SpreadJS에는 여러 Excel 셰이프를 비롯하여 180개 이상의 셰이프에 대한 지원이 포함됩니다. 또한 SpreasJS는 데이터 기반 셰이프를 사용하여 고급 기능을 제공합니다. 예를 들어 데이터베이스 또는 기타 데이터 소스의 데이터를 사용하여 셰이프 속성을 동적으로 생성할 수 있으며, 이를 통해 제조 공장용 셰이프처럼 대화형 셰이프를 만들 수 있습니다.

SpreadJS는 다음과 같은 세 가지 셰이프 유형을 제공합니다. 자동 셰이프: 자동 셰이프는 독립 실행형으로 사용할 수 있습니다. 연결선 셰이프: 연결선 셰이프는 독립 실행형 또는 다른 셰이프에 연결하여 사용할 수 있습니다. 그룹 셰이프: 그룹 셰이프는 실제 셰이프가 아니지만, 셰이프 그룹을 쉽고 빠르게 처리하기 위해 관리자로 사용할 수 있습니다. 셰이프 기능을 사용하려면 js 파일 링크를 문서의 헤더 섹션에 추가하십시오. ShapeCollection API를 사용하여 시트에서 모든 셰이프를 관리할 수 있습니다. 아래와 같이 sheet.shapes.add 메서드로 자동 셰이프를 만들 수 있습니다. 아래와 같이 sheet.shapes.addConnector 메서드로 연결선 셰이프를 만들 수 있습니다. 다음과 같은 코드를 사용하여 이름이 있는 셰이프를 가져오거나 제거할 수 있습니다.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); initEvent(spread); }; function fillShapeTypeList(type, dom) { var names = []; for (var name in type) { if(name === "none" || (parseInt(name, 10)) == name) { continue; } names.push({name: name, value: type[name]}); } names.sort(function (a, b) { return a.name > b.name ? 1 : -1 }); var html = ""; names.forEach(function (item) { html += '<option value="' + item.value + '">' + item.name + '</option>'; }); dom.innerHTML= html; } function getActiveConnectorShape(sheet) { return sheet.shapes.all().filter(function(sp){ return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.ConnectorShape; }); } function initSpread(spread) { fillShapeTypeList(GC.Spread.Sheets.Shapes.AutoShapeType, _getElementById("autoShapeType")); fillShapeTypeList(GC.Spread.Sheets.Shapes.ConnectorType, _getElementById("connectShapeType")); spread.getActiveSheet().shapes.add("rectangle", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 40, 20, 150, 150); var lineShape = spread.getActiveSheet().shapes.addConnector("line", GC.Spread.Sheets.Shapes.ConnectorType.straight, 290, 20, 420, 170); var lineShapeStyle = lineShape.style(); lineShapeStyle.line.width = 8; lineShape.style(lineShapeStyle); } function initEvent(spread) { _getElementById("insertShape").addEventListener('click', function () { var sheet = spread.getActiveSheet(), shapes = sheet.shapes, total = shapes.all().length; var x = 40 + (total % 2) * 250, y = parseInt(total / 2) * 200 + 20; var shape = shapes.add('', _getElementById("autoShapeType").value, x, y); shape.style().hAlign = 1; }); _getElementById("insertConnectShape").addEventListener('click', function() { var sheet = spread.getActiveSheet(), shapes = sheet.shapes, total = shapes.all().length; var x = 40 + (total % 2) * 250, y = parseInt(total / 2) * 200 + 20; shapes.addConnector('', parseInt(_getElementById("connectShapeType").value), x, y, x + 200, y + 200); }); } function _getElementById(id){ return document.getElementById(id); }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta charset="utf-8" /> <meta name="spreadjs culture" content="ko-kr"/> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script> <script src="$DEMOROOT$/ko/purejs/node_modules/@mescius/spread-sheets-resources-ko/dist/gc.spread.sheets.resources.ko.min.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 class="options-container"> <div class="option-row"> Try selecting a shape from either of the drop-down menus and click the ‘Add’ button to add that shape to the Spread instance. </div> <div class="option-row"> <label for='autoShapeType'>Add Shape: </label> <select id='autoShapeType' class="shapeSelect"></select> <input type='button' id='insertShape' value="Add"/> <label for='connectShapeType'>Add Connect Shape: </label> <select id='connectShapeType' class="shapeSelect"></select> <input type='button' id='insertConnectShape' value="Add"/> </div> </div> </div></body> </html>
.sample-tutorial { position: relative; height: 100%; overflow: hidden; } .sample-spreadsheets { width: calc(100% - 280px); height: 100%; overflow: hidden; float: left; } .options-container { float: right; width: 280px; padding: 12px; height: 100%; box-sizing: border-box; background: #fbfbfb; overflow: auto; } .option-row { font-size: 14px; padding-left: 5px; } .divide-line { width: 100%; height: 1px; background: #cbcbcb; margin-top: 10px; margin-bottom: 3px; } .title { text-align: center; font-weight: bold; } label { display: block; margin-top: 15px; margin-bottom: 5px; } p { padding: 2px 10px; background-color: #F4F8EB; } input { width: 160px; margin-left: 10px; display: inline; } input[type=button] { width: 50px; margin-left: 1px; } select { width: 160px; margin-left: 10px; display: inline; } textarea { width: 160px; margin-left: 10px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }