Web フォームでの PanWindow コントロールの使用

このコントロールは Web フォーム用の ImageKit コントロールに表示されているイメージと連動して全体のイメージを表示します。パンウィンドウをクリックするとその部分を中心に ImageKit コントロールにイメージが表示され、マウスの移動に合わせてパンウィンドウ内の四角形が移動し、四角形内のイメージが ImageKit コントロールに表示されます。パンウィンドウを再度クリックするとパンウィンドウの機能が停止します。

では、PanWindow コントロールを使用する際の注意点を説明します。

ImageKit.WPF.Web PanWindow コントロールの使用

PanWindow コントロールの使用手順は次の通りです。

1. ツールボックスに ImageKit コントロールと PanWindow コントロールを追加する

ImageKit のインストーラが自動的にツールボックスに ImageKit コントロールと PanWindow コントロールを追加します。手動で追加する場合は以下を行います。

   1. ツールボックスでマウスを右クリックし、「タブの追加」を選択する。
   2. 新しいタブに名前を付けたら、そのタブを右クリックし、「アイテムの選択」を選択する。
   3. 「参照」ボタンをクリックし、「Newtone.ImageKit.WPF.Web.ImageKit.dll」 を選択する。
   4. 「OK」 ボタンをクリックする。

Web フォーム用の ImageKit コントロールと PanWindow コントロールがツールボックスに追加されます。

2. フォームに ImageKit コントロールと PanWindow コントロールを貼り付ける

Web フォームに ImageKit コントロールをマウスでドラッグすると、左上端に ImageKit コントロールがデフォルトサイズで表示されます。ImageKit コントロールのサイズ/位置を変える前に、ImageKit コントロールの位置を絶対値に設定します。お使いの Visual Studio のバージョンによって多少手順が異なります。ImageKit コントロールの位置を手動で絶対値に設定するには、html のソースを開き、ImageKit コントロールのタグの Style に "position: absolute;" を入力してください。

<cc1:ImageKit ID="ImageKit1" runat="server" style="position: absolute;" />

位置を絶対値に設定したら、Web フォームの ImageKit コントロールのサイズや位置を設定できます。PanWindow コントロールにも同じ手順を行い、位置を絶対値に設定してから位置とサイズを設定します。Web ページの html コードは次のようになるはずです。

<cc1:ImageKit ID="ImageKit1" runat="server" height="600px" width="600px" 
     style="position: absolute; left:20px; top:20px; height:600px; width:600px;" />

<cc1:PanWindow ID="PanWindow1" runat="server" height="120px" width="120px" 
     style="position: absolute; left:670px; top:20px; height:120px; width:120px;" />

重要：ImageKit コントロールと PanWindow コントロールの高さと幅の値を必ず旧式の html 形式（height="600px" width="600px"）で記述してください。ImageKit コントロールと PanWindow コントロールは、PanWindow コントロールと ImageKit コントロールのイメージサイズと関係を計算するためにこれらの値にアクセスする必要があります。

3. Http ハンドラの設定

ImageKit コントロールと PanWindow コントロールは、ブラウザにイメージをストリーム転送します。ストリーム転送を有効にするには、http ハンドラを設定しなければなりません。方法は２つあります。１つは、Web アプリケーションの web.config ファイルに http ハンドラを設定することです。もう１つは、Web プロジェクトに IkStream.ashx ファイルを追加することです。

Web.Config ファイルを使用する場合：

VS2010 およびそれ以前のバージョンの web.config ファイルに使用するコード：

<system.web>

     <httpHandlers>

          <add verb="*" path="IkStream.ashx" type="Newtone.ImageKit.Web.IkStream" />

     </httpHandlers>

</system.web>

VS2012 およびそれ以降のバージョンの web.config ファイルに使用するコード：

<system.webServer>

     <handlers>

          <add verb="*" path="IkStream.ashx" name="IkStream" type="Newtone.ImageKit.Web.IkStream" />

     </handlers>

