*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*

<C#>

画像をスクロールしたり、スピンボタンで拡大縮小をして表示。背景部画像有り。 <フォーム上での扱い方>


*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*=*


「C# でのマウスの使い方」における一連の説明(知恵ノート)において、ここでは、

「<C#> 画像をスクロールしたり、スピンボタンで拡大縮小をして表示。背景部画像有り。 <フォーム上での扱い方>」

について説明します。






総合の目次


本ページを含めた関連事項の総合目次です。

http://note.chiebukuro.yahoo.co.jp/detail/n152632



 

関連サンプル


本サンプルと関連性のあるサンプルです。
すなわち、次回のサンプルです。

<関連サンプル1>
「画像をスクロールしたり、スピンボタンで拡大縮小をして表示 <フォーム上での扱い方>」

http://note.chiebukuro.yahoo.co.jp/detail/n152642


 

<関連サンプル2>
「画像をスクロールしたり、スピンボタンで拡大縮小をして表示。背景部画像有り。 <フォーム上での扱い方>」

今回のサンプルです。


 

はじめに


スピンボタン(数値を上下させるコントロール)で、画像のズーム(拡大縮小)をさせる方法を示します。
また、画像は、ピクチャボックスを使わずに、フォームに直に表示する方法を示します。

 

なお、今回のサンプルでは、表示対象画像だけではなく、背景部も作成されて、その全体が描画されます。

背景部とは、対象画像の周りの部分です。

すなわち、本サンプルでは、まず白紙(実際は指定色)のイメージ画像を生成して、その上にズームした対象画像を重ねます。
なぜ、背景部(対象画像の周りの部分)を作成するかと言いますと、本サンプルの処理方法ではない場合、画像を縮小した場合、その周りは、画像の地が何も無い状態になります。

例えば、ステータス関係(ズームの倍率となる数値等)を画面に表示したい場合は、地が何もないと書き辛いです。

しかし、背景部にも画像が有れば、その上にステータス等の文字、数値が書けます(画像の重ね書きの機能を使って可能です)。


 

<1>

フォームに画像ファイルを貼り付けます。

 

<2>

また、貼り付けた画像は、スクロールバーでスクロールすることが可能です。

 

<3>

また、貼り付けた画像は、スピンボタンでズーム(拡大縮小)をすることが可能です。

 

<4>

表示対象画像だけではなく、背景部も画像として作成される。


 

関連サンプルと比べた特徴


一連のサンプルでは、マウスのクリックとダブルクリックの扱い方についてのサンプルです。


<関連サンプル1>
「画像をスクロールしたり、スピンボタンで拡大縮小をして表示 <フォーム上での扱い方>」

 

表示対象画像だけ画像として作成され、背景部は特にない。

 

<関連サンプル2>
「画像をスクロールしたり、スピンボタンで拡大縮小をして表示。背景部画像有り。 <フォーム上での扱い方>」

表示対象画像だけではなく、背景部も画像として作成される。





サンプルコード


ここで取り上げるサンプルは、なるべく複雑にならない範囲で、ズームを確かめられるものとします。






本サンプの仕様概要


<画像ファイルの仕様>
画像は、

C:キャラクター.bmp

とします。

 

 

<ズーム>
スピンボタンで倍率を上げると画像が拡大します。

スピンボタンで倍率を下げると画像が縮小します。

 

 

<横スクロール>
横スクロールバーを操作すると、画像が右、又は左に移動します。

 

 

<縦スクロール>
縦スクロールバーを操作すると、画像が上、又は下に移動します。


<背景部の仕様>

青色の背景を作成します。

(なお、今回は背景が作成されていることがわかり易くするため、青色で目だたせました。しかし、実際に活用する際は、フォームの背景色にして、目立たないようにしてもよいです)

 


 

フォームデザイン等の前準備


コードを記述する前に、フォームのデザイン作成などの、以下の前準備を行なって下さい。

<プロジェクトの作成>
本サンプルの確認用に、新規にプロジェクトを作成して下さい。
プロジェクトの種類は、「Windowsフォームアプリケーション」です。

<フォームのデザイン>
デザイン画面で、スピンボタン(numericUpDown)を1個と、横スクロールバー(hScrollBar)を1個と、縦スクロールバー(vScrollBar)を1個貼り付けて下さい。
(なお、各スクロールバーの配置や長さは、コード上で定めるので、デザイン画面上では、気にしなくて大丈夫です。幅だけデザイン画面で調整して下さい)

 

 デザイン画面

 

 

<イベントプロシージャの作成>

 

デザイン画面のフォーム(スクロールバーが貼り付いていない無地の部分)をダブルクリックすることにより、Form1_Load() メソッドを作って下さい。

 

 

次に、デザイン画面のフォームが選択された状態で、「プロパティ」画面の「イベント」ボタン(雷マークのボタン)をクリックして下さい。
その「プロパティ」画面で、Paint と言う項目をダブルクリックして下さい。
そうすると、Form1_Paint()メソッドが作成されます。

 

 

次に、デザイン画面で先ほど貼り付けたスピンボタン(numericUpDown1)をダブルクリックして、numericUpDown1_ValueChanged() メソッドを作って下さい。

 

 

次に、デザイン画面の横スクロールバーをダブルクリックすることにより、hScrollBar1_Scroll() メソッドを作って下さい。

 

次に、デザイン画面の縦スクロールバーをダブルクリックすることにより、vScrollBar1_Scroll() メソッドを作って下さい。



<クラスを書くためのソースファイルの作成>

[プロジェクト] - [クラスの追加] で、「新しい項目の追加」画面を表示する。
その画面の [ファイル名]欄に任意のファイル名(クラス用ソースファイルのファイル名)を記入する。
[追加]ボタンをクリックする。

 

なお、ここで作成されたソースファイルには、後述しますクラスのコード(「ズーム処理用グラフィッククラスのコード」のコード)を記述します。



Formクラスのコード

 

http://note.chiebukuro.yahoo.co.jp/detail/n153104


(記述量上限の制限で、別のページに記述しています)


 

 

ズーム処理用グラフィッククラスのコード

 

http://note.chiebukuro.yahoo.co.jp/detail/n153105

 

(記述量上限の制限で、別のページに記述しています)


 

 

 


 

コードの解説


サンプルコードの中に書かれていますコメントを読んで下さい。
すなわち、コードの解説は、基本的にサンプルコードの中に書かれているコメントとします。





実行結果


スピンボタンで数値を上下させると、画像がズーム(拡大縮小)します。
また、縦スクロールバーを操作すると、画像が上下に移動します。
また、横スクロールバーを操作すると、画像が左右に移動します。

 

 

 実行結果

 

 



 

さいごに

 

「はじめに」で述べました通り、今回のサンプルでは、表示対象画像だけではなく、背景部も画像として作成されます。
また、背景部がある場合のメリットとしては、例えば、ステータス関係(ズームの倍率となる数値等)を画面に表示したい場合に良いとも述べました。
よって、実際にステータス関係(数値や文字列)を画面に表示する場合のサンプルも用意しました。


 

「画像をスクロールしたり、スピンボタンで拡大縮小をして表示。背景部画像有りの例: ステータス表示 <フォーム上での扱い方>」

http://note.chiebukuro.yahoo.co.jp/detail/n155992