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.

The demo is being dynamically compiled to support real-time code editing... For quicker access to features, switch to the "JavaScript" tab for a smoother experience! :)
Description
app.js
index.html
styles.css
Copy to CodeMine

You can customize the properties of autoShapes using the Shape API:

  • text: Gets or sets the text of the shape.
    var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
    var heartStyle = heart.style();

    heartStyle.textEffect.color = 'yellow';
    heartStyle.textEffect.transparency = 0.5;
    heartStyle.textEffect.font = '20px Arial';
    heartStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    heartStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    heartStyle.textFrame.resizeToFitText = true;
    heart.style(heartStyle);
    heart.text('Heart');

You can use the textDirection property of the textFrame in the Style: this property is used to get or set the text direction of the shape. The TextDirection enum defines the direction of the text in the shape.

    var heart = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
    var heartStyle = heart.style();

    heartStyle.textDirection = GC.Spread.Sheets.Shapes.TextDirection.vert;
    heart.style(heartStyle);
    heart.text('Heart');
You can customize the properties of autoShapes using the Shape API: text: Gets or sets the text of the shape. You can use the textDirection property of the textFrame in the Style: this property is used to get or set the text direction of the shape. The TextDirection enum defines the direction of the text in the shape.
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss")); initSpread(spread); initEvent(spread); }; var textDirections = [ {text: 'Horizontal', value: GC.Spread.Sheets.Shapes.TextDirection.horz }, {text: 'Vertical(Ltr)', value: GC.Spread.Sheets.Shapes.TextDirection.eaVertLtr}, {text: 'Vertical', value: GC.Spread.Sheets.Shapes.TextDirection.eaVert}, {text: 'Rotate all text 90°', value: GC.Spread.Sheets.Shapes.TextDirection.vert}, {text: 'Rotate all text 270°', value: GC.Spread.Sheets.Shapes.TextDirection.vert270}, {text: 'Stacked', value: GC.Spread.Sheets.Shapes.TextDirection.wordArtVert}, {text: 'Stacked(Rtl)', value: GC.Spread.Sheets.Shapes.TextDirection.wordArtVertRtl} ]; var horizontalAlign = { left: 0, center: 1, right: 2 }; var verticalAlign = { top: 0, center: 1, bottom: 2 }; var resizeToFitTextOptions = { false: 0, true: 1 } var activeShape; function fillShapeTextDirectionList(dom){ var html = ""; textDirections.forEach(function (item) { html += '<option value="' + item.value + '">' + item.text + '</option>'; }); dom.innerHTML= html; } 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"); fillShapeTextDirectionList(_getElementById("txtDirection")); fillShapeTypeList(horizontalAlign, _getElementById("txtHAlign")); fillShapeTypeList(verticalAlign, _getElementById("txtVAlign")); fillShapeTypeList(resizeToFitTextOptions, _getElementById("resizeToFitText")); _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("txtDirectionBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'textDirection', _getElementById("txtDirection")); }); _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")); }); _getElementById("resizeToFitTextBtn").addEventListener('click', function() { _handleShapeStyleSetting(spread, 'resizeToFitText', _getElementById("resizeToFitText")); }); } 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 === 'textDirection'){ const textDirection = parseInt(value); shapeStyle.textFrame.textDirection = textDirection; switch (textDirection) { case GC.Spread.Sheets.Shapes.TextDirection.vert: case GC.Spread.Sheets.Shapes.TextDirection.wordArtVertRtl: case GC.Spread.Sheets.Shapes.TextDirection.eaVert: shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.right; break; case GC.Spread.Sheets.Shapes.TextDirection.vert270: case GC.Spread.Sheets.Shapes.TextDirection.wordArtVert: case GC.Spread.Sheets.Shapes.TextDirection.eaVertLtr: shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.left; break; } } else if (action === 'hAlign') { shapeStyle.textFrame.hAlign = parseInt(value); } else if (action === 'vAlign') { shapeStyle.textFrame.vAlign = parseInt(value); } else if (action === 'resizeToFitText') { shapeStyle.textFrame.resizeToFitText = value === '1'; } 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"> 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 Direction: </label> <select id="txtDirection"></select> <input type="button" id='txtDirectionBtn' 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"/> <label>Resize To Fit Text:</label> <select id="resizeToFitText"></select> <input type="button" id='resizeToFitTextBtn' 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; }