填充和旋转

SpreadJS 允许更改形状的背景属性。可以使用选择的颜色填充形状和/或将透明度属性更改为想要的百分比。 此外,如果想更改形状的位置,可以通过旋转它来实现。

您可以使用 ShapeBase API 自定义所有形状的属性: allowMove: 获取或设置是否禁止移动形状。 allowResize: 获取或设置形状的调整大小模式。 allowRotate: 获取或设置是否禁用旋转形状。 showHandle: 获取或设置是否显示形状的句柄。 isSelected: 获取或设置是否选择此形状。 width/height: 获取或设置形状的宽度或高度。 x/y: 获取或设置形状的水平或垂直位置。 您可以使用 Shape API 自定义基础形状的属性: 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")); }); _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="spreadjs culture" content="zh-cn" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets-shapes/dist/gc.spread.sheets.shapes.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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"> 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; }