</system.webServer>

IkStream.ashx ファイルを使用する場合：

web.config ファイルに http ハンドラを追加する代わりに、http ハンドラをファイルとして追加することができます。ImageKit には IkStream.ashx という http ハンドラのファイルが同梱されているので、このファイルを Web アプリケーションのディレクトリにコピーし、それを Visual Studio のプロジェクトに追加するだけです。これは、ソリューションエクスプローラを右クリックし、[追加] -> [既存の項目] を選択し、IkStream.ashx ファイルを参照することで行えます。

IkStream.ashx ファイルは、ImageKit のインストール ディレクトリの 「System」 フォルダにあります。

4. イメージの読込/表示コードの設定

下記は、TIF ファイルをサーバーからクライアントのブラウザにストリーム転送する、Page_Load イベントのコード例です。

[Visual Basic]
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
     ImageKit1.Url = "abc.tif"
     ImageKit1.LoadImageFromFile()
     ImageKit1.ScrollBars = True
     ImageKit1.DisplayMode = Newtone.ImageKit.WPF.Web.DisplayMode.ActualSize
     ImageKit1.Display()
     ImageKit1.Link = PanWindow1.Link
     ImageKit1.ShowPanWindow()
End Sub

[C#]
private void Page_Load(object sender, System.EventArgs e)
{
     ImageKit1.Url="abc.tif";
     ImageKit1.LoadImageFromFile();
     ImageKit1.ScrollBars = true;
     ImageKit1.DisplayMode = Newtone.ImageKit.Web.DisplayMode.ActualSize;
     ImageKit1.Display();
     ImageKit1.Link = PanWindow1.Link;
     ImageKit1.ShowPanWindow();
}

読み込むイメージは必ず Web アプリケーションに配置してください。つまり、読み込むイメージが Web アプリケーションのルートフォルダか、Web アプリケーションがアクセス可能なサブフォルダになくてはならない、ということです。イメージのパスは、ImageKit1.Url プロパティで設定します。上記の場合、イメージはルートディレクトリにあるので、相対的な仮想パスはイメージのファイル名だけです。 注意：Url プロパティは、Web アプリケーションの仮想パスで設定しなければなりません（物理パスでの設定不可）。詳しくは、Url プロパティを参照してください。

ImageKit コントロールの DispMode プロパティが「実寸」表示に設定されているかご確認ください。

ImageKit コントロールの Link プロパティを PanWindow コントロールのリンクプロパティに設定してください。

ImageKit コントロールの ShowPanWindow メソッドを実行してください。

5. ImageKit コントロールと PanWindow コントロールをクライアントのブラウザで連動させるために、html コードに JavaScript のイベントを追加してください。

Web ページに JavaScript の enablePanWindow メソッドを追加してください。このメソッドは、PanWindow コントロールと ImageKit コントロールで使用する JavaScript のイベントを追加します。このサンプルでは、<body> タグの onload イベントに enablePanWindow メソッドを追加してあります。

     </head>

          <body onload = "enablePanWindow('ImageKit1', 'PanWindow1');">

          <form id="form1" runat="server">

               <div>

                    <cc1:ImageKit ID="ImageKit1" runat="server" height="600px" width="600px" 
                         style="position: absolute; left:20px; top:20px; height:600px; width:600px;" />

                    <cc1:PanWindow ID="PanWindow1" runat="server" height="120px" width="120px" 
                         style="position: absolute; left:670px; top:20px; height:120px; width:120px;" />

               </div>

          </form>

     </body>

</html>

enablePanWindow メソッドは、２つのパラメータ （ImageKit コントロールの html ID と PanWindow コントロールの html ID） を受け取ります。ImageKit と PanWindow の JavaScript のイベントを無効にするには、disablePanWindow メソッドを実行してください。

 

WPF.ImageKit メンバ | Newtone.ImageKit.WPF.Web.ImageKit