[Glaeja] ♫Tell Your World

というわけで『Glaeja』の「多角形」レイヤーのチュートリアルです。

…フルサイズ版よりGoogleChromeのTVCM版のアレンジのほうが好みｗ

左図左が「多角形」レイヤー自体の設定、右上が［頂点群］［編集 ...］で現れる頂点選択画面、右下が各頂点の設定です。

「多角形」レイヤーの描画は、基本的には、「多角形」レイヤー設定の［開始点］から始まって、［頂点群］の各頂点を上のものから順に線で結び、１つの図形を形作るものです。

上記各種設定や［頂点群］に含まれる頂点の数によって、引かれる線や図形が異なったものとなります。

以下では、各種設定や［頂点群］に含まれる頂点の数によってどのような図形が描かれるか、を見ていくことにしましょう。

０．用語の説明

図形の頂点は、「多角形」レイヤー設定の［開始点］と［頂点群］の各頂点からなりますが、以降では全て「頂点」と呼ぶことにします。
「多角形」レイヤー設定の［開始点］は「０番目の頂点」、［頂点群］の各頂点は上から「１番目の頂点、２番目の頂点、…」、［頂点群］の最後の頂点を「終点」と呼ぶことにします。

［開始点］と［頂点群］の各頂点を足した頂点の数を「全頂点数」とします。つまり、［頂点群］に２つ頂点が含まれている場合には「全頂点数は３」となります。

全ての頂点の座標値は、ウィジェット左上を原点（0, 0）とする座標系で、その単位は［dp.］です。

１．線の太さと色の設定

これらは引かれる線の太さと描かれる図形の色を設定します（下図参照）。

上図は「［端点の形状］が四角、［角を丸める］オフ」の場合です。この場合、端点でない頂点が鋭角であると、上図のように鋭く尖ります（"miter"という）。この尖り具合はなす角が鋭角になればなるほど大きくなり、ウィジェット描画領域を超えることすらあります（下図左）。この尖り具合を設定する項目はありませんので、［角を丸める］オプションをオンにするか、下図右のように頂点を増やして対応してください。

「［端点の形状］が丸、［角を丸める］オン」だと以下のようになります。

このとき、図形の頂点において、外側は丸くなるが内側は丸くならないことに注意してください。

ver. 2.9.2 から、［端点の形状］というオプションが追加されました。これにより、多角形外枠線の「折れ曲がり点」と「端点」が厳密に区別されるようになりました。

下図に「［端点の形状］が四角、［角を丸める］オン」と「［端点の形状］が切り落とし、［角を丸める］オン」の２つを示します。

［角を丸める］は外枠線の「折れ曲がり点」にのみ作用し、線の両端点は［端点の形状］によって制御されます。

［端点の形状］に［切り落とし］を選ぶと、［丸］［四角］の場合と異なり、開始点・終了点からはみ出さずに線が描かれます。

この［端点の形状］の性質は、［線種］を破線にした場合に特に重要となります。
破線の線部は、その全てが開始点・終了点として扱われるため、［端点の形状］に［丸］［四角］を選んだ場合、間隙部分にまで線がはみ出し、結果として間隙が短く描画されることになります（下図参照）。

［塗りの色］は、［頂点群］の頂点数が２つ以上の場合にのみ彩色されます。

２．頂点数と描かれる図形

描かれる図形は頂点数によって異なります。

・頂点数が１つの場合（［開始点］のみで［頂点群］がゼロ）

この場合、［開始点］に［線の色］で指定した色で、一辺が［線の太さ］となる正方形を描画します。
※ ［角を丸める］オプションがオンであっても正方形が描画されます。これは今後のバージョンアップで円の描画に改められる予定です。


・頂点数が２つの場合（［開始点］と［頂点群］に１つだけ頂点を含む）

この場合、［開始点］から［頂点群］の頂点へ１本の直線が引かれます。［頂点群］の［頂点のタイプ］が「Bスプライン制御点」であっても無視されます。

［端点の形状］が四角の場合、下図真ん中のように長方形が傾いたような直線が描かれます。

・頂点数が３つ以上の場合

この場合、０番目の頂点－１番目の頂点ー２番目の頂点ー … ー終点と順に直線（もしくは曲線）で結ばれます。

［自動で閉じる］オプションがオンになっていると、終点ー開始点へ線が描かれます。ただし、終点の［頂点のタイプ］設定によりその描画の挙動が異なります（下図参照）。

