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

    SpreadJS provides support for adding custom shapes in worksheets based on specific requirements. You can customize the shape model to draw a shape of your choice just like the way graphics are drawn onto a canvas.

    Shared below is a screenshot that depicts a custom shape added to the worksheet.

    Custom shape in a worksheet

    Using Code

    This example shows how to add custom shape in the worksheet.

    JavaScript
    Copy Code
    // Adding a custom shape to the worksheet
    window.onload = function ()
    {
       var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
       var sheet = spread.getActiveSheet();
       // Define a model to create custom shape
       var model =
        {
           left: 50,
           top: 50,
           width: 300,
           height: 300,
           options:
           {
                fill:
                  {
                    type: 1,
                    color: "green",
                    transparency: 0.5,
                   },                    
                 stroke:
                   {
                     type: 1, // solid fill (now only support solid fill)
                     color: "blue",
                     width: 3                   
                    }                    
              },
                    path: [
                     [
                            ["M", 4, 1], // M: move to (x, y)
                            ["L", 104, 1], // L: line to (x, y)
                            ["L", 4, 94],
                            ["L", 104, 94],
                            ["L", 4, 1],
                            ["M", 4, 47],
                            ["L", 104, 47],
                            ["Z"]
                      ]
                    ]
                };
        //Add defined custom shape to sheet
        sheet.shapes.add('name', model);          
    } 
    

     

    Note: SpreadJS doesn't support the following scenarios while integrating custom shapes:

    • Importing and exporting custom shapes to an excel file is not supported as of now.
    • Shape text will only support : Horizontal direction, Horizontal and vertical text alignment, solid color fill, font (name and size) and margins etc.
    • Flipped shapes (horizontal/vertical or both) are not fully supported as of now.                       
    • The HitTest feature in shape of type : callout with out of shape bounds part is not fully supported. Hence, users can't select shape by clicking the out of shape bound part.