形状对齐

SpreadJS提供通过基准线对齐形状。 在以下示例中您可以轻松快速地改变形状的位置。

你可以用以下代码来对齐形状。 你可以改变捕捉模式来轻松对齐形状。 现在当你拖拽或者改变形状大小, 形状边界会自动对齐到网格线。 你也能对齐其他形状边界。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 1 }); initSpread(spread); }; function initSpread(spread) { let sheet = spread.getActiveSheet(); var rect1 = sheet.shapes.add('rect1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 50, 230, 100); var shapeStyle = rect1.style(); shapeStyle.fill.color = '#40E0D0'; var rect2 = sheet.shapes.add('rect2', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 200, 200, 150, 100); var rect3 = sheet.shapes.add('rect3', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 500, 350, 200, 100); spread.bind(GC.Spread.Sheets.Events.ShapeSelectionChanged, function () { shapeSelectionChangedHandler(spread); }); document.querySelectorAll('.align').forEach(function (btn) { btn.addEventListener('click', function (e) { let activeSheet = spread.getActiveSheet(); let activeShapes = activeSheet.shapes.all().filter(function (sp) { return sp.isSelected(); }); let classNames = e.target.className.split(' '); let cmd = classNames[1]; let alignment = classNames[2]; var commandManager = spread.commandManager(); commandManager.execute({ cmd: cmd, sheetName: activeSheet.name(), shapeNames: activeShapes.map(function (s) { return s.name(); }), alignment: getAlignmentEnum(alignment) }); }); }); document.querySelector('#changeSnapMode').addEventListener('change', function (e) { let sheet = spread.getActiveSheet(); switch (e.target.value) { case '0': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.none); return; case '1': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid); return; case '2': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.shape); return; case '3': sheet.shapes.snapMode(GC.Spread.Sheets.Shapes.SnapMode.grid | GC.Spread.Sheets.Shapes.SnapMode.shape); return; default: return; } }); shapeSelectionChangedHandler(spread); } function toggleEnable(enable, className) { document.querySelectorAll('.' + className).forEach(function (btn) { if (enable) { btn.removeAttribute('disabled'); } else { btn.setAttribute('disabled', ''); } }) } function getAlignmentEnum(alignment) { switch (alignment) { case 'left': return GC.Spread.Sheets.Shapes.HorizontalAlign.left; case 'center': return GC.Spread.Sheets.Shapes.HorizontalAlign.center; case 'right': return GC.Spread.Sheets.Shapes.HorizontalAlign.right; case 'top': return GC.Spread.Sheets.Shapes.VerticalAlign.top; case 'middle': return GC.Spread.Sheets.Shapes.VerticalAlign.middle; case 'bottom': return GC.Spread.Sheets.Shapes.VerticalAlign.bottom; default: return; } } function _getElementById(id) { return document.getElementById(id); } function shapeSelectionChangedHandler(spread) { let activeSheet = spread.getActiveSheet(); let shapes = activeSheet.shapes.all(), activeShapes = []; for (let i = 0; i < shapes.length; i++) { let shape = shapes[i]; if (shape.isSelected()) { activeShapes.push(shape); } } if (activeShapes.length > 1) { toggleEnable(true, 'justify'); } else { toggleEnable(false, 'justify'); } if (activeShapes.length > 2) { toggleEnable(true, 'distribute'); } else { toggleEnable(false, 'distribute'); } }
<!doctype html> <html style="height:100%;font-size:14px;"> <head> <meta name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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 class="options-container"> <div class="option-row"> Try selecting the shapes in Spread and change different alignment to see effect. </div> <div class="option-row"> <label>Left Align Selected Shapes</label> <input type="button" class="align moveShapesByHAlign left justify" value="left"> <br /> <label>Center Align Selected Shapes</label> <input type="button" class="align moveShapesByHAlign center justify " value="center"> <br /> <label>Right Align Selected Shapes</label> <input type="button" class="align moveShapesByHAlign right justify" value="right"> <br /> <label>Top Align Selected Shapes</label> <input type="button" class="align moveShapesByVAlign top justify" value="top"> <br /> <label>Middle Align Selected Shapes</label> <input type="button" class="align moveShapesByVAlign middle justify" value="middle"> <br /> <label>Bottom Align Selected Shapes</label> <input type="button" class="align moveShapesByVAlign bottom justify" value="bottom"> <br /> <label>Horizontal Distribute Selected Shapes</label> <input type="button" class="align moveShapesByHDistribute distribute" value="Horizontal"> <br /> <label>Vertical Distribute Selected Shapes</label> <input type="button" class="align moveShapesByVDistribute distribute" value="Vertical"> <br /> <label>Change Shapes SnapMode to align conveniently</label> <select id="changeSnapMode"> <option value="0" selected>none</option> <option value="1">grid</option> <option value="2">shape</option> <option value="3">grid and shape</option> </select> <br /> </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: 5px; margin-top: 5px; } .sample-options { z-index: 1000; } label { display: block; margin-bottom: 6px; } p{ padding:2px 10px; background-color:lavender; } input { padding: 4px 6px; width: 160px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }