シェイプの塗りつぶしと回転

SpreadJSでは、シェイプの背景プロパティを変更できます。シェイプを、選択した色で塗りつぶしたり、透明度を好きなパーセンテージに変更したりできます。 また、シェイプの位置を変更したい場合は、回転させることができます。

ShapeBase APIを使用して、すべてのシェイプのプロパティをカスタマイズできます: allowMove:シェイプの移動を無効にするかどうかを取得または設定します。 allowResize:シェイプのサイズ変更を無効にするかどうかを取得または設定します。 allowRotate:シェイプの回転を無効にするかどうかを取得または設定します。 showHandle:シェイプのハンドルを表示するかどうかを取得または設定します。 isSelected:このシェイプが選択されているかどうかを取得または設定します。 width/height:シェイプの幅または高さを取得または設定します。 x/y:シェイプの水平または垂直位置を取得または設定します。 Shape APIを使用して、autoShapesのプロパティをカスタマイズできます: rotate:シェイプの回転角度(度単位)を取得または設定します。 style:シェイプのスタイルを取得または設定します。
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); initEvent(spread); }; var activeShape; function initSpread(spread) { setShapePropVisibility("none"); spread.getActiveSheet().shapes.add("oval", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 40, 20, 150, 150); spread.getActiveSheet().shapes.add("curvedUpArrow", GC.Spread.Sheets.Shapes.AutoShapeType.curvedUpArrow, 250, 20, 150, 150); spread.getActiveSheet().shapes.add("actionButtonSound", GC.Spread.Sheets.Shapes.AutoShapeType.actionButtonSound, 460, 20, 150, 150); spread.getActiveSheet().shapes.add("flowchartDecision", GC.Spread.Sheets.Shapes.AutoShapeType.flowchartDecision, 40, 240, 150, 150); spread.getActiveSheet().shapes.add("mathMinus", GC.Spread.Sheets.Shapes.AutoShapeType.mathMinus, 250, 240, 150, 150); spread.getActiveSheet().shapes.add("donut", GC.Spread.Sheets.Shapes.AutoShapeType.donut, 460, 240, 150, 150); } function setShapePropVisibility(display) { var shapeFillProp = _getElementById("shapeFillProp"); shapeFillProp.style.display = display; } function initEvent(spread) { var spreadNS = GC.Spread.Sheets; var sheet = spread.getActiveSheet(); sheet.bind(spreadNS.Events.ShapeSelectionChanged, function () { var selectedShape = sheet.shapes.all().filter(function(sp){ return sp.isSelected(); }); var isShapeSelected = false, isConnectorSelected = false; if (selectedShape.length > 0) { selectedShape.forEach(function (shape) { if (!isShapeSelected && shape instanceof spreadNS.Shapes.Shape) { isShapeSelected = true; } else if (!isConnectorSelected && shape instanceof spreadNS.Shapes.ConnectorShape) { isConnectorSelected = true; } }); if (isShapeSelected) { setShapePropVisibility("block"); } else { setShapePropVisibility("none"); } } else { setShapePropVisibility("none"); } }); _getElementById("rotateActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'rotate', _getElementById("txtRotate")); }); _getElementById("backgroundActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'background', _getElementById("txtFillColor")); }); _getElementById("transparencyActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'transparency', _getElementById("txtFillTransparency")); }); } function _handleShapeStyleSetting(spread, action, valueDom) { var sheet = spread.getActiveSheet(); activeShape = sheet.shapes.all().filter(function(sp){ return sp.isSelected(); }); if (activeShape.length > 0) { activeShape.forEach(function (shape) { if (shape instanceof GC.Spread.Sheets.Shapes.Shape) { _setShapeStyle(shape, action, valueDom.value); } }); sheet.repaint(); } } function _setShapeStyle(shape, action, value) { if (action === 'rotate') { shape.rotate(value); } else { var shapeStyle = shape.style(); if (action === 'background') { shapeStyle.fill.color = value; } else if (action === 'transparency') { shapeStyle.fill.transparency = value; } shape.style(shapeStyle); } } 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="ja-jp" /> <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"> シェイプを選択して、塗りつぶしの色、塗りつぶしの透明度、または回転プロパティを変更して効果を確認してください: </div> <div id="divideLine" class="divide-line"></div> <div id="shapeFillProp" class="option-row"> <label>塗りつぶしの色:</label> <input id='txtFillColor' type="color" value="#00A2E8"/> <input type="button" id='backgroundActionBtn' value="設定"/> <label>塗りつぶしの透明度:</label> <input id='txtFillTransparency' type="text" value="0.5"/> <input type="button" id='transparencyActionBtn' value="設定"/> <label for='txtRotate'>回転:</label> <input id='txtRotate' type="number" value="30" min="0" max="360"/> <input type="button" id='rotateActionBtn' value="設定"/> </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; }