2014年04月13日

「ペン色パレット-HEXタイプ」シールを作った。

久々にシールを作りました。
と言いますか、以前に作っていた物を大幅に作り直した物というのが正しいのですが。

ペンの色を変える為のパレットを、六角形を並べた形で表示した物です。
以前作りかけていたのは円形のグラデーションでした。
一色当たりを大きく表示した方が選びやすいかと思います。

Skylabに掲載しました。(ここ

Screenshot_2014-04-13-02-23-08.png

なぜ六角形にしたかというと、たまに見かけて格好良いと思っていたからです。単に。


でもこの六角形を並べるのに苦労しました。
六角形単体の描画はほとんどネットの記載を参考にしてますし、並べる時の座標の計算式はほとんど試行錯誤で見ながら決めていった物です。
座標の小数点以下の端数のせいで、はみ出した所にまで六角形を表示したりと色々つっかえました。

また、各六角形の色はhsvを用いて算出していますが、この部分はenchantMOONの中に入っていたcolor.enchant.jsを参考にしました。
例によって、この辺りの計算式はちゃんと理解していません。

きっちり数学的に考えるのは苦手です。


デバッグは、最初PCのブラウザ上に表示していって、最後にenchantMOONの部分を追加していった形です。

と、ここで問題が。
当初塗りつぶしのfill命令で組んでいたのですが、enchantMOONはfill命令には対応していず。
急遽線描画のstroke命令に置き換える事に。
ペンを太くして六角形を埋めるという力業で対応しました。
適切な六角形のサイズやペンの太さは、例によってトライ・アンド・エラーで見付けていきました。
結果的にうまくいったので良かったです。
この絡みもあって、パレットの大きさを変えるとレイアウトが崩れてうまく六角形は並んでくれません。

かなーりいい加減に作っていきましたが、まぁ、仕上がりには満足です。

一点、最初に現在のペン色を取得して選択枠に表示したかったのですが、この取得がうまくいきませんでした。
ちょっと力尽きて原因追及はならず。
今後のバージョンアップで対応出来たら良いのですが。
posted by いなばー at 23:56 | Comment(0) | enchantMOON
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: