【作成中】お絵描きアプリ、作ってる途中で変な機能が

　どうも！LSSです！！

の「線の引き方」を根本的に見直そうとしていたところ、「完成版には入れるつもりはないけどちょっと面白い機能」がたまたま出来てしまいましたｗ

闇に葬る前に、ちょっと他の人にも見てもらいたくて、晒してみます^^

お絵描きアプリ劣化版

線を引く

塗りつぶす

描画時に都度消去

パスを閉じる

まず「劣化版」としているのは、すでに作っていた「画像保存」「サイズ変更」「筆圧による太さ変更」などが実装されていない状態だからです。

キャンバス（グレーの格子模様の枠）上で、マウスドラッグか指やペンで自由に線を引く事ができます。

キャンバスの下に「線を引く」「塗りつぶす」「描画時に都度消去」「パスを閉じる」の４つのチェックボックスがあります。

最初は「線を引く」「描画時に都度消去」だけチェックが入った状態ですが、「塗りつぶす」や「パスを閉じる」にもチェックをいれると、引いた線に応じてピンク色の塗りが入ったり、引いてる途中でも引き始めと今のカーソル（タッチ）位置が結ばれたりします。

「線を引く」「パスを閉じる」にチェックが入った状態で、「描画時に都度消去」のチェックを外して、キャンバスに線を引いてみてください。

…線の引き始めの位置を中心に、たくさんの線がマウス・指を動かした位置との間に描画されますねｗ（これはこれで味があります）

「塗りつぶす」にチェックを入れて色々動かしてみると、これもまた表裏があるような画像になります。

前２作のお絵描きアプリの線の引き方が「マウスを動かすたびに、前回位置から今回位置までの線を追加」するというものでした。

それによって、特にiPhoneで細い線を引いた時などに、移動を検知したタイミングで前の線と新たな線が交差する事になり、節目のあるような線になっていたんですね。

そこで「都度、線を引く・引き終わる、を繰り返す」のではなく、
「マウスの移動ごとに位置を配列に記録し、移動中は『線の引き始めの位置から現在位置まで、これまでの経由位置を通る一本の線として引き直す』」
という仕様に変更する事にしました。

その後「塗りつぶす」機能と「パスを閉じる」機能を選択的に追加できるようにしよう！と思い、試してみると…「パスを閉じる」機能によって移動ごとにたくさんの線が生まれる事になったんですねｗ

その対策としては「線を引き始めた時点でのキャンバスの状態を一時的に変数に保存しておき、移動が発生した時点で『画面消去』『一時保存した画像を読み込み』を行ってから、『線の引き直し』を行う」とする事で解決できました。

その『画面消去』『一時保存した画像を読み込み』をオフにすると、やっぱり面白い線が出てくる事になるので…最終的にはマトモに線が引ける事を優先する事にはなりますが、ちょっと面白かったのでこの段階で晒してしまいました、というのが今回の記事となります。

ってなとこで、今回はこのへんで！

次回もまた、よろしくお願いします^^