LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

ImageViewerは、ブラウザがHTML5キャンバスエレメントをサポートすることを義務づけます。

ImageViewerのいろいろな要素を理解して、以下のHTMLがあるサンプルを見なすこと:


            <div id="imageViewerContainer" style="width:800px; height:800px"></div>
            

ImageViewerが作成されたとき、そのオリジナルdivには子要素があります:


            <!-- The original container div -->
            <div id="imageViewerContainer">
               <!-- Image Viewer Parts are created as child elements of the div passed by the user -->
               <!-- The main div for the viewer -->
               <div class="lt-imageviewer-main">
                  <!-- The viewer auto scroll div, when scroll mode is Auto -->
                  <div class="lt-imageviewer-autoscroll"></div>
               </div>
               <!-- The holder for the view div (Elements Mode only) -->
               <div class="lt-imageviewer-viewholder">
                  <!-- The view div (Elements Mode only) -->
                  <div class="lt-view"></div>
               </div>
               <!-- The viewer events canvas (Elements Mode only) -->
               <canvas class="lt-imageviewer-eventcanvas"></canvas>
               <!-- The viewer pass-through div (Elements Mode only) -->
               <div class="lt-imageviewer-passthrough"></div>
               <!-- The viewer foreground canvas -->
               <canvas class="lt-imageviewer-forecanvas"></canvas>
               <!-- The viewer image loading div (hidden) -->
               <div class="lt-imageviewer-images"></div>
            </div>
            

以上から、意志の中にdiv画像ビューワを作成することがHTMLページに以下の要素を追加すると推論することができます:

要素 CSSクラス名が、スタイルのために使われます ImageViewerプロパティ 説明
主なビューワ区切り lt-imageviewer-main MainDiv

コンテナdiv。そのCSSクラス名を使用してこのdiv要素をカスタマイズすることができます。

オートスクロール区切り lt-imageviewer-autoscroll AutoScrollDiv

ScrollModeImageViewerScrollMode.Autoであるとき、オートスクロールdivはスクロールバーのサイズを示して、制御するのに用いられます。そのCSSクラス名を用いてこれdivをカスタマイズします。

ビュー所持者区切り lt-imageviewer-viewholder ViewDivHolder

ビュー所持者divは、ViewDivのためのコンテナです。それは、要素Modeの中に存在するだけです。そのCSSクラス名を用いてこれdivをカスタマイズします。

ビュー区切り lt-imageviewer-view ViewDiv

ビューdivは、要素Modeの提出されたHTML画像ビューワのルートです。この要素の詳細については要素Modeトピックを参照してください。そのCSSクラス名を用いてこれdivをカスタマイズします。

イベントキャンバス lt-imageviewer-eventcanvas EventCanvas

イベントcanvasが、要素Modeだけで使われます、そして、いつHTMLポインターイベントユーザー定義のHTMLディスプレイのためにサポートします。サポートされるとき、これcanvasForeCanvasの代わりにイベントを消費します。

壁穴区切り lt-imageviewer-passthrough PassthroughDiv

壁穴divが、要素Modeだけで使われます、そして、いつHTMLポインターイベントユーザー定義のHTMLディスプレイのためにサポートします。サポートされるとき、これdivはユーザーが対話することができるHTMLを保持するのに用いられます。

前景キャンバス lt-imageviewer-forecanvas フォアカンバス

前景canvas。項目の画像データはこれcanvasの表面に描画されます、そして、EventCanvasがその後存在しないとき、これcanvasは同様にポインター入力をキャプチャします。そのCSSクラス名を用いてこれcanvasをカスタマイズします。

image積載区切り lt-imageviewer-images ImagesDiv

これdivが、SVGイメージをロードするのを援助するImageViewerによって、内部的に使われます。これdivは見えないで、スタイルを整えられるべきでありません。

画像ビューワが、その後これらの要素に加えて、要素Modeを使っていないならば、画像ビューワは作成しimgます、または、canvas画像データを保持する各項目のための要素。これらの項目は、HTMLページに追加されません。レンダリング自転車を用いて前景canvasにレンダリングされます。

画像ビューワが要素Modeを使うならば、それはDOMに項目のHTML要素(imgまたは)canvasを追加します。そのImageViewer構造体の上で詳細は要素Modeトピックを参照します。

参照

参照

ImageViewerを用いて
HTML5とJavaScriptによる画像ビューワを用いて
画像ビューワ要素モード
画像ビューワユーザー定義のHTMLディスプレイ
アプリケーションの複数の画像ビューアーを用いて
画像ビューワ外観
画像ビューワの項目
画像ビューワの境界と変換
画像ビューワの変換
画像ビューワのレイアウト
画像ビューワのレンダリング
画像ビューワのスクローリング
画像ビューワの対話モード
画像ビューワのそのほかのオプション
画像ビューワのシングルアイテムモード
画像ビューワのドラッグ&ドロップ
画像ビューワ補間