ClickableCanvasのその後2
IEで不具合のケースが目立つ
ClickableCanvasでしたが
FlashCanvasを使用することでグラデーション機能などを正常に表示できるようになりました。ただ、IE対策を
FlashCanvasや
uuCanvas.jsなど複数のライブラリから選択できるようにしたいので、
uuCanvas.jsで起こった不具合もできるかぎり修正する方向でいくつもりです。一方で
ExplorerCanvasは機能的に限界が見えるので非推奨になっていくと思います。
かなり大がかりなスクリプトの変更が5度ほどあり、その都度バージョンを変えています。現行バージョンは
0.6です。おそらく近日中に
0.7になります(笑)。
新たに実装した機能
・グラデーション(IEはFlashCanvas等使用で実現)
・テキスト表示(IEはFlashCanvas等使用で実現)
・一部のアニメーション機能(ただし、線形・多角形図形は未実装。IEはFlashCanvas等使用で実現)
または今後予定しているもの
・画像の描画
・楕円の描画
・線形図形のアニメーション
・テキスト表示の改善
・カラーフェード(これはもう少しで実装できそう)
アニメーションは当初、Canvasのメソッドtranslate(移動)、rotate(回転)、scale(拡縮)などを利用しようと思っていましたが、
クリッカブル範囲と連動するのが難しいため、これらのメソッドの利用を見合わせています。
描画する際に指定する座標や高さなどの情報を徐々に変えることでアニメーションぽい動きにできる上、クリッカブル範囲も連動するので、現在はもっぱらその方法でアニメーションを実現しています。
図形別で可能なアニメーションの種類
図形の移動: 長方形・角丸長方形・円・扇形図形
図形の拡大収縮: 長方形・角丸長方形・円・扇形図形
図形の回転: 扇形図形。かなり疑似的。テキストまで回転しない
⇒アニメーションのデモ
⇒カラーフェードのデモ(テストバージョン) -
JavaScript/Ajax Canvas, ClickableCanvas, HTML5, JavaScript, jQuery