jQuery ClickableCanvas デモページ１１

jQuery ClickableCanvasの設定方法

バージョン1.1から図形オブジェクトを直接操作するsetPropertyValueメソッドを導入。 styleプロパティやtextStyleプロパティなど、animateShapeメソッドでは扱えない範囲までアクセスできるようになりました。 下のサンプルでは、setIntervalを利用して手動でアニメーションをしています。

Canvasの奇妙な冒険
FlashCanvas Pro使用　ClickableCanvas.js ver 1.4

動作確認：　Firefox3.6 IE8

サンプルのコード詳細 $(function() { /* プラグインの呼び出し */ var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true, uuCanvas: true }); /* 図形test1を作成 */ canvasArea.createShape({ name: 'test1', type: 'polygon', coords: [ { x: 250, y: 150 }, { x: 0, y: 0 }, { x: 0, y: 0 } ], attr: { coordMode: 'relative' }, textStyle: { content: 'Is This Clock?', offset: [-80, 0], font: 'bold 20px "MS PGothic", "Hiragino Kaku Gothic Pro", "Osaka", "Verdana", "arial", "sans-serif"', fillStyle: '#FFF', shadowBlur: 5, shadowColor: '#333', shadowOffsetX: 3, shadowOffsetY: 3 } }); /* 図形test2を作成。テキスト表示のみなので最小限の設定に */ canvasArea.createShape({ name: 'test2', type: 'line', coords: [ { x: 250, y: 150 } ], attr: { coordMode: 'relative', shapeZIndex: 100 } }); /* 図形test3を作成。これもテキスト表示のみなので最小限の設定に */ canvasArea.createShape({ name: 'test3', type: 'line', coords: [ { x: 250, y: 150 } ], attr: { coordMode: 'relative' } }); /* ページ読み込みが終わったら、図形をアニメーションさせる */ canvasArea.readyCanvas(function() { var angle = 0 ,x1, y1, x2, y2, timer; /* 100ミリ秒間隔で描画を更新する。またコールバック内でthisがプラグインのインスタンスを指すようにjQueryのproxyメソッドでコールバック関数をラップしている */ timer = setInterval(jQuery.proxy(function() { angle += 5; x1 = Math.cos(angle * (Math.PI / 180)); y1 = Math.sin(angle * (Math.PI / 180)); x2 = Math.cos((angle + 30) * (Math.PI / 180)); y2 = Math.sin((angle + 30) * (Math.PI / 180)); /* test1の枠線の太さを変える */ this.setPropertyValue('test1', 'style', { lineWidth: x1 * 10 + 12, strokeStyle: '#708090', fillStyle: '#B0C4DE', shadowBlur: 1 }); /* test1の図形を時計の針のようにグルグル回す */ this.setPropertyValue('test1', 'coords', [ { x: 250, y: 150 }, { x: 150 * x1, y: 150 * y1 }, { x: 150 * x2, y: 150 * y2 } ]); /* test2のテキストをアニメーションさせる */ this.setPropertyValue('test2', 'textStyle', { content: 'ゴゴゴゴゴゴゴ……', offset: [-x1 * 200 - 100, -y1 * 100], font: 'bold ' + (x1 * 30 + 50) + 'px "MS PGothic", "Hiragino Kaku Gothic Pro", "Osaka", "Verdana", "arial", "sans-serif"', fillStyle: '#333', shadowBlur: 3, shadowColor: '#696969', shadowOffsetX: 2, shadowOffsetY: 2 }); /* test3のテキストをアニメーションさせる */ this.setPropertyValue('test3', 'textStyle', { content: 'ドドドドドド……', offset: [x1 * 200 - 100, y1 * 100], font: 'bold ' + (y2 * 30 + 50) + 'px "MS PGothic", "Hiragino Kaku Gothic Pro", "Osaka", "Verdana", "arial", "sans-serif"', fillStyle: '#2F4F4F', shadowBlur: 3, shadowColor: '#696969', shadowOffsetX: 2, shadowOffsetY: 2 }); }, this), 100); }); });