Shape Text

SpreadJS allows you to add text in shapes. By using textEffect, and textFrame you will have the possibility to format the added text to your liking.

You can customize the properties of autoShapes using the Shape API: text: Gets or sets the text of the shape.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); initEvent(spread); }; var horizontalAlign = { left: 0, center: 1, right: 2 }; var verticalAlign = { top: 0, center: 1, bottom: 2 }; var activeShape; function fillShapeTypeList(type, dom) { var names = []; for (var name in type) { if(name === "none" || (parseInt(name, 10)) == name) { continue; } names.push({name: name, value: type[name]}); } names.sort(function (a, b) { return a.name > b.name ? 1 : -1 }); var html = ""; names.forEach(function (item) { html += '<option value="' + item.value + '">' + item.name + '</option>'; }); dom.innerHTML= html; } function getActiveConnectorShape(sheet) { return sheet.shapes.all().filter(function(sp){ return sp.isSelected() && sp instanceof GC.Spread.Sheets.Shapes.ConnectorShape; }); } function initSpread(spread) { setShapePropVisibility("none"); fillShapeTypeList(horizontalAlign, _getElementById("txtHAlign")); fillShapeTypeList(verticalAlign, _getElementById("txtVAlign")); _getElementById("txtText").value = "abcdefgHIJKLMN\n" + "12356789\n" + "SpreadJSSpreadJS"; spread.getActiveSheet().shapes.add("rectangle", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 40, 20, 150, 150); spread.getActiveSheet().shapes.add("rightTriangle", GC.Spread.Sheets.Shapes.AutoShapeType.rightTriangle, 40, 230, 150, 150); spread.getActiveSheet().shapes.add("hexagon", GC.Spread.Sheets.Shapes.AutoShapeType.hexagon, 250, 20, 150, 150); spread.getActiveSheet().shapes.add("oval", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 250, 230, 150, 150); } function setShapePropVisibility(display) { var shapeTxtProp = _getElementById("shapeTxtProp"); shapeTxtProp.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("textActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'text', _getElementById("txtText")); }); _getElementById("colorActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'color', _getElementById("txtTextColor")); }); _getElementById("transparencyTxtActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'transparencyTxt', _getElementById("txtTextTransparency")); }); _getElementById("fontActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'font', _getElementById("txtFont")); }); _getElementById("hAlignActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'hAlign', _getElementById("txtHAlign")); }); _getElementById("vAlignActionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'vAlign', _getElementById("txtVAlign")); }); } 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 === 'text') { shape.text(value); } else { var shapeStyle = shape.style(); if (action ==='color') { shapeStyle.textEffect.color = value; } else if (action === 'transparencyTxt') { shapeStyle.textEffect.transparency = value; } else if (action === 'font') { shapeStyle.textEffect.font = value; } else if (action === 'hAlign') { shapeStyle.textFrame.hAlign = parseInt(value); } else if (action === 'vAlign') { shapeStyle.textFrame.vAlign = parseInt(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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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"> Try selecting a shape and change the text properties to see the outcome: </div> <div id="divideLine" class="divide-line"></div> <div id="shapeTxtProp" class="option-row"> <label>Text: </label> <textarea id='txtText' type="text" placeholder="Shape text" rows="3"></textarea> <input type="button" id='textActionBtn' value="Set"/> <label>Text Color: </label> <input id='txtTextColor' type="color" value="#FFFF00"/> <input type="button" id='colorActionBtn' value="Set"/> <label>Text Transparency: </label> <input id='txtTextTransparency' type="text" value="0.5"/> <input type="button" id='transparencyTxtActionBtn' value="Set"/> <label>Text Font: </label> <input id='txtFont' type="text" value="bold 15px Georgia"/> <input type="button" id='fontActionBtn' value="Set"/> <label> Horizontal Align:</label> <select id="txtHAlign"></select> <input type="button" id='hAlignActionBtn' value="Set"/> <label>Vertical Align:</label> <select id="txtVAlign"></select> <input type="button" id='vAlignActionBtn' 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; }