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