SpreadJS 13
SpreadJS Documentation / Developer's Guide / Features / Manage Data Visualization and Objects / Shapes
In This Topic
    Shapes
    In This Topic

    SpreadJS provides extensive support for inserting one-hundred-and-eighty-two types of built-in shapes and various types of custom shapes in the worksheets in order to enhance data visualization and improve dynamic interaction with the information lying in rows and columns.

    Typically, shapes refers to drawing objects that represent geometric figures. You can add different shapes including squares, circles, rectangles and triangles, callouts, stars, banners, smileys, block arrows, equation shapes, flowcharts and shapes with formulas to the worksheets either by using any of the built-in shapes or by creating your own custom shapes. You can also add text in the inserted shapes and style it to provide an aesthetic appeal to your worksheets while also making them look extremely professional.

    SpreadJS provides support for three different kind of shapes: Basic shapes, Connector shapes and Group shapes.

    Basic, connector, and group shapes

    Further, you can add text in the inserted shapes, format shape layout and apply style to the embedded shapes (fill color, font size, horizontal and vertical alignment, border color and line width etc.) as per your requirements. Moreover, you can customize the shape attributes which includes rotating, resizing and adjusting the rotation handle; defining and adding the connection points for connector shapes and customizing the border of the shape.

    When a shape is clicked, the shape handles become visible by default. They allow you to resize, rotate or adjust shapes. However, you can choose to hide the shape handles by setting showHandle method to false (true, by default). It will hide the shape outline in UI which contains all the handles. You can still select and move the shape by clicking and dragging it.

    Using Code

    This example shows how to disable the shape handles of an auto shape by using code.

    JavaScript
    Copy Code
    $(document).ready(function () {
        // initializing Spread
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
        // get the activesheet
        var activeSheet = spread.getSheet(0);
        // Add heart shape to activeSheet
        heart = activeSheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
        // disable showHandle for the shape
        heart.showHandle(false);
    });
    
    Note: If you want to disable the resizing and rotation of a shape in hit test, you can use shape.allowResize() and shape.allowRotate() methods.

    Similarly, you can also disable the rotation handle of a shape by setting allowRotate method to false (true, by default). In order to disable rotation for connector shapes, allowResize can be set to false.

    Using Code

    This example shows how to disable the rotation handle of an auto shape by using code.

    JavaScript
    Copy Code
    var heart;
    $(document).ready(function () {
        // initializing Spread
        var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
        // get the activesheet
        var activeSheet = spread.getSheet(0);
        // Add heart shape to activeSheet
        heart = activeSheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
        // set allowRotate to false
        heart.allowRotate(false);
    
    });
    // function to change angle of shape using code
    function myFunction() {
        var x = document.getElementById("input").value;
        // x is the angle by which shape is rotated
        heart.rotate(x);
    }
    

    You can work with shapes in the following ways:

    Note: In order to integrate shapes in the worksheet, users need to reference the file: gc.spread.sheets.shapes.*.*.*.js