jQuery ClickableCanvas デモページ9

jQuery ClickableCanvasの設定方法

多角形（ポリゴン）のアニメーション　絶対座標と相対座標
FlashCanvas Pro使用　ClickableCanvas.js ver 1.4

　バージョン0.9から線形図形linesと多角形polygonでアニメーション可能になりました。 また、配列に入れる座標のうち、最初（インデックス番号0）の座標オブジェクトを基準とした座標指定をオプションで選べるように変更しました。 具体的な方法はattrのcoordModeプロパティにtrueを指定します。

絶対座標と相対座標の指定方法について

動作確認：　Firefox3.6 IE8

サンプルのコード詳細 jQuery(function() { var canvasArea = jQuery('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); canvasArea.createShape({ name: 'test1', type: 'polygon', coords: [ { x: 100, y: 100 }, { x: 200, y: 100 }, { x: 200, y: 200 } ], attr: { shapeZIndex: 200 }, style: { lineWidth: 3.0, strokeStyle: '#6B8E23', fillStyle: '#9ACD32', shadowBlur: 1 }, onClick: function() { this.animateShape('test1', { endcoord: [ { x: 200, y: 400 }, { x: 300, y: 100 }, { x: 150, y: 200 } ], endcolor: { strokeStyle: '#FFE4E1', fillStyle: '#FF4500' }, duration: 1000, transition: 'sinoidal', afterFinish: function() { this.animateShape('test1', { endcoord: [ { x: 100, y: 100 }, { x: 200, y: 100 }, { x: 200, y: 200 } ], endcolor: { strokeStyle: '#6B8E23', fillStyle: '#9ACD32' }, duration: 1000, transition: 'sinoidal' }) } }); } }); canvasArea.createShape({ name: 'test2', type: 'polygon', coords: [ { x: 400, y: 150 }, { x: 100, y: 0 }, { x: 100, y: 100 } ], attr: { coordMode: 'relative', shapeZIndex: 200 }, style: { lineWidth: 3.0, strokeStyle: '#6B8E23', fillStyle: '#9ACD32', shadowBlur: 1 }, onClick: function() { this.animateShape('test2', { endcoord: [ { x: 200, y: 250 }, { x: 300, y: 0 }, { x: 150, y: 150 } ], endcolor: { strokeStyle: '#333', fillStyle: '#666' }, duration: 1000, transition: 'sinoidal', afterFinish: function() { this.animateShape('test2', { endcoord: [ { x: 400, y: 150 }, { x: 100, y: 0 }, { x: 100, y: 100 } ], endcolor: { strokeStyle: '#6B8E23', fillStyle: '#9ACD32' }, duration: 1000, transition: 'sinoidal' }); } }); } }); });