シェイプの配置

SpreadJSを使用すると、シェイプの配置オプションや配分オプションを使用したり、他のシェイプやグリッドにスナップしたりして、複数のシェイプの位置の微調整を簡単に行えます。

次のコードを使用して、シェイプを整列できます: snapeModeを変更して、シェイプの整列を簡単に行うことができます これにより、シェイプをドラッグまたはサイズ変更すると、シェイプの境界が自動的にグリッド線に揃えられます。 同様に、他のシェイプの境界に合わせることもできます
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 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, 300, 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]; console.log(e.target.className); var commandManager = spread.commandManager(); commandManager.execute({ cmd: cmd, sheetName: activeSheet.name(), shapeNames: activeShapes.map(function (s) { return s.name(); }), alignment: getAlignmentEnum(alignment) }); }); }); document.querySelectorAll('.align-dd').forEach(function (dd) { dd.addEventListener('change', 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]; var commandManager = spread.commandManager(); commandManager.execute({ cmd: cmd, sheetName: activeSheet.name(), shapeNames: activeShapes.map(function (s) { return s.name(); }), alignment: getAlignmentEnum(e.target.value) }); }); }); 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="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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"> 2つ以上のシェイプを選択し、以下のさまざまな配置オプションを変更して効果を確認します。 </div> <div class="option-row"> *垂直および水平の配分の場合、3つの形状すべてを選択する必要があります。 </div> <div class="option-row"> <label>- 水平方向の配置</label> <hr> <select id="moveShapesByHAlign" class="align-dd moveShapesByHAlign"> <option value="left" selected>left</option> <option value="center">center</option> <option value="right">right</option> </select> <br /> <br /> <label>選択したシェイプを水平に配分</label> <input type="button" class="align moveShapesByHDistribute distribute" value="水平"> <br /> <label>- 垂直方向の配置</label> <hr> <select id="moveShapesByVAlign" class="align-dd moveShapesByVAlign"> <option value="left" selected>top</option> <option value="center">middle</option> <option value="right">bottom</option> </select> <br /> <br /> <label>選択したシェイプを垂直に配分</label> <input type="button" class="align moveShapesByVDistribute distribute" value="垂直"> <br /> <label>SnapModeオプションを変更して、ワークシート内のグリッド線またはその他のシェイプに基づいて、図形を最も近いエッジに位置合わせ、ドラッグ、またはサイズ変更します。</label> <hr> <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:#F4F8EB; } 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; }