【WPF】シンプルなペイントソフトを作ってみた

こちらのサイトではDRUPAL10に関連する記事を掲載しています。

 

 

 

概要

 

WPFは3DグラフィックをサポートしたGUIコンポーネントで、Windowsデスクトップアプリを作ることができます。仕事でWPFをすこし触っていたので、簡単なペイントアプリを作ってみます。WPFはWindows Presentation Foundationの略ですので、名前の通り多様な表現方法を簡単に利用することがでます。WPFの機能を検証してみました。

 

 

 

環境

Windows10
Microsoft Visual Studio 2015
WPF & Visual Basic

 

 

アプリのイメージ

簡単な電気工事の図面が作成できるペイントツールを作ることにします。
汎用的に使用できるようにペイントツール用のクラスを設計することにしました。

 

 

スクリーンショット

 

起動直後の画面

 

スタンプ機能とフリーハンドで作図1

 

スタンプ機能とフリーハンドで作図2

 

領域を指定してイメージをコピー

 

コピーしたイメージを任意の場所に貼り付け

 

モジュールの設計

 
ペイントソフトのカスタマイズが簡単にできるようにドローイングの基本的な機能を織り込んだクラスを設計します。
 
 

機能

 
・イメージファイルを取り込み編集することができる
・イメージのコピー(またはカット)&ペーストができる
・描画モードは以下のモードをサポート:
鉛筆モード※
サークルモード※
スタンプモード
塗りつぶしモード
消しゴムモード
削除モード
※太さ、色、透明度の変更ができる

 

handringDrawing クラス

 

 

状態遷移

 

 

 

プロパティ

 

clipboardStatus
“コピー(カット)&ペーストの処理状態を取得する
※描画モードが「選択」の場合にのみ有効”
copyMode
“コピーまたはカットが実施された場合、動作モード(コピー/カット)を取得する
※描画モードが「選択」の場合にのみ有効”
Height
描画領域の縦幅を取得または設定する
isArrow
現在選択されている描画モードが消しゴム2モードかどうか判定または消しゴム2モードに設定する
isElipse
現在選択されている描画モードが円(楕円)モードかどうか判定または円(楕円)モードに設定する
isEraser
現在選択されている描画モードが消しゴムモードかどうか判定または消しゴムモードに設定する
isEraser2
現在選択されている描画モードが消しゴム2モードかどうか判定または消しゴム2モードに設定する
isPaint
現在選択されている描画モードがペイントモードかどうか判定またはペイントモードに設定する
isPen
現在選択されている描画モードがペンモードかどうか判定またはペンモードに設定する
isRect
現在選択されている描画モードが記号表示モードかどうか判定または記号表示モードに設定する
selectedMark
現在選択されている記号情報を取得または設定する
progressValue
プログレスバーに表示される進捗(%)を取得または設定する
selectedBlurrness
現在選択されている描画線(描画シェイプ)透過度を取得または設定する
selectedColor
現在選択されている描画色を取得または設定する
selectedDrawmode
現在選択されている描画モードを取得または設定する
selectedThickness
現在選択されている描画線太さ(描画シェイプ大きさ)を取得または設定する
Width
描画領域の横幅を取得または設定する
x
マウスまたはスタイラスの水平方向の座標を取得する
y
マウスまたはスタイラスの垂直方向の座標を取得する

 

パブリック

 

パブリックメソッド

