도형 크기 조정

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의 기본값을 나타냅니다:

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

커넥터 도형 크기 조정

커넥터 도형을 크기 조정할 때, 다른 도형 위로 마우스를 가져가면 해당 도형의 연결 지점(connection points) 이 표시됩니다. 이후 커넥터 도형은 자동으로 가장 가까운 연결 지점에 연결됩니다.

아래 GIF 이미지를 참고하여 주시기 바랍니다.

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

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

1. 도형을 선택합니다.

2. 마우스 오른쪽 버튼을 클릭하고 도형 서식(Format Shape) 옵션을 선택합니다.

3. 우측에 표시되는 도형 서식(Format Shape) 패널에서 크기 조정 모드(Resize Mode) 옵션을 선택하여 크기 조정 모드를 설정합니다.