도형 내 텍스트

SpreadJS에서는 도형에 텍스트를 추가하고 편집할 수 있으며, 다음 방법 중 하나를 사용할 수 있습니다:

• isTextBox가 false(기본값)로 설정된 경우, 도형을 더블 클릭하거나 Enter 키를 누릅니다.

• isTextBox가 true로 설정된 경우, 도형을 선택하거나 단일 클릭합니다.

• 도형을 오른쪽 클릭하고 컨텍스트 메뉴에서 '텍스트 편집(Edit Text)' 을 선택합니다.

도형에 텍스트를 추가하거나 편집할 때, 도형 바깥을 클릭하면 텍스트 편집기가 사라집니다. 하지만 도형이 편집 상태가 아닐 경우 텍스트 선택은 지원되지 않습니다. 또한 도형의 모서리를 드래그하여 크기를 조절할 때는 수평 방향의 변경만 반영됩니다.

isTextBox 속성이 true로 설정된 경우, 도형을 클릭하거나 선택하여 텍스트를 추가 및 편집할 수 있습니다.

//도형에 텍스트를 추가하기 위해 isTextBox 속성이 true로 설정
shape.isTextBox(true);

도형을 더블 클릭하면 텍스트 편집기와 함께 텍스트 서식 옵션이 나타납니다. 여기에는 모든 기본 텍스트 서식 기능, 정렬 및 기타 텍스트 옵션이 포함됩니다. 하지만 리치 텍스트는 지원되지 않습니다.

사용 사례 시나리오

이 사용 사례는 회의실 좌석 배치도를 구성하는 시나리오입니다. 회의에는 중요한 그룹의 인물이 참석하며, 이들의 좌석 배치는 사전에 잘 계획되어야 합니다. 좌석은 자동 도형을 사용해 나타내고, 참석자 이름은 도형 위에 텍스트로 표시됩니다. 변경 사항이 있을 경우, 이름을 추가, 편집 또는 삭제할 수 있습니다.

도형 텍스트 동작

텍스트 편집기와 텍스트는 도형의 동작을 따릅니다. 예를 들어, 시트에서 확대/축소 작업을 수행하면, 텍스트 편집기와 텍스트 모두 크기 조정 및 재배치됩니다.

고정된 행이나 열이 있는 경우, 스크롤 시 도형은 접히지만 텍스트는 영향을 받지 않으며 같은 위치에 남습니다.

도형이 회전되면, 텍스트 편집기 및 텍스트도 회전됩니다.

텍스트 편집기를 통해 도형의 높이를 텍스트 콘텐츠 높이에 맞춰 설정할 수 있습니다.

다음과 같이 resizeToFitText 속성을 true로 설정하여 텍스트 상자의 높이를 자동 조정할 수 있습니다:

//텍스트 상자를 편집할 때 도형의 높이를 텍스트에 맞게 자동 조정하려면 resizeToFitText를 true로 설정합니다.
var oldStyle = shape.style();
oldStyle.textFrame.resizeToFitText = true;
shape.style(oldStyle);

텍스트 편집기 동작

텍스트 편집기는 자동으로 줄을 나누고, 입력을 제출할 때 텍스트 영역의 길이를 자동으로 조정합니다.

도형이 선택된 상태에서 Enter 키를 누르면 도형 내 모든 텍스트가 선택됩니다. Esc 키를 누르면 텍스트 입력이 완료되며 편집이 종료됩니다.

IME 입력도 Shape 텍스트로 지원됩니다.

도형 텍스트 편집기는 아래와 같은 조건에 따라 활성화되거나 비활성화됩니다:

• 시트가 보호되어 있고 'edit object' (Protect Sheet 대화 상자의 옵션)가 활성화되어 있으며, 도형이 잠겨 있는 경우 → 텍스트 편집기 활성화됨

• 시트가 보호되어 있고 'edit object' 옵션이 비활성화되어 있으며, 도형이 잠겨 있는 경우 → 텍스트 편집기 비활성화됨

• 시트가 보호되어 있고 도형이 잠겨 있지 않은 경우 → 텍스트 편집기 활성화됨

텍스트 방향