Clear()
背景以外の画面情報(BITMAP)をクリアする
ClearAll(Optional bmpfilepath As String = Nothing)
“すべての画面情報(BITMAP)をクリアする
bmpfilepath: 読み込み対象のビットマップファイルを指定する(未指定の場合は背を表示しない)”
ClearBitmapWrtable()
消しゴム機能用画面情報(BITMAP)クリアする
EraseDrawing(pt As System.Windows.Point)
“消しゴム機能主処理
pt: イベント発生時のスタイラス(またはマウス)座標”
ImageConvert(mode As enumImageConvertMode)
イメージの各種変換処理を選択する
PaintDrawing(pt As System.Windows.Point, paintCol? As System.Int32)
消しゴム機能主処理(つながっている領域をクリア)
PasteSelectedRect(rectPt As StrSelectedRectPt, Optional pt As Point = Nothing)
選択領域のペースト処理
read_xml
環境情報をXMLから読み込む
readFile()
保存ファイルを読み込む
save_xml
環境情報をXMLに出力する
saveAsImage(defaultPath As String)
“描画されたイメージを別名で保存する
defaultPath: 保存ファイル名選択ダイアログのデフォルトパスを指定する”
saveImage(filefullpath As String)
“描画されたイメージを保存する
filefullpath: 保存ファイル名を指定する”
selectColor()
色パレットから任意の色を選択する
SetEraserMode(mode As enumEraseMode)
“消しゴムモード開始または終了処理をする
mode: 開始または終了を設定する”
StaylusDownMain(pt As Point)
“スタイラスダウンイベント発生時に行う処理をする
pt: イベント発生時のスタイラス(またはマウス)座標”
StylusMoveMain(pt As Point, Optional mouse_stat As MouseButtonState = MouseButtonState.Pressed)
“スタイラスムーブイベント発生時に行う処理をする
pt: イベント発生時のスタイラス(またはマウス)座標
mouse_stat: マウスイベント発生時のマウス左ボタンステータス(スタイラスイベントの場合は未設定)”
clearSelection()
コピペ処理中断、クリア処理
selectionComplete()
領域の選択完了処理
Cut()
指定領域のカット処理を行う(_CutorCopyをカットモードで呼び出す)
Copy()
指定領域のコピー処理を行う(_CutorCopyをコピーモードで呼び出す)
Paste()
カットまたはコピーされたデータを指定領域にペーストする
 

プライベート

 

プライベートメソッド

_readMyColors
色情報をXMLから読み込む
_readMyLines
線種情報をXMLから読み込む
_writeMyColors
色情報をXMLに出力する
_writeMyLines
線種情報をXMLに出力する
_CutorCopy(mode As enumSelectedRectCopyMode)
カット処理またはコピー処理を行う
_savePastingPt(pt As Point)
ペースト先の座標を保存し、_drawSelectionRectを呼び出すことにより、マウスポインタにプレビュー表示する
_convGrayScale()
グレースケールに変換する
“_drawSelectionRect(rectPt As StrSelectedRectPt, Optional pt As Point = Nothing)
Spoiler title
選択領域の表示処理を行う
TimerCount(stateInfo As Object)
タイマーイベント発生時処理を行う

 

プライベートファンクション

_saveImage(filefullpath As String) As Integer
イメージデータ出力の主処理を行う
chkDrawmode(drawmode As enumDrawmode) As enumDrawModeType
Drawmodeが通常モードかビットマップを直接操作するモードか判定する
clrpnt(arg_pt As System.Windows.Point, paintCol? As System.Int32, stlevel As Integer)
消しゴム機能サブ処理(あるポイントの周辺をクリアする)
getAdr(arg_pt As Point, Optional pos As enumPos = enumPos.center) As Integer
基準の座標、オフセット(指定された方向)から実アドレスを算出する
getNewPt(arg_pt As Point, Optional pos As enumPos = enumPos.center) As Point
基準の座標、オフセット(指定された方向)から新しい座標を算出する

はじめてC#を学ぶ人に向け、C#プログラミングの「なぜ」を解決できるように、図解とサンプルを使用した解説をしています。本書を読めば、C#で書かれたプログラムを理解し、自分でC#プログラムを書くための基礎的な知識を身につけることができます。プログラム言語を理解するのに必要な概念と基礎知識が難しい言葉ではなく、わかりやすく書かれています。

 

 

ダウンロード

 

管理人が製作したサンプルアプリを以下のボタンからダウンロードしていただけます。

WPFの学習用にご活用ください。

 

WPF版 簡単!お絵かきアプリ インストーラ

 

 

 

このサイトに関するご意見・ご質問はこちらまで

この記事またはDrupalに関するご質問がございましたら、お気軽にお問い合わせください。

タイトルとURLをコピーしました