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

<C#>

画像をスクロールしたり、スピンボタンで回転させて表示。背景部画像を擬似的に無くすため透明化。 <フォーム上での扱い方>


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


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

「<C#> 画像をスクロールしたり、スピンボタンで回転させて表示。背景部画像を擬似的に無くすため透明化。 <フォーム上での扱い方>」

について説明します。






総合の目次


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

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



 

関連サンプル


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

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

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

 

 

<関連サンプル2>
「画像をスクロールしたり、スピンボタンで回転させて表示。背景部画像を擬似的に無くすため透明化。 <ピクチャボックス上での扱い方>」

今回のサンプルです。

 


 

はじめに


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

 

 

ところで、ズーム(拡大縮小)のサンプルの時は、

 

<1>
対象画像のみで、背景部はなし。

 

<2>
対象画像だけではなく、背景部も画像化。

 

の2種類を用意しました。
これに対して、今回の「回転」では、上記<1>はなく、<2>のサンプルのみになります。
なぜならば、回転させると、当然傾いた四角形の画像になります。
傾いた画像はないため、<1>は有り得ないです。
よって、背景画像(傾いていない普通の画像)の上に、傾いた(回転させた)対象画像を重ねることになります。
すなわち、<2>になります。
ただし、擬似的に<1>を作ることは可能です。
背景部の色を、透明色にすればよいです。
そのようにすれば、背景部は存在しますが、透明なので、実質上対象画像部のみになります。

 

 


<1>

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

 

<2>

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

 

<3>

また、貼り付けた画像は、スピンボタンで回転をすることが可能です。

 

 

 


 

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


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


<関連サンプル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/n157942


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


 

 

回転処理用グラフィッククラスのコード

 

<1>

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

 

<2>

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

 

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


 

 

 


 

コードの解説


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





実行結果


スピンボタンで数値を上下させると、画像が回転します。
また、縦スクロールバーを操作すると、画像が上下に移動します。
また、横スクロールバーを操作すると、画像が左右に移動します。

 

 

 

 実行結果

 



 

さいごに

 

特にありません。