SpreadJS는 문서나 보고서 내 도형 안의 텍스트 방향과 흐름을 제어할 수 있습니다. 텍스트 방향을 조정하면 텍스트를 가로, 세로 또는 쌓기 형식으로 표시할 수 있습니다.

이 기능은 다이어그램 및 보고서의 시각적 표현을 향상시키는 데 특히 유용하며, 전통적으로 세로 텍스트를 사용하는 동아시아 언어(중국어, 일본어, 한국어)의 레이아웃 요구 사항을 지원하는 데 필수적입니다.

다음 표는 SpreadJS에서 지원하는 모든 텍스트 방향 구성을 보여줍니다.

사용 방법

SpreadJS는 API 기반 프로그래밍과 Designer UI 모두에서 도형의 텍스트 방향 설정을 지원합니다.

API 사용 방법

GC.Spread.Sheets.Shapes.TextDirection에는 7개의 열거값이 있으며, 도형의 텍스트 방향을 설정하려면 도형 스타일의 style.textFrame.textDirection 속성에 원하는 열거값을 할당합니다.

아래 코드는 wordArtVertRtl 텍스트 방향으로 직사각형 도형을 생성하는 예제입니다.

 var rectangleShape = sheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.rectangle, 100, 60, 200, 160);
 var style = rectangleShape.style();
 style.textFrame.textDirection = GC.Spread.Sheets.Shapes.TextDirection.wordArtVertRtl;
 rectangleShape.style(style);
 rectangleShape.text('Rectangle');

Designer 사용 방법

1. 도형 선택: 텍스트를 수정할 도형을 클릭하여 도형 서식 탭을 활성화.

2. 서식 창 열기: 서식 창 버튼 클릭.

3. 텍스트 설정 이동

   1. 텍스트 옵션 선택 → 텍스트 서식 카테고리 접근.

      
      

   2. 텍스트 상자 선택 → 고급 텍스트 속성 표시.

      
      

4. 텍스트 방향 수정

   1. 텍스트 방향 속성 찾기

      
      

   2. 현재 값 옆 드롭다운 클릭

      
      

   3. 표준 옵션 중 선택

      
      

5. 원하는 텍스트 방향 선택 시, 도형 내 텍스트가 해당 방향으로 표시됩니다.

   
   

주요 정책

1. 텍스트 줄바꿈 및 단어 분리

도형 내 텍스트는 도형 경계와 텍스트 방향에 따라 자동 줄바꿈됩니다.

이러한 줄바꿈 및 단어 분리 규칙은 애플리케이션의 일반 셀에서 텍스트가 동작하는 방식과 일치합니다.

2. 도형 텍스트 편집

비수평 텍스트 방향이 설정된 도형의 텍스트를 편집할 때, 텍스트는 항상 표준 수평 형식으로 표시되고 편집됩니다.

세로 또는 쌓기 방향은 편집이 끝난 후 표시 목적으로만 적용됩니다.

3. 도형 크기 자동 맞춤

도형 내 텍스트 레이아웃은 현재 텍스트 방향을 기준으로 도형을 수동으로 크기 조정할 때 자동으로 조정됩니다.

• 텍스트 방향이 가로인 경우, 도형의 너비를 변경하면 텍스트가 새로운 너비에 맞게 재배치됩니다.

  
  

• 텍스트 방향이 세로인 경우, 도형의 높이를 변경하면 텍스트가 새로운 높이에 맞게 조정됩니다.

  
  

도형 크기를 텍스트가 요구하는 영역보다 작게 조정하면, 도형 경계를 벗어난 텍스트는 자동으로 숨겨지며 표시되지 않습니다.

4. 비정형 도형의 텍스트 방향

단순 직사각형이 아닌 도형의 경우, 텍스트 내용은 도형의 텍스트 영역을 포함하는 직사각형 영역 안에 배치됩니다.

5. Designer에서 문화권별 텍스트 방향 옵션

Excel과 일치시키기 위해 Designer 도구에서는 Horizontal, Vertical, Rotate all text 90°, Rotate all text 270°, Stacked 등 5가지 텍스트 방향 옵션을 제공합니다.

Stacked 구성은 사용 중인 문화권에 따라 다른 동작을 보일 수 있습니다.

아래 표는 각 옵션의 구체적인 지원 세부 사항을 보여줍니다.