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

この記事はブログとプログラミングで生計をたてている海外在住ウェブディベロッパーがわかりやすさにこだわって作成しました

 

 

 

概要

 

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)

スポイラーのタイトル

選択領域の表示処理を行う

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版 簡単!お絵かきアプリ インストーラ

 

 

 

PHP/Javascript/WORDPRESS案件全般承ります

オーストラリアで主に日系企業や個人のお客様からのご依頼でお仕事をしております。この記事についてのご質問またはお困りのことがございましたら、お気軽にお問い合わせください。

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