도형 내 텍스트

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' 옵션이 비활성화되어 있으며, 도형이 잠겨 있는 경우 → 텍스트 편집기 비활성화됨

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

Ask ChatGPT