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

Distribute Shapes

The space between two or more shapes can be distributed equally in horizontal or vertical directions by using moveShapesByHDistribute or moveShapesByVDistribute commands respectively. These commands calculate the horizontal or vertical distances between the ending of one shape and the start of the other, then calculate the average distance to distribute shapes.






Grouped shapes are considered as single shapes by distribution commands.




Connector shapes can also be distributed if not connected to any other shape.




The following code sample distributes three rectangle shapes horizontally and vertically.

var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var sheet = spread.getActiveSheet();
var rect1 = sheet.shapes.add('rect1', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 50, 230, 100);
var shapeStyle = rect1.style();
shapeStyle.fill.color = '#40E0D0';
var rect2 = sheet.shapes.add('rect2', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 200, 200, 150, 100);
var rect3 = sheet.shapes.add('rect3', GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 500, 350, 200, 100);
            
var commandManager = spread.commandManager();
// Horizontal Distribution
commandManager.execute({
    cmd: 'moveShapesByHDistribute',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
});

// Vertical Distribution
commandManager.execute({
    cmd: 'moveShapesByVDistribute',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
});