MENU

IDRViewer API

IDRViewerは、UIを簡単に構築できるシンプルなビューアコンポーネントとして設計されています。これらは、ページの読み込み、ズーム、ページ表示、レイアウトなどの複雑なタスクをすべて実装し、ビューアとのやり取りに使用できるAPIを提供します。これらのサンプルUIはそのまま使用することも、独自のUIを構築する方法の出発点または例として使用することもできます。

Viewer API:

ナビゲーション:

  • IDRViewer.next(); – 次のページに進む
  • IDRViewer.prev(); – 前のページに戻る
  • IDRViewer.goToPage(page); – 指定したページに移動

ズーム:

  • IDRViewer.zoomIn(); – ドキュメントをズームする
  • IDRViewer.zoomOut(); – ドキュメントをズームアウトする
  • IDRViewer.setZoom(IDRViewer.ZOOM_AUTO); – ブラウザに最適なズーム(ドキュメントとレイアウトモードに依存)
  • IDRViewer.setZoom(IDRViewer.ZOOM_ACTUALSIZE); – ドキュメントを100%で表示
  • IDRViewer.setZoom(IDRViewer.ZOOM_FITWIDTH); – 幅に合わせて拡大(連続モードで使用される最大ページ幅)
  • IDRViewer.setZoom(IDRViewer.ZOOM_FITHEIGHT); – 高さに合わせてズーム(連続モードで使用される最大ページ高さ)
  • IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); – ページに合わせてズーム(連続モードで使用される最大ページ)
  • IDRViewer.setZoom(0.5); – ドキュメントを指定されたズーム値にズーム

レイアウト:

  • IDRViewer.setLayout(IDRViewer.LAYOUT_CONTINUOUS); – レイアウトを連続モードに設定
  • IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); – レイアウトをプレゼンテーションモードに設定
  • IDRViewer.setLayout(IDRViewer.LAYOUT_MAGAZINE); – レイアウトをマガジンモードに設定

セレクション:

  • IDRViewer.setSelectMode(IDRViewer.SELECT_PAN); – 選択モードをマウスで画面を動かせるパンに設定
  • IDRViewer.setSelectMode(IDRViewer.SELECT_SELECT); – 選択モードをテキスト選択に設定

イベント:

ユーザーインタラクションに基づいてUIを更新する方法として、さまざまなイベントを取得することができます。イベントリスナーは IDRViewer.on('eventtype', eventListener); と IDRViewer.off('eventtype', eventListener); を使って追加、削除ができます。

使用例:

IDRViewer.on('pagechange', function(data) {
    console.log("navigated to page " + data.page);
});

 

ready:

  • page (number) – 現在のページ
  • pagecount (number) – ドキュメントのページ数
  • bounds (array[[number, number]]) – An array of page bounds
  • thumbnailType (string) – サムネイルのファイルタイプ (jpg or png)
  • selectMode (string) – 現在のセレクションモード
  • isMobile (boolean) – ユーザーがモバイルかタブレットからブラウズしているかどうか
  • layout (string) – 現在のレイアウトモード
  • availableLayouts (array[string]) – 使用可能なレイアウト
  • title (string) – 変換されたファイルのタイトル(利用可能な場合)
  • bookmarks (object) – 変換されたファイルのブックマーク(利用可能な場合)
  • pageType (string) – ページのファイルタイプ (html or svg)
  • isFirstPage (boolean)– 現在のページが最初のページの場合
  • isLastPage (boolean) – 現在のページが最後のページの場合

pagechange:

  • page (number) – 現在のページ
  • pagecount (number) – ドキュメントのページ数
  • isFirstPage (boolean) – 現在のページが最初のページの場合
  • isLastPage (boolean) – 現在のページが最後のページの場合

pageload:

  • page (number) – ロードされたページ番号

layoutchange:

  • layout (string) – The current layout mode

selectchange:

  • type (string) – 現在のレイアウトモード

zoomchange:

  • zoomType (string) – 現在のズームモード
  • scale (number) – 実際のスケール値
  • isMinZoom (boolean) – 現在のズームが最小である場合
  • isMaxZoom (boolean) – 現在のズームが最大である場合

 

デフォルトの設定:

デフォルト設定を変更するには、セットアップが呼び出される前にViewer APIを使用します。

使用例:

IDRViewer.goToPage(2); // Set default page
IDRViewer.setZoom(IDRViewer.ZOOM_FITPAGE); // Set default zoom
IDRViewer.setLayout(IDRViewer.LAYOUT_PRESENTATION); // Set default layout
IDRViewer.setSelecMode(IDRViewer.SELECT_SELECT); // Set default select mode
IDRViewer.setup(); // Load viewer with new default settings

 

トランジション:

プレゼンテーションとマガジンのレイアウトモードでは、さまざまなトランジションを利用できます。 関連するCSSクラスをidrviewer要素に追加することで、トランジションを有効にすることができます。

使用例:

<div id=”idrviewer” class=”transition-flip”></div>

プレゼンテーションレイアウトのトランジション:

  • transition-flip
  • transition-slide
  • transition-throw
  • transition-fade

マガジンレイアウトのトランジション:

  • transition-magazine
最終更新日: 7月 05, 2018
BuildVu_SML

こちらはBuildVuご利用者専用のサポートです。一般のご質問は製品ページからお願いいたします。

PAGE TOP