[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

Custom Shapes

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.




The following code sample shows how to add a custom shape to the worksheet.

// 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 the shape type callout with out of shape bounds part is not fully supported. Hence, users can't select a shape by clicking the out-of-shape bound part.