jQuery ClickableCanvas バージョン2 テストページ1
Clickable Canvasバージョン デモページ
Clickable Canvas.js(ベータ版ver 2.1 54KB)
Clickable Canvas.js(データ圧縮版)(ベータ版ver 2.1 29KB)
スクリプトの利用規約はこちらのページです。
ver 2.1の追加メソッド・プロパティ
useRAF・・・・・・プラグイン呼び出し時のオプション。RequestAnimationFrameを有効にするかどうか指定。デフォルトでは無効。useRAFにtrueにすると、描画がRequestAnimationFrameメソッドを介して行われるようになる。その際FPSは60に固定される。
delay・・・・・・animateShapeメソッドのオプション。アニメーション開始時間を遅らせる。単位はミリ秒。
setPropertyまたはsetPropertyValue・・・・・・図形のプロパティを上書きする。第1引数に図形名、第2引数にプロパティ名(zindex、image、onClickなど)、第3引数に代入する値を指定する。
getPropertyまたはgetPropertyValue・・・・・・図形のプロパティを取得する。第1引数に図形名、第2引数に取得するプロパティ名を指定。また、プロパティがimageやstyleなどのオブジェクトの場合、第3引数にさらに内訳のプロパティ名(xやy、strokeStyleなど)を指定して取得できる。
setCallback・・・・・・Canvas要素ごとに特定のコールバック関数を指定する。現在指定できるのはonUpdateのみ。onUpdateにコールバックを指定すると、各描画フレームごとにコールバックが呼び出され処理を行う。
showShape・・・・・・図形を表示状態する。第1引数に図形名を指定する。
hideShape・・・・・・図形を非表示にする。第1引数に図形名を指定する。
FlashCanvas Pro使用 ClickableCanvas.js ver 2.1
デモ1
デモ2
動作確認: Firefox12.0 Chrome19.0 beta IE9
テスト用スクリプト入力フォーム
こちらのフォームに直接コードを書いてテストを行うことができます。ためしに実行ボタンを押してみましょう。
サンプルのコード詳細