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.