jQuery ClickableCanvas デモページ１０

jQuery ClickableCanvasの設定方法

uuCanvas.jsを使用すると、プラグインの呼び出しコードを書いた後、直に書かれたコードが実行されないという不具合がありました。 そこでv1.0でreadyCanvasメソッドというのを用意し、このメソッドに渡した関数内のコードがプラグイン準備後に実行されるようにしました。このページのサンプルで図形のループテストをしています。
FlashCanvas Pro使用　ClickableCanvas.js ver 1.4

動作確認：　Firefox3.6 IE8

サンプルのコード詳細 $(function() { var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'test1', type: 'polygon', coords: [ { x: 250, y: 100 }, { x: 100, y: -50 }, { x: 100, y: 50 } ], attr: { coordMode: 'relative', shapeZIndex: 200 }, style: { lineWidth: 3.0, strokeStyle: '#6B8E23', fillStyle: '#9ACD32', shadowBlur: 1 } }); /* プラグイン機能の準備が完了したら開始する処理を書く */ canvasArea.readyCanvas(function() { var animEnded = false, timer = setInterval(jQuery.proxy(function() { if (!animEnded) { animEnded = true; this.animateShape('test1', { endcoord: [ { x: 250, y: 100 }, { x: -100, y: -50 }, { x: -100, y: 50 } ], endcolor: { strokeStyle: '#006400', fillStyle: '#556B2F' }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape('test1', { endcoord: [ { x: 250, y: 100 }, { x: 100, y: -50 }, { x: 100, y: 50 } ], endcolor: { strokeStyle: '#6B8E23', fillStyle: '#9ACD32' }, duration: 500, transition: 'sinoidal', afterFinish: function() { animEnded = false; } }) } }); } }, this), 100); }); });