SpreadJS 14
Features / Shapes / Formatting Shapes
In This Topic
    Formatting Shapes
    In This Topic

    SpreadJS supports different types of compound lines in shapes which can be used to customize their appearance. The following types are supported:

    Compound Line Types
    simple compound line double compound line thick thin compound line
    thin thick compound line triple compound line

    Using Code

    This example adds compound lines in autoshapes and connectors to display the below image.
    compound line example

    JavaScript
    Copy Code
    function applyShapeStyle(shapeVar) {
        var shapeStyle = shapeVar.style();
        shapeStyle.fill.color = "pink";
        shapeStyle.line.joinType = 1;
        //Add compound line type double
        shapeStyle.line.compoundType = 1;
        shapeStyle.line.color = "grey";
        shapeStyle.line.width = 5;
        shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
        shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
        shapeVar.style(shapeStyle);
    }
    
    function applyLineStyle(lineVar) {
        var style = lineVar.style(); 
        var line = style.line; 
        line.width = 10; 
        line.color = 'pink';
        line.endArrowheadStyle = GC.Spread.Sheets.Shapes.ArrowheadStyle.triangle;
        //Add compound line type thickThin
        line.compoundType = GC.Spread.Sheets.Shapes.CompoundType.thickThin;  
        lineVar.style(style);
    }