# 도형 분포

## Content

두 개 이상의 도형 간 간격은 `moveShapesByHDistribute` 또는 `moveShapesByVDistribute` 명령을 사용하여 각각 수평 또는 수직 방향으로 균등하게 분포시킬 수 있습니다. 이 명령은 한 도형의 끝과 다른 도형의 시작 사이의 수평 또는 수직 거리를 계산한 후, 평균 거리를 계산하여 도형들을 분포시킵니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-horizontal.png)

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-vertical.png)

분포 명령에서 그룹화된 도형은 하나의 도형으로 간주됩니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-group.png)

다른 도형과 연결되지 않은 커넥터 도형도 분포될 수 있습니다.

![](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/images/shape-distribute-connector.png)

다음 코드 샘플은 세 개의 사각형 도형을 수평 및 수직 방향으로 분포시키는 예입니다:

```javascript
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();
// 수평 분포
commandManager.execute({
    cmd: 'moveShapesByHDistribute',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
});

// 수직 분포
commandManager.execute({
    cmd: 'moveShapesByVDistribute',
    sheetName: sheet.name(),
    shapeNames: ['rect1', 'rect2', 'rect3'],
});
```