Image Editor

2024年4月24日更新
これ迄、幾つかのソフトを併用して行なって来た画像の加工を、
ひとつのソフトで済ませられないものかと思い作り始めました。


ソフトを併用せざるを得なかった理由はレタッチ系のソフトには、
アイコン関連と微妙な傾きの補正機能が無かったからです。

プロデルを使い始めてから半年程で開発を始め、
途中、2度の中断を経て漸く使えるレベルの物ができました。
今思えば随分と回り道をしてしまいました。
その様な経験から画像編集ソフトを作ろうと考えている方の為に、
何かの参考になればと今だからこそ分かる事を、
反省を込めて記しておきます。
[ 01 盛り込む機能は最初に決めておく ]
最初の中断は知識が十分でなかったので3年のブランクは仕方が有りませんが、
2度目の中断は行き当たりばったりの杜撰な計画が災いしました。
履歴機能とレイヤ機能が密接に関係している事を早期に気付くべきでした。
この事が原因で半年も中断する破目になりました。
レイヤ機能を盛り込みたいなら最初からそれを意識して取り掛かる。
そうしないと履歴機能に費やした時間と労力が無駄になります。
[ 02 形から入ったって構わない ]
本来、「形から入る」は良い意味では使われませんが、
プログラミングの場合には寧ろ積極的に行うべきです。
ビジュアルプログラミングとかイベントドリブン方式とかにより、
必要なコントロールを配置する事でプログラムの構造が具体化します。
[ 03 ピクチャーボックスにするかキャンバスかそれが問題だ ]
何はともあれ画像をウィンドウに表示させなければ始まらないので、
先ずは画像ビュアを作るところから始めます。
画像を表示する為にはピクチャーボックスかキャンバスが必要です。
※詳細は こちら を参照。

私は大した考えも無くキャンバスにしましたが正解だったようです。
[ 04 保存できなければ意味が無い ]
どれだけ編集機能を持たせたところで保存できなければ意味が有りません。
ビュアから進展させる為の第一歩は保存機能を付ける事です。
昔はGDI+とかを使って様々なフォーマットに保存していましたが、
今は.NETのお蔭で始めから色々なフォーマットでの保存が可能です。
※詳細は こちら を参照。
[ 05 矩形選択の実装は意外と難しい ]
VB6.0の頃はWin32APIにバウンディングボックスとかいう名前の機能が有って、
この様な目的の為に使う事ができたように記憶しています。
プロデルではどうなのか分からないので図形描画の矩形を使いました。
※詳細は こちら を参照。

