[{"id":"7720ca38-fc98-4fd8-a3a5-3c0e730c3c72","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"247ded67-b050-4436-be40-fe7b0eeabef7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"9a8c377f-1f1e-476e-b487-c2339da9bed3","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"5e8e6db2-89b9-4184-bbdc-301ee676869e","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"e04b598e-b0d8-4054-bdac-5143d90b3d51","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"edb028d0-a8cc-42b2-acda-42a5515729f0","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"2adde444-20a6-43d7-8896-2b445877327a","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"6ab8ced2-6c7a-41b6-b861-ba066bd40f40","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"0c34aedd-80a3-470b-a0f6-c327a4346be7","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"717a5892-fa23-499b-a61d-cff228943aaf","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"bd9be971-69fc-4793-ad6d-234be7a93048","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"a1e8d38f-43d8-4b3e-b747-3fbf7656fcd9","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"d6995fdf-76ee-421f-9e7a-3fb324d14bbb","tags":[{"product":null,"links":null,"id":"2f522515-8c88-4017-855d-905bc4b0ea3c","name":"Upd","color":"Blue","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"64fa3155-4543-4acd-83b7-f9860fd46673","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"698413bd-0b16-4287-baec-644d98a411d1","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]},{"id":"7e4393a0-21ef-438b-981b-325b64db5baa","tags":[{"product":null,"links":null,"id":"6c1a6899-1b88-404c-9a73-4a0c6c9090a3","name":"New","color":"Red","productId":"66a69675-7df9-45b2-867a-4ab2613535fa"}]}]

拡大/縮小表示

SpreadJSでは、シートのビューポートを拡大または縮小表示できます。拡大/縮小表示するには、以下のいずれかの方法を使用できます。

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

セルサイズとセル内のデータは、ビューポートと共に拡大または縮小表示されます。

Zoom in

罫線、グリッド線、固定線、分割バー、および選択インジケータは影響を受けません。

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