확대/축소

SpreadJS는 시트의 뷰포트를 확대하거나 축소하는 작업을 수행할 수 있도록 지원합니다. 다음 방법들을 통해 확대/축소 작업을 수행할 수 있습니다:

• Ctrl + 마우스 휠

• 상태 표시줄의 확대/축소 표시기

• 두 손가락 확대/축소 제스처 (터치 디바이스에서만 가능)

• API 멤버 sheet.zoom(zoomFactor)

셀 크기와 그 내용은 뷰포트와 함께 확대 또는 축소됩니다.

테두리, 눈금선, 고정선, 분할 막대, 선택 표시기는 줌 작업 시 영향을 받지 않습니다.

sheet.zoom(zoomFactor)를 사용하면 줌 배율을 0.1에서 4 사이의 값으로 설정할 수 있습니다. 확대/축소 기능은 기본적으로 활성화되어 있으며, options.allowUserZoom 속성을 false로 설정하여 비활성화할 수 있습니다.

코드 예시

이 예제는 options.allowUserZoom 속성을 설정합니다.

activeSheet.zoom(3);

확대/축소 제한 설정

줌 작업이 수행되면 ViewZooming 및 ViewZoomed 이벤트가 트리거됩니다. 이 이벤트들은 줌 처리 과정에 개입하여, 뷰포트의 최소 또는 최대 확대/축소 제한과 같은 작업을 적용하는 데 사용할 수 있습니다.

코드 예시

이 예제는 newZoomFactor 인수를 사용하여 스프레드시트 뷰포트의 최소 및 최대 확대/축소 제한을 설정합니다.

Ask ChatGPT

// newZoomFactor 인수를 사용하여 줌 동작을 제한
// allowUserZoom을 true로 설정
spread.options.allowUserZoom = true;
activeSheet.bind(GC.Spread.Sheets.Events.ViewZooming, function (e, info) {
    if (info.newZoomFactor >= 2) {
        info.newZoomFactor = 2; // 최대 줌 배율이 2
    }
    if (info.newZoomFactor < 1) {
        info.newZoomFactor = 0.5; // 최소 줌 배열이 0.5
    }
});

이 예제는 cancel 인수를 사용하여 스프레드시트 뷰포트의 최대 줌 제한을 설정합니다.

// cancel 인수를 사용하여 줌 동작을 제한
// allowUserZoom을 true로 설정
spread.options.allowUserZoom = true;

activeSheet.bind(GC.Spread.Sheets.Events.ViewZooming, function (e, info) {
    if (info.newZoomFactor >= 2) {
       info.cancel = true; // 확대/축소 동작 취소 
    }
});