ブログ

ひすとりー・おぶ・お絵描きつーる（何）


初期段階。

初期段階での操作説明のコピペ。いわえる基本操作。

現状クリックするだけでは何も描けません。
（後々別の機能を実装する予定←最新版でもまだ未実装）

半角入力状態で「b」キーを押しっぱなしにすると、赤いポインタが出ます。
ポインタが出た状態で適当な場所をドラッグすると、直線が引けます。
「b」キーを離すと、直線を描くモードから抜けます。

引いた直線にカーソルを合わせると、線が黄色くなると同時に、
点が３つ（１つ重なっているので実際には４つ）表示されます。
（次のバージョンでは線の上で「o」キーを押さない限り２つ）
この点にカーソルを合わせると、点が黄色くなります。
線が黄色い状態でドラッグすると、線の移動ができます。
点が黄色い状態でドラッグすると、点の移動ができます。

点には２種類あります。
線の両端（中塗りの丸）と、ベジェ曲線のコントロールポイント（円）です。
（次のバージョンの「o」キーで表示されるのはコントロールポイント）
コントロールポイントを移動させると、線が曲がります。

ちなみに、２本以上の線が重なった部分にカーソルを持ってくると、
１本は黄色、他は青くなります。
この状態で「←」キーか「→」キーを入力すると、
黄色の状態の線が変わり、カーソルを動かさずに違う線を選択できます。
重なった点などを移動させたい時には便利です。

-----------------------------------------------

次のバージョン。

この時追加した機能一覧。
・「s」キーでコントロールポイントまでの線を表示／非表示にする。
・線を選択した状態で、「d」キーを入力すると、線を削除できる。
・２本の線でお互いの端の点と端の点を重ね、２本とも選択（片方が黄色、片方が青）の状態で「j」キーを入力すると、１本の線にすることができる。
・１本の線の端の点と端の点を重ねた状態で「j」キーを入力すると、ループ（円）にすることができる。

※これをアップした際に書いてなかった機能（ただの書き忘れ）
・「o」キーでコントロールポイントの使用／未使用を切り替えられる。

---------------------------------------------

最新版。
動作はほとんど変わらない。まあ全く変わってないわけでもない。

加わった機能
shiftキーを押しっぱなしで線の上にカーソルを持って行くと、点線の枠が表示された状態で選択ができる。
このとき、他の線の上にもカーソルを持って行くと、その線も選択できる。
選択後、ドラッグすると選択した線すべてを移動できる。
（尚、後々この状態で拡大縮小や回転ができるようにする予定）

---------------------------------------------

実際にやった地味な仕様変更。

・選択された際の表示順によっては点の上に線が表示されたりしていたので、変更。
・「j」キーによって結合した際、コントロールポイント未使用（直線）であっても使用状態に強制的に切り替わっていた部分を、切り替わらないようにした（コントロールポイントがなければ、ないまま結合）。
・カーソルに対して操作している場所がズレやすかったので改良。
・点と線のデータと編集機能の分離（描画を行う機能を点や線のクラスから編集機能を行うクラスへ。選択されているかどうかの判定結果を点や線のクラスに保存せず、編集機能を行うクラスで保存。などなど）
・メンバ変数からpublicを掃除。片っ端からgetter、setterを作成。
・処理速度をあげるためにいろいろ工夫（頻繁に使用する配列の中身はローカル変数に一時保存。lengthの参照回数を減らすため、for分はi = 0からのインクリメントではなくi = length - 1からのデクリメントへ。同じような式の評価はなるべく減らす。などなど）

---------------------------------------------

今後の予定。

その１
・各点に対してコントロールポイントの使用／未使用を変更できるようにする（フォトショやイラレ風にコントロールポイントを生成、削除）
・選択したコントロールポイントに対応する点に対して、反対側にあるコントロールポイントも同時に動かせる機能を実装する（フォトショやイラレ風にコントロールポイントを移動、角張らない曲線を書く時には便利）
・拡大縮小、回転の実装。

その２
・人に優しくないので、いい加減ツールパレットを作る（ツールが選択されれば、対応するキーが押されっぱなしになっている状態と同じ挙動にしようかと）
・ただし、正直オレ自身がアンチツールパレット派なので（邪魔じゃボケ状態）、基本非表示になると思われる（パレット自体がキーを入力しないと表示されない、とか）

その３
・線の太さ、線の色の変更機能を実装。
・塗りつぶし機能実装。
この際必要になるカラーパレットをどうするかが問題。
それ以上に、塗りつぶしの範囲をどうやればうまく実装できるのかが問題。
ループの線ならまだしも、異なる線が重なったときが大問題。
ライブペイント風で処理をすると、最終目標のアニメーション設定の時に困るのは目に見えてる。
線に囲まれた空白にIDでも持たせてしまおうか。囲まれてるかどうかの判定方法は先輩から伝授済みだし。
しかし、空白に新しく塗りつぶし用パスが必要なのは変わらない気が。
どの道、線と線の交点の座標を算出しないとツライ。
まあ頑張ろう。

その４
・レイヤー概念実装。
・レイヤー表示／非表示実装。
・レイヤー順序変更機能実装。
・レイヤーパレット実装。
塗りつぶしができるようになると、どうしてもレイヤーが欲しくなる。
ということで、このあたりでレイヤー概念を実装。
となると、レイヤーの表示／非表示も順序変更も必要になる。
こうなってくるとレイヤーパレットないとツライ。
そして当然の如く、キーを入力しないと表示されないようにしちゃるねん。
またもや邪魔じゃボケ状態。

その５
・リドゥ／アンドゥ実装。
・場合によっては一次保存機能も実装？（ファイルとして保存するのではなく、あくまで一時的に保存）
あまりアンドゥできる回数を増やすとメモリがバカにならないから、むしろ操作者からキリのいいところでアンドゥしそうな場所を指定しておいてくれると助かるよね、的な。
まあ正直、ファイル保存機能さえ実装できれば不要かも。

その６
・カンバスサイズ設定機能実装。
・ズームイン／ズームアウト実装。
後々の実装予定その７での前段階として。
正直、プログラムで使う際にはカンバスサイズなんてどうでもいい。
必要なのは点のある座標だから。
まあどちらにせよ、ズーム機能は欲しい。

その７
・下書き用ファイルの読み込み機能実装。
・読み込んだ後の画像の編集機能少々。
何もない状態でいきなり書くのが大変なのはよくある話。
でもさすがにイラレのライブトレース機能を実装できる自信は無い（爆）
そこで、せめて下書きを背景に表示しようかと。
これをするためにズーム機能をつけるわけで。

その８
・鉛筆ツール実装？
ここに来て、今更の鉛筆ツール。しかし、ただの鉛筆ツールではない。
というのも、あくまでベジェ曲線として保存／管理をするのが基本概念としてあるから、ベジェ曲線に変換してやろう、という目論み。
となると変換作業がかなり大変。実装できるか怪しい。
無くても死なないから、放置でアニメーションの実装に走る可能性大。

そのピーーーー
・How to play（play？）
アニメーションも作れるようになってからの話。
操作方法について一通り説明をするモードがあるとなおよし。
とりあえず棒人間を動かすまでの一通りの流れとかできればいいんじゃない？