Unclassified

Drawing app programmed by windows WPF

 

 

 

概要

 

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

オープンソースなIT技術ではありませんが、少し勉強したのでメモ代わりに残しておきます。

 

ただいま加筆中につき未完

 

 

 

環境

 

Microsoft Visual Studio 2015 + WPF + VB

 

 

 

つくりたいもの

 

つくりたいものというよりだいぶん細分化された設計書になってしまってます。作りながらの作業なのでまずは忘れないうちにメモメモ・・・

 

handringDrawing クラス
コンストラクタ
"handringDrawing(
w As Integer, _
h As Integer, _
image0 As System.Windows.Controls.Image, _
image1 As System.Windows.Controls.Image, _
image2 As System.Windows.Controls.Image, _
image3 As System.Windows.Controls.Image, _
Optional bmpfilepath As String = Nothing, _
Optional cmb_line As System.Windows.Controls.ComboBox = Nothing, _
Optional cmb_color As System.Windows.Controls.ComboBox = Nothing)"

"w: イメージ表示領域の横幅
h: イメージ表示領域の縦幅
image0 背景用イメージコントロール
iamge1 消しゴム機能用イメージコントロール
image2 描画機能用イメージコントロール
bmpfilepath 背景bmpファイルパス(指定なしの場合は背景なしで表示)
cmb_line 線種用コンボボックスコントロール
cmb_color 色情報用コンボボックスコントロール"