• ［自動で閉じる］がオフで、終点が［Bスプライン制御点］なら、図形の「塗り」の形は「終点の1つ前の頂点から開始点へ向けてBスプライン曲線で閉じた」形になるが、その最後の曲線は描画されない


• ［自動で閉じる］がオンで、終点が［Bスプライン制御点］なら、図形の「塗り」の形は「終点の1つ前の頂点から開始点へ向けてBスプライン曲線で閉じた」形になり、その最後の曲線も描画される

また、［角を丸める］オプションがオフの場合、描かれる図形の途中の頂点は、その角が正しく尖りますが、終点ー開始点の閉じた部分が下図左のように正しく尖りません（［自動で閉じる］のオン・オフどちらでも起こる）。これは（Android側の）仕様ですので、他頂点と同様に尖らせたい場合には、開始点が、図形の頂点ではない、辺の半ばから始まるように設定してください（下図右）。

描かれる図形が下図のように内側に巻き込むようになっていた場合の「塗り」領域は、下図左のように巻き込んだ部分が塗りつぶされない（"Even-Odd"タイプという）のではなく、下図右のように図形の外形をなす線の内側全てが塗りつぶされます（"Winding"タイプという）。

※ これはver.2.1.1での仕様です。将来的には変更されるか設定可能になる可能性があります。


３．Bスプライン曲線

ここでは「多角形」レイヤーで曲線を描かせるために用いられる「Bスプライン曲線」について簡単に解説します。
「Bスプライン曲線」は、いくつかの制御点を基に端点を結ぶよう定義された曲線で、TrueTypeフォントの形状記述にも用いられているものです。
『Glaeja』では、２つの端点につき１つの制御点を持つ「２次-Bスプライン曲線」が用いられており、その定義式は端点をP₁(x₁, y₁)、P₂(x₂, y₂)、制御点をC(x_c, y_c)とし、媒介変数を t (0 <= t <= 1)とすると、以下のようになります。

• x = (1-t)²x₁ + 2t(1-t)x_c + t²x₂
• y = (1-t)²y₁ + 2t(1-t)y_c + t²y₂

…ま、数式なんざ虚仮脅しですｗ　上記式で定義される「２次-Bスプライン曲線」の描かれ方を幾何的に見てみましょう。

１．下図のように端点P₁(x₁, y₁)、P₂(x₂, y₂)と、制御点C(x_c, y_c)があるとします。補助線としてP₁CとP₂Cの２本を引きます。

２．補助線P₁CとP₂Cの中点を点Q₁、Q₂とし、線分Q₁Q₂の中点を点P₃とする。求める「２次-Bスプライン曲線」は、この点P₃を通るので点を描画する。

３．線分P₁Q₁の中点を点Q₃、線分Q₁P₃の中点を点Q₄とし、線分Q₃Q₄の中点を点P₄とする。求める「２次-Bスプライン曲線」は、この点P₄を通るので点を描画する。

４．同様に、線分P₂Q₂の中点を点Q₅、線分Q₂P₃の中点を点Q₆とし、線分Q₅Q₆の中点を点P₆とする。求める「２次-Bスプライン曲線」は、この点P₆を通るので点を描画する。

５．３．４．と同様の操作を点がつながり滑らかな曲線となるまで繰り返したものが、端点P₁・P₂と制御点Cで定義される「２次-Bスプライン曲線」となります。

上記手順３．で描かれた点P₃が、このBスプライン曲線の通る曲線のうちで、端点から最も遠い（制御点に最も近い）点となります。

ではもうちょっと現実的な欲求として、「３つの点P₁・P₂・P₃を通るBスプライン曲線の制御点Cの座標値(x_c, y_c)」を求めるにはどうすればイイのでしょうか？これは簡単で、上記手順の２．の逆の作図をすればイイだけですね。

つまり下図のように、点P₁・P₂を繋ぐ線分P₁P₂の中点を点Q₁とし、点Q₁から点P₃を通る直線を引き、その直線上で点Q₁からの長さが線分Q₁P₃の倍の長さとなる点が制御点Cとなります。

ただ、［端点P₁ → 端点P₂ → 端点P₃］のなす角があまりに鋭角な場合、パッと見た目の「端点から最も遠い点」が端点Pと一致しないことがままありますので注意が必要です（下記４．の一番下の図のような場合）。


４．「多角形」レイヤーにおけるBスプライン曲線

