LEADTOOLS JavaScript(Leadtools.Controls)

フレームを表示

エレメントプロパティで、任意のHTML(またはSVG)要素とその子孫は、ImageViewerItemに追加されるかもしれません。これは、JavaScript ImageViewerで情報を提示することの多くの新しい創造的な可能性をもたらします。

ユーザー定義のHTMLの必要条件

この機能を利用するためにアプリケーションのために、画像ビューワ要素Modeが使われなければなりません。ユーザーが、追加される要素と、ネイティブに対話するために、ブラウザはHTMLポインターイベントもサポートしなければなりません。

ユーザー定義のHTMLとネイティブ対話操作の用途

ビューワがそれ自体を作成するか、維持管理するイメージまたはHTML5キャンバス元素に対して、「ユーザー定義のHTML」は、作成されるか、ImageViewerにユーザーまたはアプリケーションの他の部分によってそうでない場合供給されるHTML(またはSVG)要素に言及します。このHTMLは、確かに含むimgかもしれません、または、canvas任意のヘッダ、リスト、フォーム要素だけでなく(などのinput、またはbutton)、そして、他のどのブラウザをサポートされた要素も。HTMLは、自動的に拡大縮小されて、それが関連づけられるImageViewerItemの境界と一致するために配置されます。

ユーザー定義のHTMLは、BackImageプロパティまたは他の構成と結合されるとき、ラスター画像にかかっているインタラクティブPDFフォームの外観を提供することができました。各々のImageViewerItemがページで、閲覧モードを変更することは、調査の可能性を作成することもできました。基本的に、通常のImageViewerは、潜在的に無限の数のindividualizableなミニウェブページ(回転による各々)スケーリング、フリップ、回転、配置、見出しをつけることとトランジションをここで作成します。各々の「ページ」はページマネージャーとして機能するImageViewerに座ります。そして、追加の配置、組織化と対話操作を提供します。

CSSの規則が利用できるときpointer-events、追加される要素は対話されることができます。この場合、更なるHTMLはクリックしていて、マウスを重ねていて、ドラッグしているネイティブに反応するように構成されることができます、または、他のものはブラウザポインターイベントをサポートしました。ユーザーは、イベントハンドラを要素のどれにでも割り当てて、いつでも要素を追加または削除することができます。これは、ユーザー定義のHTMLが通常処理のためにポインターイベントをキャプチャする対話モード「の上に」座るからです。ElementInsertionHelperユーティリティクラス(以下に記す)は、ユーザー定義のHTML構成で援助することができます。

ユーザー定義のHTMLのための技術的な考慮点

以前に、要素ModeImageViewerItemは、まだHTML画像要素(imageを通して)またはHTML5キャンバスエレメント(カンバスを通して)を保持するだけです。エレメントプロパティは、任意のHTMLまたはSVGエレメントを受け取ることができます。それは提供される要素があるかimgどうかも検出します、または、canvasそして、追加の機能性がそれらのプロパティで要素に対して用意されているため、代わりにimageまたはカンバスを設定します。いつものように、imageカンバスエレメントのわずか1台は、ImageViewerItemのために設定されるかもしれません。

BackImageは、任意のHTMLまたはSVGエレメント(単にHTML画像要素の代わりに)に乗ります。しかし、ユーザーがHTMLをBackImageに提供するならば、エレメントには同様にユーザー定義のHTMLがない限り、ユーザーはPassthroughDiv(以下に記す)のために変更されるImageViewerItem要素を期待するべきでありません。

新しいヘルパーメソッドは類似したエフェクトで利用できます-渡されたパラメーターが、実際、aであるならば、CreateFromElementCreateFromCanvasを内部的に呼び出しますcanvas。同じことは、AddFromElementInsertFromElementUpdateElementを選びます。

ImageViewer_Componentsで論じられるように、若干の新しい要素は潜在的ユーザー対話をサポートするためにImageViewerに追加されます。ネイティブ対話操作がHTMLポインターイベントを通して許可するとき、これらの要素(EventCanvasPassthroughDiv)は作成されるだけです。PassthroughDivが対話されるために要素を保持する間、EventCanvasはポインター対話操作のための入力としてForeCanvasを置換します。

これは重要な区別です-PassthroughDivが使われるとき、対話される任意の要素はViewDivから移動されます。ページの要素スタイルは、これを考慮に入れなければならなくて、PassthroughDiv子孫と一致するために、CSSセレクタを適用しなければなりません(潜在的に様々な)。これは、もっと下記の「落し穴」セクションで論じられます。

時々、エレメントプロパティに追加されるすべての要素が対話されるはずであるというわけではありません-これは要素が好むdiv、または、section対話モードについては取得するコンテナを含みます。この問題を処理するために、ユーティリティクラスElementInsertionHelperが存在します。ElementInsertionHelperは、強制するか、ユーザー定義のHTMLで対話機能にかかっている完了したコントロールのために提供された要素から削除するpointer-eventsメソッドを提供します。

ユーザー定義のHTMLは、AutoRemoveItemElementsのエフェクトを受けません。

ユーザー定義のHTMLシステムの落し穴

上で示したように、ネイティブ対話操作のために使われる要素は、まだViewDivの直系であるために見るが、PassthroughDivによって実際に保持されます。親または子が要請されるDOMによるこの手段対話操作は、予想と一致しないかもしれません。これは、CSSがネイティブ対話操作とユーザー定義のHTMLがないImageViewerItemと同じ結果を取得するために修正される必要があるかもしれないことも意味します。下記をサンプルと考えます-項目に「サムネイルモード」クラスを追加することは様々な要素の様々なスタイルの変更を必要とするかもしれません:


              .lt-imageviewer .lt-view.thumbnail-mode .lt-item {
                /* Thumbnail Mode */
                padding: 15px;
                padding-bottom: 70px;
              }
              
              .lt-imageviewer .lt-imageviewer-passthrough.thumbnail-mode .lt-image-clipping {
                /* Thumbnail Mode on a native interaction item - change margins instead, of the 'clipping' element instead */
                margin: 15px;
                margin-bottom: 50px;
              }
              

この状況は良好、きれいなcodeに向かわないで、ImageViewerItem ― 正規のimageによるものとユーザー定義のHTMLによるもの ― の両方のインスタンスで、同じ結果を許可します。

ユーザー定義のHTMLを設定するとき、CSS設定に気づいていますbox-sizingImageViewerは、一貫したものを使用して提出されますbox-sizing: "content-box";これは、エレメントに追加される根本の要素に適用されます。しかし、そのルートの任意の直系は、明示的なbox-sizing値を設定しておきません。

要素を追加するとき、内部のメソッドはルートとその子孫の実物大を取得して、その計算されたサイズのまわりでImageViewerItemの大きさを変更しようとします。CSS異常とtenchnicalitiesのために、特にCSS箱モデルに関して、この値は、必ずしも正しくないかもしれません。修理するために、どんなCSS規則が更なるHTMLのために効力を有するか調べてみます、そして、パディングまたは境界が含まれるならば、値を見なしますbox-sizing

参照

参照

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