[_/su_spoiler]
プロパティ
clipboardStatus
"コピー(カット)&ペーストの処理状態を取得する
※描画モードが「選択」の場合にのみ有効"
[__/su_spoiler]
copyMode
"コピーまたはカットが実施された場合、動作モード(コピー/カット)を取得する
※描画モードが「選択」の場合にのみ有効"
[__/su_spoiler]
Height
描画領域の縦幅を取得または設定する
[__/su_spoiler]
isArrow
現在選択されている描画モードが消しゴム2モードかどうか判定または消しゴム2モードに設定する
[__/su_spoiler]
isElipse
現在選択されている描画モードが円(楕円)モードかどうか判定または円(楕円)モードに設定する
[__/su_spoiler]
isEraser
現在選択されている描画モードが消しゴムモードかどうか判定または消しゴムモードに設定する
[__/su_spoiler]
isEraser2
現在選択されている描画モードが消しゴム2モードかどうか判定または消しゴム2モードに設定する
[__/su_spoiler]
isPaint
現在選択されている描画モードがペイントモードかどうか判定またはペイントモードに設定する
[__/su_spoiler]
isPen
現在選択されている描画モードがペンモードかどうか判定またはペンモードに設定する
[__/su_spoiler]
isRect
現在選択されている描画モードが記号表示モードかどうか判定または記号表示モードに設定する
[__/su_spoiler]
selectedMark
現在選択されている記号情報を取得または設定する
[__/su_spoiler]
progressValue
プログレスバーに表示される進捗(%)を取得または設定する
[__/su_spoiler]
selectedBlurrness
現在選択されている描画線(描画シェイプ)透過度を取得または設定する
[__/su_spoiler]
selectedColor
現在選択されている描画色を取得または設定する
[__/su_spoiler]
selectedDrawmode
現在選択されている描画モードを取得または設定する
[__/su_spoiler]
selectedThickness
現在選択されている描画線太さ(描画シェイプ大きさ)を取得または設定する
[__/su_spoiler]
Width
描画領域の横幅を取得または設定する
[__/su_spoiler]
x
マウスまたはスタイラスの水平方向の座標を取得する
[__/su_spoiler]
y
マウスまたはスタイラスの垂直方向の座標を取得する
[__/su_spoiler] [_/su_spoiler]
メソッド
Clear()
背景以外の画面情報(BITMAP)をクリアする
[__/su_spoiler]
ClearAll(Optional bmpfilepath As String = Nothing)
"すべての画面情報(BITMAP)をクリアする
bmpfilepath: 読み込み対象のビットマップファイルを指定する(未指定の場合は背を表示しない)"
[__/su_spoiler]
ClearBitmapWrtable()
消しゴム機能用画面情報(BITMAP)クリアする
[__/su_spoiler]
EraseDrawing(pt As System.Windows.Point)
"消しゴム機能主処理
pt: イベント発生時のスタイラス(またはマウス)座標"
[__/su_spoiler]
ImageConvert(mode As enumImageConvertMode)
イメージの各種変換処理を選択する
[__/su_spoiler]
PaintDrawing(pt As System.Windows.Point, paintCol? As System.Int32)
消しゴム機能主処理(つながっている領域をクリア)
[__/su_spoiler]
PasteSelectedRect(rectPt As StrSelectedRectPt, Optional pt As Point = Nothing)
選択領域のペースト処理
[__/su_spoiler]
read_xml
環境情報をXMLから読み込む
[__/su_spoiler]
readFile()
保存ファイルを読み込む
[__/su_spoiler]
save_xml
環境情報をXMLに出力する
[__/su_spoiler]
saveAsImage(defaultPath As String)
"描画されたイメージを別名で保存する
defaultPath: 保存ファイル名選択ダイアログのデフォルトパスを指定する"
[__/su_spoiler]
saveImage(filefullpath As String)
"描画されたイメージを保存する
filefullpath: 保存ファイル名を指定する"
[__/su_spoiler]
selectColor()
色パレットから任意の色を選択する
[__/su_spoiler]
SetEraserMode(mode As enumEraseMode)
"消しゴムモード開始または終了処理をする
mode: 開始または終了を設定する"
[__/su_spoiler]
StaylusDownMain(pt As Point)
"スタイラスダウンイベント発生時に行う処理をする
pt: イベント発生時のスタイラス(またはマウス)座標"
[__/su_spoiler]
StylusMoveMain(pt As Point, Optional mouse_stat As MouseButtonState = MouseButtonState.Pressed)
"スタイラスムーブイベント発生時に行う処理をする
pt: イベント発生時のスタイラス(またはマウス)座標
mouse_stat: マウスイベント発生時のマウス左ボタンステータス(スタイラスイベントの場合は未設定)"
[__/su_spoiler]
clearSelection()
コピペ処理中断、クリア処理
[__/su_spoiler]
selectionComplete()
領域の選択完了処理
[__/su_spoiler]
Cut()
指定領域のカット処理を行う(_CutorCopyをカットモードで呼び出す)
[__/su_spoiler]
Copy()
指定領域のコピー処理を行う(_CutorCopyをコピーモードで呼び出す)
[__/su_spoiler]
Paste()
カットまたはコピーされたデータを指定領域にペーストする
[__/su_spoiler] [_/su_spoiler]
ファンクション
[_/su_spoiler]
内部メソッド
_readMyColors
色情報をXMLから読み込む
[__/su_spoiler]
_readMyLines
線種情報をXMLから読み込む
[__/su_spoiler]
_writeMyColors
色情報をXMLに出力する
[__/su_spoiler]
_writeMyLines
線種情報をXMLに出力する
[__/su_spoiler]
_CutorCopy(mode As enumSelectedRectCopyMode)
カット処理またはコピー処理を行う
[__/su_spoiler]
_savePastingPt(pt As Point)
ペースト先の座標を保存し、_drawSelectionRectを呼び出すことにより、マウスポインタにプレビュー表示する
[__/su_spoiler]
_convGrayScale()
グレースケールに変換する
"_drawSelectionRect(rectPt As StrSelectedRectPt, Optional pt As Point = Nothing)
[__/su_spoiler]
Spoiler title
選択領域の表示処理を行う
[__/su_spoiler]
TimerCount(stateInfo As Object)
タイマーイベント発生時処理を行う
[__/su_spoiler] [_/su_spoiler]
内部ファンクション
_saveImage(filefullpath As String) As Integer
イメージデータ出力の主処理を行う
[__/su_spoiler]
chkDrawmode(drawmode As enumDrawmode) As enumDrawModeType
Drawmodeが通常モードかビットマップを直接操作するモードか判定する
[__/su_spoiler]
clrpnt(arg_pt As System.Windows.Point, paintCol? As System.Int32, stlevel As Integer)
消しゴム機能サブ処理(あるポイントの周辺をクリアする)
[__/su_spoiler]
getAdr(arg_pt As Point, Optional pos As enumPos = enumPos.center) As Integer
基準の座標、オフセット(指定された方向)から実アドレスを算出する
[__/su_spoiler]
getNewPt(arg_pt As Point, Optional pos As enumPos = enumPos.center) As Point
基準の座標、オフセット(指定された方向)から新しい座標を算出する
[__/su_spoiler] [_/su_spoiler]

 

 

サンプル

 

説明

 

現在、いろいろ機能を実装中です。。

 

 

スクリーンショット

 

 

 

スクリプト

 

いまのところ、コードはお見せできるレベルじゃありません・・・

 

 

XAML

[code lang=""]

[/code]

 

 

MainWindowクラス(コードビハインド)

[code lang=""]

[/code]

 

 

独自クラス

[code lang=""]

[/code]

 

 

 

課題

 

 

 

まとめ

 

 

 

関連記事

 

 

 

参考