拡大/縮小表示

SpreadJSでは、シートのビューポートを拡大または縮小表示するズーム操作を実行できます。また、特定のズーム制限を設定することもできます。

Zoom in

メモ：
セルサイズとセル内のデータは、ビューポートと共に拡大または縮小表示されます。
罫線、グリッド線、固定線、分割バー、および選択インジケータは影響を受けません。

ズーム操作の実行

拡大/縮小表示するには、以下のいずれかの方法を使用できます：

［Ctrl］キーとマウスホイール
ステータスバーのズームスライダー
2本の指でのタッチ操作（タッチデバイスのみ）
zoomFactorメソッド（sheet.zoom(zoomFactor)）

zoomFactorメソッドを使用して、表示倍率を0.1から4の範囲で設定できます。ズーム機能はデフォルトで有効になっています。無効にするには、 options.allowUserZoom プロパティをfalseに設定します。

コードの使用

次のサンプルコードは、 options.allowUserZoom プロパティを設定します。

spread.options.allowUserZoom = false;

ズームレベルの制限

ズーム操作を実行するときに、 ViewZooming および ViewZoomed イベントが発生します。これらのイベントを使用して、ズーム操作に介入し、ビューポートの最小または最大のズームレベルを制限するなどの操作を適用できます。

コードの使用

次のサンプルコードは、 newZoomFactor 引数を使用して、シートのビューポートの最小または最大のズームレベルを設定します。

// 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; // ズームアクションをキャンセルします。
    }
});

デザイナの使用

SpreadJSデザイナを使用してズーム操作を実行することもできます。

シートのビューポートを素早く拡大または縮小するには、ステータスバーの ズームスライダーを使用して倍率レベルを調整します。ズームスライダーを右または左にドラッグして拡大または縮小できます。また、- または + 記号を使用して段階的に拡大または縮小することもできます。

zoom slider

SpreadJSデザイナで拡大/縮小する別の方法は、表示タブのズームグループにあるズームオプションを使用することです。

zoom group

このグループには次のオプションがあります。

ズーム: リストから使用したい倍率レベルを選択します。
100%: シートのビューポートを元の100%のサイズで表示します。
選択範囲に合わせて拡大/縮小: 選択したセル範囲を最大化して表示するように拡大/縮小して表示します。