http://zk-phi.github.io/MEGAMOJI
新しいアイデアや新しいクソアニメを実装したらぜひ PR ください。
filter_ から始まる関数群は、「ファイルから選ぶ」で画像を読み込む際、
画像に対して行う前処理の実装です。
引数に img タグのオブジェクトが渡ってくるので、適宜処理をして、
BlobURL を返してください。
effect_ から始まる関数群は、「アニメ（組み合わせ可）」で選ぶことので
きる特殊効果の実装です。
以下の５引数を受けます:
keyframe- アニメーションの進行具合 (0.0 ~ 1.0 の浮動小数)
ctx- CanvasRenderingContext2D のオブジェクト
cellWidth- canvas の横幅
cellHeight- canvas の高さ
background- ユーザーの設定した背景色 (hex 表記)
ctx に対して transform や filter など好みの操作を行なってくださ
い。
渡ってくる canvas は、最終的に絵文字としてレンダーされるものの４倍
（縦横それぞれ２倍）の大きさになっていることに注意してください。
+--------+
| | <- cellHeight / 4 の余白
| +----+ |
| | | | <- cellHeight / 2
| | | | 最終的に絵文字に使われる部分
| +----+ |
| | <- cellHeight / 4 の余白
+--------+
びよんびよん などの拡大縮小 (特に縮小) や回転を伴うエフェクトを組み
合わせると、本来絵文字として使われる部分の外の、余白部分までチラ見えし
てしまうことがあります。このような場合でもアニメーションを綺麗に見せる
ため、内部的には実際に絵文字に使われる範囲より外の範囲までレンダリング
しています。
余白をトリミングする前の canvas の様子が見たい場合は、「整形方法を選ぶ」 の「その他」にある「余白を切らない」を有効にしてください。
わかりづらい仕様なので、なんとかしたい気持ちはありますが、上手い方法が 思いついていないです。
animation_ から始まる関数群は「アニメ（組み合わせ不可）」で選ぶこと
のできる特殊効果の実装です。
以下の９引数を受けます:
keyframe- (
effect_と同様) ctx- (
effect_と同様) image- アニメーションさせたい元画像
offsetH- 元画像の描画したい範囲（左端）
offsetV- 元画像の描画したい範囲（上端）
width- 元画像の描画したい範囲 (幅)
height- 元画像の描画したい範囲 (高さ)
cellWidth- (
effect_と同様) cellHeight- (
effect_と同様)
effect_ 関数群に比べて、元画像に関する引数が増えています。
animation_ 関数群は、渡ってきた canvas に対して、 ctx.drawImage な
どを使って実際に画像 image をレンダリングします。この際、ユーザーの
指定したトリミング範囲が offsetH, offsetV, width, height として渡っ
てくるので、これを尊重するようにしてください。
effect_ 関数群と比べると、レンダリング方法を自由に実装できる点で自由
度が高いです（２つ重ねてレンダリングしたり）。ただし組み合わせることは
できないので、 canvas に対する変形だけで実装できるようなアニメーション
はなるべく effect_ として実装してください。
animation_ 関数群に渡される canvas も effect_ と同様、実際に絵文字
として出力されるものの４倍の大きさを持っています。余白をトリミングする
前の canvas の様子が見たい場合は、「整形方法を選ぶ」の「その他」にある
「余白を切らない」を有効にしてください。