Shape Fill and Rotate

SpreadJS allows you to change the background properties of a shape. You can fill the shape with a color of your choosing and/or change the transparency property to the percentage that you want. Also, if you want to change the position of a shape you can do that by rotating it.

You can customize the properties of all shapes using the ShapeBase API: allowMove: Gets or sets whether to disable moving the shape. allowResize: Gets or sets the resize mode of the shape. allowRotate: Gets or sets whether to disable rotating the shape. showHandle: Gets or sets whether to show handle of shape. isSelected: Gets or sets whether this shape is selected. width/height: Gets or sets the width or height of the shape. x/y: Gets or sets the horizontal or vertical location of the shape. You can customize the properties of autoShapes using the Shape API: rotate: Gets or sets the rotated angle of the shape (unit in degree). style: Gets or sets the style of the shape.
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")); }); _getElementById("resizeModeActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'resizeMode', _getElementById("txtResizeMode")); }); } 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 if (action === 'resizeMode') { let resizeMode; if (value === 'true') { resizeMode = true; } if (value === 'false') { resizeMode = false; } else { resizeMode = Number(value); } shape.allowResize(resizeMode); } 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="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/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="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"> Select a shape then change fill color, fill transparency or rotate property to see the effect: </div> <div id="divideLine" class="divide-line"></div> <div id="shapeFillProp" class="option-row"> <label>Fill Color: </label> <input id='txtFillColor' type="color" value="#00A2E8"/> <input type="button" id='backgroundActionBtn' value="Set"/> <label>Fill Transparency: </label> <input id='txtFillTransparency' type="text" value="0.5"/> <input type="button" id='transparencyActionBtn' value="Set"/> <label for='txtRotate'>Rotate: </label> <input id='txtRotate' type="number" value="30" min="0" max="360"/> <input type="button" id='rotateActionBtn' value="Set"/> <label for='txtResizeMode'>Resize Mode:</label> <select id="txtResizeMode"> <option value="true">All</option> <option value="0">Aspect</option> <option value="1">Horizontal</option> <option value="2">Vertical</option> <option value="false">None</option> </select> <input type="button" id='resizeModeActionBtn' value="Set"/> </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; }