[]
SpreadJS는 워크시트에서 도형의 크기 조정을 지원합니다. 이를 위해 ShapeBase 클래스는 allowResize
속성을 제공하며, 이 속성은 다양한 크기 조정 모드 및 Boolean 값을 가질 수 있습니다.
ResizeMode 열거형은 다음과 같은 크기 조정 모드를 제공합니다:
Aspect: 도형의 모든 방향(상, 하, 좌, 우, 좌상, 우상, 좌하, 우하) 핸들러를 표시하여 비율을 유지하면서 크기를 조정할 수 있습니다.
Horizontal: 좌우(West, East) 핸들러만 표시되어 수평 방향으로만 크기 조정이 가능합니다.
Vertical: 상하(North, South) 핸들러만 표시되어 수직 방향으로만 크기 조정이 가능합니다.
다음 예제 코드를 참고하여 allowResize
메서드를 사용해 도형의 크기를 조정할 수 있습니다:
// 도형을 비율 유지 모드(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
를 전달하면 모든 핸들러가 활성화됩니다.
// 스냅 크기 조정 비활성화
shape1.allowResize(false);
아래 표는 도형 유형별 allowResize
의 기본값을 나타냅니다:
도형 유형 | 기본값 |
---|---|
일반 도형 (Shape) |
|
그룹 도형 |
|
커넥터 도형 |
|
폼 컨트롤 |
|
이미지 도형 |
|
카메라 도형 |
|
참고:
allowResize
속성은 UI 동작에만 영향을 주며, 도형의width
,height
속성 값에는 영향을 주지 않습니다.
SpreadJS는 Excel처럼 Shift 키 + 마우스 드래그로 도형의 비율을 유지하며 크기를 조정할 수 있습니다. 이 기능은 allowResize
가 true
일 때만 적용됩니다.
커넥터 도형을 크기 조정할 때, 다른 도형 위로 마우스를 가져가면 해당 도형의 연결 지점(connection points) 이 표시됩니다. 이후 커넥터 도형은 자동으로 가장 가까운 연결 지점에 연결됩니다.
아래 GIF 이미지를 참고하여 주시기 바랍니다.
SpreadJS 디자이너를 사용하여 도형의 크기를 조정하려면 다음 단계를 따르세요:
도형을 선택합니다.
마우스 오른쪽 버튼을 클릭하고 도형 서식(Format Shape) 옵션을 선택합니다.
우측에 표시되는 도형 서식(Format Shape) 패널에서 크기 조정 모드(Resize Mode) 옵션을 선택하여 크기 조정 모드를 설정합니다.