# 도형 크기 조정

## Content

SpreadJS는 워크시트에서 도형의 크기 조정을 지원합니다. 이를 위해 **[ShapeBase](/spreadjs/api/v18/classes/GC.Spread.Sheets.Shapes.ShapeBase)** 클래스는 `allowResize` 속성을 제공하며, 이 속성은 다양한 크기 조정 모드 및 Boolean 값을 가질 수 있습니다.

![resizing-allshapes.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/resizing-allshapes.88ae90.gif)

**[ResizeMode](/spreadjs/api/v18/enums/GC.Spread.Sheets.Shapes.ResizeMode)** 열거형은 다음과 같은 크기 조정 모드를 제공합니다:

* **Aspect**: 도형의 모든 방향(상, 하, 좌, 우, 좌상, 우상, 좌하, 우하) 핸들러를 표시하여 비율을 유지하면서 크기를 조정할 수 있습니다.
<br>

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

* **Horizontal**: 좌우(West, East) 핸들러만 표시되어 수평 방향으로만 크기 조정이 가능합니다.

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

* **Vertical**: 상하(North, South) 핸들러만 표시되어 수직 방향으로만 크기 조정이 가능합니다.

![resize-vertical.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/resize-vertical.fb179e.png)
다음 예제 코드를 참고하여 `allowResize` 메서드를 사용해 도형의 크기를 조정할 수 있습니다:

```JavaScript
// 도형을 비율 유지 모드(aspect)로 크기 조정
shape2.allowResize(GC.Spread.Sheets.Shapes.ResizeMode.aspect);
// 도형을 수평 방향(horizontal)으로 크기 조정
shape3.allowResize(GC.Spread.Sheets.Shapes.ResizeMode.horizontal);
// 도형을 수직 방향(vertical)으로 크기 조정
shape4.allowResize(GC.Spread.Sheets.Shapes.ResizeMode.vertical);
```

`allowResize` 메서드의 인자로 `false`를 전달하면 도형에 대한 모든 크기 조정 핸들러가 비활성화되어 사용자가 크기를 조정할 수 없게 됩니다. 반대로 `true`를 전달하면 모든 핸들러가 활성화됩니다.
![resizemode-false.png](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/resizemode-false.6345d5.png)

```JavaScript
// 스냅 크기 조정 비활성화
shape1.allowResize(false);
```

## 지원되는 도형 유형 및 기본값

아래 표는 도형 유형별 `allowResize`의 기본값을 나타냅니다:

| 도형 유형 | 기본값 |
| ----- | --- |
| 일반 도형 (Shape) | `true` |
| 그룹 도형 | `true` |
| 커넥터 도형 | `true` |
| 폼 컨트롤 | `true` |
| 이미지 도형 | `aspect` |
| 카메라 도형 | `aspect` |

>type=warning
> **참고:** `allowResize` 속성은 **UI 동작**에만 영향을 주며, 도형의 `width`, `height` 속성 값에는 영향을 주지 않습니다.

SpreadJS는 Excel처럼 **Shift 키 + 마우스 드래그**로 도형의 **비율을 유지**하며 크기를 조정할 수 있습니다. 이 기능은 `allowResize`가 `true`일 때만 적용됩니다.

### 커넥터 도형 크기 조정

커넥터 도형을 크기 조정할 때, 다른 도형 위로 마우스를 가져가면 해당 도형의 **연결 지점(connection points)** 이 표시됩니다. 이후 커넥터 도형은 자동으로 가장 가까운 연결 지점에 연결됩니다.
아래 GIF 이미지를 참고하여 주시기 바랍니다.
![connector-sizing.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/connector-sizing.eda4b5.gif)

## SpreadJS 디자이너에서 도형 크기 조정

SpreadJS 디자이너를 사용하여 도형의 크기를 조정하려면 다음 단계를 따르세요:

1. 도형을 선택합니다.
2. 마우스 오른쪽 버튼을 클릭하고 **도형 서식(Format Shape)** 옵션을 선택합니다.
3. 우측에 표시되는 **도형 서식(Format Shape) 패널**에서 **크기 조정 모드(Resize Mode)** 옵션을 선택하여 크기 조정 모드를 설정합니다.

![designer-resize-shapes.gif](https://gcdocumentsitekrblob.blob.core.windows.net/document-site-files/images/8d606653-16a0-474d-b9dc-e2b4d01c2446/designer-resize-shapes.69c11c.gif)