紫色では視認性が今一だったので後に黒白の破線に変更しています。
[ 06 移動したら隠れていた物が見えてきた ]
良く有るウィンドウ内で画像を移動する機能を付けようと思いました。
実装して実際に使ってみたら下から黒とか白の地色が出て来ました。
黒か白かは画像のフォーマットで違うようでした。
画像を部分的に削除した場合に下から何が現れるのが自然なのか。
この時までは全く考えていませんでした。
PingやGifの様に透明色をサポートしているフォーマットでは、
画像をカットしたら透明にする必要が有るという事です。
※詳細は こちら を参照。
[ 07 拡大鏡を使ったら色が拾えなくなった ]
此方も良く有る画面から色を拾うスポイト機能を追加しました。
画像が小さいものは問題無く機能しましたが、
大きな画像の場合は明らかに画面とは異なる色を取得していました。
ズームしているので倍率で補正する処迄は直ぐに思い付きましたが、
そんな単純な話ではなくピクセル単位で正確に拾えなければ意味が無い事でした。
※詳細は こちら を参照。
[ 08 鉛筆とバケツ機能に着手してみた ]
目標はお絵かきソフトでは無くフォトレタッチソフトなので、
お絵かき系の機能は本来必要無いのですが、
基本的な鉛筆とバケツ機能の追加に着手しました。
7でも薄々気付いていましたがキャンバスでお絵描きはできません。
お絵描き系の機能はピクセル単位に行なう物なのでキャンバスではなく、
ピクチャーボックスを使うのだと気づきました。
ピクチャーボックスとキャンバスの違いも分からずに始めてしまいましたが、
ざっくりと分けるならキャンバスはベクタ画像を扱う時に使うもののようです。
キャンバス上には色が塗れないと分かり3年にも渡る中断となりました。
※詳細は こちら を参照。
[ 09 強い思いだけで開発を再開 ]
3年のブランクで何か進展が有ったのかと言えば何も無かったです。
強いて言うならピクチャーボックスとキャンバスの違いの理解が少しだけ深まり、
混乱を収める事ができた事です。
勿論、問題を回避する方法は色々と試しましたがどれも煩雑でした。
経験上こういう方法は正解でない事が多いので採用しませんでした。
仕方が無いので取り合えずお絵かき系の機能を封印して再開しました。
さて、しょうもない制作話はまだ続きますが、
恥ずかしながらここ迄のソースを公開します。
ご自由にお使いください。
※ダウンロードは こちら から。
[ 10 履歴機能を追加してみた ]
再開して真っ先に取り掛かったのは念願の履歴機能でした。
サムネイル付きのリストで分かり易くできたので上々の滑り出しでした。
リストには行なった操作名を表示して結果に影響しない操作は無視しました。
リストビューを配置するだけで意外と簡単にできてしまった履歴機能ですが、
レイヤ機能の実装を開始するまでの短い満足感で終わりました。
※詳細は こちら を参照。
[ 11 印刷機能を実装してみた ]
「〜を印刷する」なんて簡単なコードだけで済む話では無く、
プリンタや用紙サイズの指定や印刷部数の指定を始め、
必要であればプリンタドライバの設定ダイアログを呼び出して、
更に詳細な設定が必要になります。
※詳細は こちら を参照。
[ 12 アイコン書出し機能を追加してみた ]
これも是非とも盛り込みたい機能のひとつでした。
一般的な画像編集ソフトにこの機能が無いのは、
その画像サイズが極端に小さいピクセルドットの世界なので、
扱う対象として馴染みにくい事が関係しているのかも知れません。
※詳細は こちら を参照。
[ 13 新規作成機能を軽視していた ]
新規作成機能とは真っ新な画像を指定の大きさで作成する機能です。
調べたのですがその様な機能は発見できませんでした。
そこで種画像を用意してリサイズして作る方法を採りました。
※詳細は こちら を参照。
[ 14 キャンバスサイズの変更を実装した ]
この機能と解像度(ピクセル値変更)の機能は密接に関係しているので、
UIは共用で作り機能の呼び出しに応じて形態を変えて表示しています。
レタッチソフトには必ず備わっているので欠かせないアイテムです。
初めて使う時から迷わずに操作できる事が理想なので、
UIはできるだけ既存のレタッチソフトに合わせるようにしています。


※詳細は こちら を参照。
[ 15 角度指定回転機能を追加してみた ]
これは既に「スコヤ」で使った手法です。
数値入力による回転の他に実測で傾きを補正できます。
UIに関しては改善の余地が有りますが目的は達成できました。
※詳細は こちら を参照。
[ 16 文字乗せは品質に拘ると簡単では無かった ]
画像への「文字乗せ」機能の基本はデータ上での合成です。
プロデルからはドットネット型を使用する事で可能ですが、
習得できていないので可能な方法で取り掛かりました。
キャプチャ方式画像の合成機能キャンバスの機能と試し、
Powershellで代替で動作確認して ようやくドットネット型にできました。
[ 17 一筋縄では行かないレイヤ機能の実装 ]
何か困った事が有ったらネットが頼りになるのですが、
レイヤ機能を実現する方法に関しては全くヒットしませんでした。
それどころかフォトレタッチソフトの作り方やサンプルコード等も有りません。
最初の一歩が踏み出せずに暫くは足踏み状態でしたが、
偶然、プロデルのマニュアルに気になる項目を発見しました。
キャンバスにはページというものが存在するようです。
漸く暗闇に一筋の光明を見出す事ができました。
[ 18 掴み処が無いキャンバスのページ ]
ページを使ってレイヤを実現できるかも知れないと気を良くしたのも束の間、
ページは他の部品と同じようには使えない事が分かりました。
レイヤとしてはそれを追加したり非表示にしたり削除もしますが、
ページにはそのような他のコントロールと同じ事はできませんでした。
ページは作成したり追加したりするものではなく指定して使うもののようです。
[ 19 漸くレイヤ擬きが完成した ]
試行錯誤を繰り返し、検証を重ねて漸くレイヤらしい物ができました。
これで良いのか自信が無かったので当時はレイヤ擬きと呼んでいましたが、
今ではこれが正解なのだと確信できるようになりました。
レイヤの正体はキャンバスのページです。
[ 20 レイヤに対応した履歴機能を新たに設計 ]
レイヤ機能の実装で完成していた履歴機能は使えなくなりました。
新たにレイヤ情報の履歴も保存しなければならなくなったからです。
レイヤ情報の一次保存先は割と簡単にレイヤのタグに決まりました。
全てのレイヤのレイヤ情報を記録させる為に配列を使う事にしました。
履歴はその配列という事で二次保存先は多重配列で決まりました。