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

도형

SpreadJS는 워크시트에 기본 도형, 사용자 지정 도형, 연결선 도형, 카메라 도형을 추가하는 기능을 지원합니다. 이러한 도형은 데이터 시각화를 강화하고 셀 내 정보와의 상호작용을 가능하게 합니다.

도형에 텍스트와 하이퍼링크를 추가할 수 있으며, 도형의 레이아웃을 포맷하고 채우기 색상, 글꼴 크기, 가로 및 세로 정렬, 테두리 색상 및 선 굵기 등 다양한 도형 스타일을 적용할 수 있습니다. 도형을 회전하거나 크기를 조정하고, 커넥터 도형의 연결 지점을 정의 및 추가하고, 도형의 테두리를 사용자 지정하여 도형 속성을 커스터마이즈할 수 있습니다.

다음 유형의 도형을 SpreadJS 워크시트에 적용할 수 있습니다. 이미지 클릭 시 해당 주제로 이동합니다:

도형 유형

이미지

설명

기본 도형

basic-shape.png

워크시트에서 사용할 수 있는 사각형, 원 등 다양한 유형의 기본 도형 및 기하학적 도형 중에서 선택할 수 있습니다.

연결선 도형

connector-shape.png

서로 다른 도형 두 개 이상을 선, 화살표, 연결 지점 등을 사용하여 연결하여 플로우차트와 같은 고유한 도형 및 모델을 만들 수 있습니다.

사용자 정의 도형

custom_shapes.png

특정 요구 사항에 따라 워크시트에 사용자 지정 도형을 추가하고 도형 모델을 사용자 지정하여 다이어그램을 그리거나 시각화할 수 있습니다.

카메라 도형

camera-shape-basic.gif

참조된 영역의 변경 사항을 반영하는 동적 이미지를 추가하여 워크시트에서 유용하고 인터랙티브한 대시보드를 생성할 수 있습니다.

그림 도형


PictureShape 클래스를 사용하여 이미지를 도형으로 추가하면 도형 서식 옵션도 함께 사용할 수 있습니다.

SpreadJS는 워크시트를 더욱 미려하고 전문적으로 보이게 하기 위해 다양한 도형 작업을 지원합니다.

기능

설명

도형 그룹화 (Group Shapes)

워크시트에서 도형을 그룹화하거나 그룹 해제할 수 있습니다.

도형 속성 수식 (Shape Property Formulas)

수식을 사용하여 기본 도형 및 사용자 지정 도형을 워크시트에 추가할 수 있습니다.

도형 속성 연결 (Shape Property Links)

수식에서 참조를 통해 도형 속성을 워크시트 셀에 바인딩할 수 있습니다.

도형 서식 지정 (Formatting Shapes)

도형에 다양한 유형의 복합 선을 추가할 수 있습니다.

채우기 효과 (Fill Effects)

도형에 채우기 효과를 추가하여 외관을 향상시킬 수 있습니다.

도형 내 텍스트 (Text on Shapes)

도형에 텍스트를 추가하고 편집할 수 있습니다.

도형에 하이퍼링크 추가 (Hyperlinks on Shapes)

도형에 하이퍼링크를 추가할 수 있습니다.

도형 정렬 (Arrange Shapes)

여러 도형을 사용할 때 정렬 옵션, 분포 옵션 또는 그리드 및 다른 도형에 맞춰 스냅(Snap)하여 도형 위치를 조정할 수 있습니다.

참고: 워크시트에 도형을 통합하려면 gc.spread.sheets.shapes...*.js 스크립트 파일을 참조해야 합니다.

도형 핸들 표시 설정

도형을 클릭하면 기본적으로 도형 핸들이 표시됩니다. 이를 통해 도형의 크기를 조정하거나 회전 또는 위치를 조절할 수 있습니다. 그러나 showHandle 메서드를 false로 설정하면 핸들을 숨길 수 있습니다 (기본값은 true).

이 옵션은 도형 크기 조정 시 더 깔끔한 보기를 제공하며 모든 핸들을 숨깁니다. 도형은 여전히 클릭하고 드래그하여 선택하고 이동할 수 있습니다.

핸들이 있는 상태 (왼쪽) | 핸들이 없는 상태 (오른쪽)



$(document).ready(function () {
    // Spread 초기화
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // 활성 시트 가져오기
    var activeSheet = spread.getSheet(0);
    // 하트 도형 추가
    heart = activeSheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.heart, 100, 60, 200, 160);
    // 핸들 비활성화
    heart.showHandle(false);
});

마찬가지로 도형의 회전 핸들을 비활성화하려면 allowRotate 메서드를 false로 설정할 수 있습니다 (기본값은 true). 커넥터 도형의 회전 기능을 비활성화하려면 allowResize를 false로 설정할 수 있습니다.



var oval;
$(document).ready(function () {
    // Spread 초기화
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 });
    // 활성 시트 가져오기
    var activeSheet = spread.getSheet(0);
    // 타원형 도형 추가
    oval = activeSheet.shapes.add("Shape1", GC.Spread.Sheets.Shapes.AutoShapeType.oval, 100, 60, 200, 160);
    // 회전 비활성화
    oval.allowRotate(false);
});


// 코드로 도형의 각도를 변경하는 함수
function myFunction() {
    var x = document.getElementById("input").value;
    // x는 도형이 회전할 각도
    oval.rotate(x);
}