LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

HTML5/JavaScript ImageViewerは、ImageViewerCreateOptions.UseElementsプロパティ(それはtrueまたはfalseでもあるかもしれません)を画像ビューワが要素Modeを使うことを示させます。要素Modeは、ビューワとその項目(要素の上のcanvas描画の代わりに)にする本当のHTML5要素を使用します。ビューワの要素Modeはまだ記帳クリック、タッチ、スクロールとドラッグイベントのために要素を使用するcanvas、ならびに、カスタムはレンダリング操作(レンダリングアノテーションなどの)を郵送します。

要素Modeを使うとき、アプリケーションはエレメントに任意のHTMLを関連づけるかもしれなくて、更なるHTML(例えばボタンクリックまたはtextbox編集)で標準設定のブラウザページ対話操作を使うかもしれません。詳細な情報のための画像ビューワユーザー定義のHTMLトピックを参照してください。

完了したサンプルのために、LEADTOOLSインストールに含まれる画像ビューワスタイルスデモを参照します。(ビューワデモが要素Modeも使うドキュメントのJavaScriptバージョン)デフォルト。

デフォルトのクラス名(さらに下で議論される)で、下記は、使われる要素の階層です:

HTML レイアウト

            
             <div >
                <div class="lt-view">
                   <div class="lt-item">
                      <div class="lt-clipping">
                         <div class="lt-flip">
                            <div class="lt-image-border"></div>
                               <img class="lt-backimage" />
                               <img class="lt-image" />
                            </div>
                         </div>
                      <span class="lt-item-text"></span>
                   </div>
                   <div class="lt-item">...</div>
                   ...
                </div>
             </div>
            
             

            
             ViewDivHolder
                ViewDiv
                   Item
                      Clipping
                         Flip
                         Border
                         Back Image
                         Image
            
            
                      Text
            
            
            
            
            
            
             

各々の要素は、特定の重要性を持っています:

HTML要素が使われるので、CSSスタイルとトランジションは要素に適用されることができます。その結果、画像ビューワでプログラムコードからこれらのプロパティを設定することは、もはや必要とされないか、許可しません。これらのプロパティのどれの値でも設定することは、無視されて、使われません:

これらのプロパティはアプリケーションによってCSSを通して完全にここで処理されます。そして、それはより高速UIに終わります。以下に記すように、任意の項目/要素のサイズを変更する更新処理プロパティの後、ImageViewer.UpdateStylesは呼び出されなければなりません-ビューワはCSSで変更されたかもしれない新しい値を取得して、内部的にこれらのプロパティのために値を設定します。自動的に標準的なHTML/DOMのCSS変化を検出することを処理する自動の方法がないため、このメソッドは必要とされます。

この変更のため、特定のプロパティは様々な場所に様々な値をここで持っていることができます-たとえば、2つの様々な項目は様々な項目境界幅値を与えられるかもしれません。様々な項目のために様々なサイズ値以下のプロパティが常に要素が作成された最初の項目に関して値から計算されるように、現時点ではでなくサポートします(ImageViewerElementsModeCreateOptions.AutoRemoveItemElementstrue:である特定のイベントの最初の要素であるれないかもしれません

また、CSS値だけborder-top-widthが、ImageViewer.ImageBorderThicknessImageViewer.ItemBorderThicknessのために使われます。

CSSが前に項目が利用できない追加のプロパティのためにここで使われることもできます-すべての有効なCSSは使えます。

オーバーフローなど必要なビューワ規則を上書きします。一部の要素では非表示になり、予想外の結果をもたらす可能性があり回避すべきです。追加されるとき、ビューワは要素数<style>を作成して、追加しますために<head>の画像ビューワが正しく機能するために必要である基本要素規則をリストするドキュメント。

CSS規則はCSSクラス名セレクタ(例えば".lt-item"項目のための)によって適用されることができます。そして、それのすべてはImageViewerElementsModeCreateOptionsでプログラムコードから修正されることができます。ビューワが作成されるとき、これらの要素Modeに特有の設定はImageViewerCreateOptions.ElementsModeOptionsプロパティに設定されることができて、読まれます。

ImageViewerElementsModeCreateOptionsは、以下のデフォルトのクラス名値を持っています:

エンティティ プロパティ デフォルト値 デフォルト値(前に置かれる)
プレフィックス ClassPrefix lt N/A
ビュー要素 ViewElementClass view lt-view
項目要素 ItemElementClass item lt-item
画像要素 ItemImageElementClass image lt-image
後ろの画像要素 ItemBackImageElementClass backimage lt-backimage
image Border要素 ItemImageBorderElementClass image-border lt-image-border
imageクリッピング要素 ItemImageClippingElementClass image-clipping lt-image-clipping
imageは、要素を上下に反転します ItemImageFlipElementClass image-flip lt-image-flip
項目テキスト要素 ItemTextElementClass item-text lt-item-text
マウスを置いた項目(選ばれた対話モードで) ItemHoverClass item-hovered lt-item-hovered
選択されたアイテム(選ばれた対話モードで) ItemSelectClass item-selected lt-item-selected
アクティブ項目 ItemActiveClass item-active lt-item-active
ロードしている(ImageViewerItem.Urlが設定されるとき)image ItemImageLoadingClass image-loading lt-image-loading
ロードされる(ImageViewerItem.Imageが完全にロードしたimageであるとき)image ItemImageLoadedClass image-loaded lt-image-loaded

ImageViewerElementsModeCreateOptions.ClassPrefixはビューワが作成されるとき、互いにクラス名に適用されるプレフィックスを保持します-これは様々なスタイルが同じページに追加される様々なビューワに適用されるのを許可します。一度ビューワが構築されたら、プレフィックスは適用されるだけです、しかし、ユーザーは各々のクラス名の前に置かれたバージョンを受け取るImageViewerElementsModeCreateOptions.Clone関数へのパラメーターとしてtrueを渡すかもしれません。ImageViewerElementsModeCreateOptionsオブジェクトは、接頭辞をすでに適用して、ビューワに渡されるべきでありません:clone関数から作成されるオプションオブジェクトを渡しません。この関数は、内部的に呼び出されます。

プレフィックス値は、LEADTOOLSに関係しないページ上でそのほかのクラスとクラス名が衝突しないようにします。

ImageViewerElementsModeCreateOptionsにはImageViewerElementsModeCreateOptions.AutoRemoveItemElementsプロパティも含まれ、ページ上でビューの外にある項目を制御します。AutoRemoveItemElementstrueであるとき、ビューから移動する項目はページから完全に削除されます:使用中であるImageViewerItem.ImageまたはImageViewerItem.Canvasを含め、ImageViewerItem.ItemElementからの要素はすべて削除されます。項目がビューに戻らなければならないとき、これらの要素はまったく再形成されます、そして、imageがImageViewerItem.Imageで存在したならば、ImageViewerItem.Urlプロパティはimageのために新しい要求を呼び出すために設定されます。imageは、ブラウザによってキャッシュに格納されなければなりません。全体として、項目の自動削除により、非常にかず多くの項目や大容量の画像に使っていたページのメモリを減らすことができます。

項目がImageViewerElementsModeCreateOptions.AutoRemoveItemElementsプロパティのために追加されたあと、ビューワはImageViewer.AutoItemElementsAddedイベントを呼び出します。

項目がImageViewerElementsModeCreateOptions.AutoRemoveItemElementsプロパティのために追加される前に、ビューワはImageViewer.AutoItemElementsRemovedイベントを呼び出します。

項目要素が削除されなければならなくて、追加されなければならないとき、これらのイベントを使うことはクリーンアップまたは他のタスクをする際に援助することができます。

ここでCSSがあれば、たとえば以下のように、アクティブな項目要素の背景色を簡単にスタイル設定できます。


            .lt-imageviewer .lt-item-active {
                /* Active Item */
                background-color: red;
             }
             

この値"lt-item-active"デフォルトのImageViewerElementsModeCreateOptions.ItemActiveClass"item-active")によるデフォルトのImageViewerElementsModeCreateOptions.ClassPrefix"lt")のアプリケーションから付属しました。どちらの値でも、完全にカスタマイズ可能なクラス名を作成するために、ビューワの作成の前に変更されるかもしれません。

