기본 도형

SpreadJS는 워크시트에 삽입할 수 있는 200개 이상의 기본 제공 도형을 지원합니다. 여기에는 선, 사각형, 블록 화살표, 수식 도형, 순서도, 별, 배너, 설명선, 연결선 등이 포함됩니다.

삽입한 도형은 이동, 크기 조정, 회전, 스타일 지정 또는 삭제할 수 있습니다.

SpreadJS 디자이너 또는 코드를 사용하여 도형을 삽입할 수 있습니다.

디자이너를 사용하여 도형 삽입

디자이너에서 삽입 탭을 열고 도형 갤러리에서 도형을 선택합니다.

도형을 선택하면 워크시트가 그리기 모드로 전환되어 Excel과 유사한 대화형 도형 만들기 환경을 제공합니다.

그리기 모드

도형 유형을 선택하면:

• 워크시트 영역으로 이동할 때 커서가 정밀 십자선 으로 변경됩니다.

• 클릭하고 끌어서 도형의 영역을 지정할 수 있습니다.

• 끄는 동안 반투명 미리 보기가 실시간으로 표시됩니다.

  
  

• 미리 보기의 윤곽선은 일반적인 사각형이 아닌 선택한 도형 유형과 정확히 일치합니다.

완료 동작

• 끌어서 놓기: 지정한 경계 상자를 사용하여 도형을 삽입합니다.

  
  

• 끌지 않고 클릭: 기본 크기를 사용하여 클릭한 위치에 도형을 삽입합니다.

  
  

• ESC 키 누르기: 그리기 작업을 취소하고 그리기 모드를 종료합니다.

  
  

  완료된 모든 삽입 작업은 실행 취소/다시 실행 스택에 포함됩니다.

  기본적으로 도형 하나를 삽입하면 그리기 모드가 자동으로 종료됩니다.

그리기 모드 잠금

동일한 유형의 도형을 반복해서 삽입해야 하는 경우 그리기 모드를 잠글 수 있습니다.

디자이너에서:

1. 삽입 탭에서 도형 유형을 선택합니다.

2. 선택한 도형 아이콘을 마우스 오른쪽 버튼으로 클릭합니다.

3. 바로 가기 메뉴에서 그리기 모드 잠금을 클릭합니다.

활성화하면 도형을 삽입한 후에도 그리기 모드가 유지됩니다.

ESC 키를 눌러 잠금 모드를 종료하고 일반 포인터 상태로 돌아갑니다.

코드를 사용하여 도형 삽입

기본 제공 도형을 프로그래밍 방식으로 추가할 수도 있습니다.

// Assume the workbook has been initialized.
var sheet = spread.getActiveSheet();

spread.suspendPaint();
try {
    var donutShape = sheet.shapes.add(
        "donutShape",
        GC.Spread.Sheets.Shapes.AutoShapeType.donut,
        100,
        50,
        150,
        150
    );

    donutShape.text("Donut Shape");

    var style = donutShape.style();
    style.fill.color = "#FFF4D6";
    style.line.color = "#F59E0B";
    style.line.width = 2;
    style.textEffect.color = "#C2410C";
    style.textEffect.font = "16px Arial";
    style.textFrame.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
    style.textFrame.vAlign = GC.Spread.Sheets.VerticalAlign.center;

    donutShape.style(style);
} finally {
    spread.resumePaint();
}

제한 사항

설명선 도형의 경우 기본 도형 경계 밖에서는 적중 테스트가 완전히 지원되지 않습니다. 사용자가 기본 경계 밖을 클릭하면 도형을 선택하지 못할 수 있습니다.