[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

기본 도형

SpreadJS는 워크시트에 182가지의 기본 제공 도형을 추가할 수 있는 기능을 제공합니다. 사용자는 워크시트에 삽입한 도형을 이동, 크기 조정, 회전 또는 삭제할 수도 있습니다.

사용자는 다양한 기본 도형 중에서 선택하여 원하는 유형의 도형 객체(선, 사각형, 블록 화살표, 수식 도형, 순서도, 별, 배너, 말풍선 등)를 SpreadJS 디자이너의 "삽입" 탭이나 코드로 워크시트에 삽입할 수 있습니다.

SpreadJS 디자이너를 사용하여 도형을 삽입할 경우, 아래 스크린샷과 같이 "도형 메뉴"가 표시됩니다. 이 메뉴를 사용하여 요구에 맞는 도형 객체를 삽입할 수 있으며, 삽입한 도형은 텍스트, 색상 및 스타일을 설정하여 사용자 정의할 수 있습니다.

build-in-shapes

아래 스크린샷은 워크시트에 추가된 기본 도형 "도넛"의 예시를 보여줍니다.


다음 코드 샘플은 코드로 기본 도형을 워크시트에 추가하는 방법을 보여줍니다.

// 워크시트에 기본 도형 "도넛" 추가
window.onload = function ()
{
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
    var sheet = spread.getActiveSheet();
    // 기본 도형 "도넛" 추가
    var donutShape = sheet.shapes.add('autoShape', GC.Spread.Sheets.Shapes.AutoShapeType.donut, 100, 50, 150, 150);          

    // 기본 도형 "도넛"에 텍스트 추가
    donutShape.text("Donut Shape");

    // 기본 도형 "도넛"에 스타일 적용
    var shapeStyle = donutShape.style();
    shapeStyle.textEffect.color = "Red";
    shapeStyle.textEffect.font = "18px Arial";
    shapeStyle.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    shapeStyle.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;
    donutShape.style(shapeStyle);
};

참고: SpreadJS는 기본 도형 통합 시 아래와 같은 제한사항이 있습니다:

  • 도형의 텍스트는 수평 방향, 수평 및 수직 정렬, 단색 채우기, 글꼴(이름 및 크기), 여백 등이 지원됩니다.

  • 도형 유형 중 말풍선(callout)의 도형 외곽 영역에서 클릭하여 도형을 선택하는 HitTest 기능은 완전하게 지원되지 않습니다. 따라서 도형 외곽 영역을 클릭하여 도형을 선택할 수 없습니다.

Ask ChatGPT