ImageViewerElementsModeCreateOptions内のクラス名の一部は、要素ではなく特定の要素状態に適用されます。

要素に適用可能なクラスが他にも存在しますが、ユーザーは名前も規則も定義しません。これらのクラスのために定義、要素をダイナミックに追加されて<style>中で定義されます<head<、ユーザーの懸念の外側にあるはずです。

画像ビューワの要素Modeに、項目のための要素へのすべての最新版が、ImageViewer.RenderItemImageViewer.PostRenderItemイベントの間で起こります。詳細については、「レンダリングサイクル」を参照してください。

ボックスシャドウのためのCSSは、項目imageの境界(下のような)に適用されることができます:


             .lt-image-border {
                /* Box Shadow (view, item, image border) */
                box-shadow: #333 1px 1px 4px -1px;
             }
             

image境界の要素のボックスシャドウは、写角を維持管理するために、自動的に回転します。計算の限度のために、要素が1秒につき回転する複数の百程度であるならば、境界はわずかに弱まるかもしれません。この回転シャドウは、移行時でも機能します。

ImageViewer.UpdateShadowOnRotationはデフォルトでTrueであり、各ImageViewerItem.ImageBorderElement。のボックスシャドウプロパティのCSS値を更新します。trueとき、シャドウが常に同じ三次元場所から来るようであるように、ビューワはスタイルからh-シャドウとv-シャドウ属性を解析して、imageと境界の回転と一致するために回転させます。

CSSトランジションが画像ビューワ要素のあらゆる面に適用されるかもしれない間、内部コードが要素でトランジションを無効にしなければならないインスタンスがあります。以下の行動は、抑制されたトランジションを引き起こすかもしれません:

トランジションを無効にするために、ビューワは、任意の設定されたトランジション(CSS指令を使う!important)をオーバーライドする各々の要素に、内部のクラスを適用します。最新版が発生した直後に、このクラスは削除されます。これは、DisableTransitions(スタイルを適用します)とEnableTransitionsメソッド(スタイルを削除します)を呼び出すことによって実行しました。これらのメソッドは、移行を手動で無効化/再有効化することにより使用できます。IsTransitionsEnabledプロパティは、現在ビューワが移行が無効化されている状態であるかどうかを確認するために使用できます。

ElementsUpdatedイベントは、ビューワがビューまたは任意の項目の一部である要素上でDOMまたはCSSのプロパティを変更する場合に発生します。このイベントには、画像ビューワがCSS移行を実行している時を検出するために使用できるImageViewerElementsUpdatedEventArgs.IsTransitionsEnabledプロパティも含まれます。たとえば、CSSトランジションが効力を有する間、ドキュメントビューワはアノテーションのカスタム描画を停止するためにこのイベントを使います。

参照

参照

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