Cloverインターフェイス続き

前の記事ではCloverのショートカットとしての利用法を解説しましたが、この記事では大クローバー操作を解説します。

Cloverインターフェイスの機能２：大クローバー操作

クローバーを選択すると、画面左下のボタン上にクローバーが表示されます。これをタップしてください。選択していたクローバーがペンなら４つの葉を持った大きなクローバーが表示されるはずです。この大クローバーは葉の１つ１つがボタンになっていて、それぞれ別の機能が割り当てられています。通常のクローバーを利用している時と違い、大クローバーが表示されている状態ではキャンバスを普通にタッチしても描画はされません。（キャンバスの移動になりす）大クローバーが開いているモードでは描画は大クローバーのボタンを通して行います。通常の状態に戻したい場合はもう一度画面左下のクローバーをタップするか、大クローバーに「持つ」ボタンがあればそれを押します。

ここでちょっと、このクローバーインターフェイスを考案することになった経緯を説明させてください。スマホ上でのお絵かきツール（ペイントツール）はそのUIからPCとは違った問題を色々とはらんでいます。マウスカーソルやタッチペンと違い、指先で操作するため指が大きくて邪魔で、いま描いている内容が見えないとか、指だと正確な位置から描き始めるのが事実上不可能だとか、そういった問題です。

このうち指先が邪魔だという問題については、デバイス上で感知した指の位置と、実際に描画するペン先位置をズラす（右利き/左利きのオプション選択でズラす方向を変える必要はありますが）ことによって、比較的楽に解決できました。問題は後者の正確な位置から描き始められないという部分です。拡大すればむろん、ズレは無視できるほどの小ささになりますが、それだとペンを動かせる範囲が狭くなり（最初から細かなドット打ちが目的ならいいんですが）線描画したい場合にストレスになります。

色々悩んだ末に思いついたのが移動と描画の機能を分けることでした。ついでにモード切り替えやその他機能も割り振れるようにすることを考えるとボタンは３つ以上あった方がいい。間違いなく押せるボタンの大きさを考えると、４つが限界。形状からしてこれはクローバーだな、ということで今のCloverインターフェスにたどり着きました。

いまの思考から明らかなように、大クローバーには大まかに２つのカテゴリの機能があり、１つは移動と描画開始を分けて描画開始したい場所までカーソルを正確に移動してから描画開始する機能、もう１つは単なるタッチでは表現できないような特殊な描画オプションを実現する機能です。（こちらはツール種類によって変わります）

大クローバーの機能１：移動と描画を分ける機能

移動と描画を分ける機能は特に説明の必要はないでしょう。ただ、このアプリの特徴として、指を離す前にちょっと指を止めてから離すと、離した時に指がズレても、その止めていた場所に戻してくれる機能があります。正確な位置に合わせるのが楽になるはずなのでちょっと意識してみてください。これはスポイトや各種設定バー、カラー設定等でも有効です。

大クローバーの機能２：特殊描画オプション

特殊描画オプションは何の描画ツールのCloverかによって内容が変わりますので、それぞれについて解説します。

ペン・消しゴム・ぼかし・指先

これらは多くのペイントツールで独立したツールになっているので、それに倣いCloverPaintでも別ツールにしていますが、実はアプリの内部処理としてはほぼ同じものです。ただ色合成モードや不透明度合成モード等が違う（消しゴムの場合は色の不透明度が０固定）だけなので、Cloverも同じ内容になっています。これらに関しては大クローバーには特殊機能という程の機能はなく、「描点」というボタンを押すと、位置を変えずに正確に点を打ってくれるというだけです。

ライン

「線移動」いま描いている線の終点を移動できます。

「線追加」ひとつづきの折れ線を作れます。

描画中ならば「移動」で折れ線を切ります。

描画中に色や太さ、流量等を変えると、線に適用されます。

※ Cloverショートカットのさらなる応用技として、ラインの「設定」を開いて「その他パラメータの保存・設定」のチェックを外すことで、他のブラシの描画設定をこのラインに持ってくることができます。例えば指先を選択したあと、チェックを外したラインのCloverを選択すると、指先ブラシ機能を持ったラインツールが出来上がります。これは矩形・楕円等でも使えます。

矩形・楕円

ラインと同じく、描画中に色等を変えることができます。

「切替」枠線、塗り潰し、枠付の背景色での塗り潰し　の順に切り替えます。

ライン・矩形・楕円に関しては今後大幅な再実装が行われる予定です。その際に機能の変更がありますのであらかじめご了承ください。

バケツ

多くの既存ペイントツールに比べてもかなり高機能で特殊なバケツなので、まずCloverではなく通常の動作から解説します。「左下のボタン→設定…」で設定画面を開けます。

「境界判定モード」 色全体で判定するか、不透明度だけで判定するか、また、境界判定色の範囲を塗りつぶすのか、境界判定色以外の色を塗り潰して境界判定色で塗り潰しを止めるのかを選択

「境界判定ソース」 編集プレーンのみで判断するか、合成後の見えている色で判断するかを選択

「曖昧範囲」 元となる境界色の周囲どれくらいを境界色として含むようにするかを指定

「曖昧判定モード」 曖昧範囲の適用を数値の低い方、高い方、両方から選択 

「隣接判定」 このチェックを外すと連続した領域を考慮せず、画面全体の該当する色が塗りつぶされます

このバケツツールは、塗り潰しの前に一定範囲をなぞると、なぞった範囲にあった色域を境界判定色として取り込みます。何のことかよくわからないと思いますが、要するに赤・青・緑が混ざった絵があったとして、通常のバケツツールだと赤だけ、青だけを塗りつぶすことはできても赤と青をまとめて塗りつぶすことはできません。CloverPaintでは赤と青をなぞって指を離すと赤・青両方塗りつぶしてくれます。

さて、これだけならCloverを使う必要は特にないのですが（正確に境界色を取るという意味はありますが）「境界判定モード」の「境界判定色以外の色を塗りつぶす」の設定にしたときCloverが必須になります。なぜなら境界判定色はなぞった部分の色なのに、境界判定色で塗り潰しが止まるので、結局指でいくらなぞっても（隣接判定がONの場合）１ピクセルも塗りつぶせません。このモードを使う場合はCloverの「境界色」で境界色を取得し、「移動」で塗りつぶしを開始したい場所に移動して、「実行」を押せば期待通りに動作します。「クリア」はこれまで取得した「境界色」をリセットします。

以上でCloverインターフェイスの機能解説は終わりです。完全に理解しておく必要はありません。こういう機能があるんだなということだけを覚えておいて、必要になったら参照してください。