上記３．でBスプライン曲線についてはわかったかと思います。ここでは、『Glaeja』の「多角形」レイヤーに実装されたBスプライン曲線の特徴について記します。

TrueTypeなどで使用されているBスプライン曲線では、その曲線形状を端点と制御点で記述する際に、端点が暗黙的に決定される場合には端点を省略することができる、という仕様があります。つまり「端点と制御点を繋ぎ順の並べた場合、制御点が連続することが許される」ということです。

…どういう意味だってばよｗｗｗ　図で示すと以下のような感じですかね。

［端点P₁ → 制御点C₁ → 制御点C₂ → 端点P₂］と並んでいる場合、制御点C₁・C₂の中点に暗黙的に端点Qが置かれ、「P₁ - C₁ - Q」と「Q - C₂ - P₂」という２本のBスプライン曲線が描画される、ということです。（数学的には違うのですが）ちょっと３次のベジェ曲線っぽい記述が可能になるわけですね。

このような「連続した制御点」というのは、処理の都合上『Glaeja』 の「多角形」レイヤーでは許されていません。ですが、「多角形」レイヤーの［頂点群］に含まれる各頂点は、その［頂点のタイプ］を自由に［Bスプライン制御点］に変更することが可能です。そのため、許されていないにもかかわらず「制御点が連続する」という状態にすることができてしまいます。

では、「多角形」レイヤーにおいて「制御点が連続する」ように［頂点群］を設定するとどうなるのでしょう？

それは、「連続した制御点のうち、偶数番目のものは強制的に端点として処理・描画される」ことになります。

「多角形」レイヤーで［端点P₁ → 制御点C₁ → 制御点C₂ → 制御点C₃ → 端点P₂］と制御点を３つ連続させた場合、偶数である２番目の制御点C₂が強制的に端点として扱われ、上図のような曲線が描かれます。

「多角形」レイヤーでは上図のような場合以外に、「制御点が連続したまま［頂点群］が終わる（つまり最後の頂点が制御点）」だとか、「さらにその連続した制御点が奇数個だった（つまり最後に端点を強いるべき頂点がない）」とか、かなりトリッキーなシチュエーションが考えられます。これらの場合にどのように描画されるかいちいち書きません。興味のある方は是非とも実験してみてください。強制終了はしませんからご安心をｗ


５．最後に

とりあえず、ここまでで「多角形」レイヤーの解説はお終いです。チュートリアルの最後は、大抵の場合、何か作例を出すんですが、「多角形」レイヤーはぶっちゃけただのお絵描き道具ですので、凝った作例が作りにくいんですよね。

…凝ろうと思えば、「ウィジェット変数と組み合わせて過去何時間かのバッテリー残量をグラフ表示」とかもできるんですけどねｗ

そこまでやるのは大変ですので、簡単に「みんな大好きな『角丸（英語でいうと"Rounded Rectangle"）』の作り方」を書いて終わりにしたいと思います。

１．まずは下絵となる長方形を「多角形」で描きます。ここでは下図のような[(20, 20), (140, 20), (140, 80), (20, 80)]の長方形を描きました。これの４つの頂点を半径20で丸くしてみましょう。

２．この「多角形」レイヤーを複製し、そちらを使って角丸にしていきましょう。
まず、開始点が下絵では長方形の頂点になっていましたが、これを辺の半ばあたりの点に変更します。これは「開始点は必ず端点になる」ので、丸めるところにいないほうが都合がいいからです。

下図のように、開始点を(80, 20)に変更し、［頂点群］に新しい終点(20, 20)を追加します。

３．では右上の角から丸めていきましょう。半径20なので、下図のように丸めた部分の端点となる頂点を２つ(120, 20)、(140, 40)として追加します。

４．そして、もともとの長方形の頂点だった点(140, 20)の［頂点のタイプ］を［Bスプライン制御点］に変更します。すると下図のようにキレイに角が丸くなります。

５．あとは残りの頂点を同様に処理していけばOKです。下図に右下・左下を処理したものを示します。

６．左上は終点ですが、気にせず同じように端点を２つ(20, 40)、(40, 20)と追加をします。２つ目の(40, 20)が新しい終点になります。

６．最後に［自動で閉じる］をオンにすれば完成です。

あとは下絵を削除して、中を塗りつぶすなり、透過させるなり、コロ助なりして楽しんでください。

---

以上です。