jQuery ClickableCanvas デモページ１３

jQuery ClickableCanvasの設定方法
Clickable Canvas.js（ベータ版ver 1.4）

バージョン1.4でダブルクリックイベントに対応しました。右下の図形セットのイベントはダブルクリックで発動します。 その他、Canvasエリア外へマウスカーソルが移動すると発生するonCanvasOutイベントハンドラを実装しました。 マウスカーソルをキャンバスの外に移動するたびに赤い丸が拡大縮小します。
また、このサンプルでは複数の図形が重なったとき、最前面の図形のイベントハンドラだけが発生するように、引数のtopmostShapeを使用して条件分岐させるコード例を紹介しています。 左上の図形セットは何も対策をしていないケースで、図形の共通部分をクリックすると二つのイベントが発生してしまいます。しかし、右下の図形セットの共通部分をクリックすると最前面の 図形のイベントだけが発動します。
FlashCanvas Pro使用　ClickableCanvas.js ver 1.4

動作確認：　Firefox4.0

サンプルのコード詳細 $(function() { var canvasArea = $('#canvas_area').clickableCanvas({ flashCanvas: true }), console = $('#console'); canvasArea.createShape({ name: 'ellipse-image1', type: 'ellipse', attr: { shapeZIndex: 101 }, image: { url: '../image/background/autumn-leaves_beiz.jp_M07092.jpg', offset: [0, 0], interlocked: false }, coords: { x: 40, y: 20, w: 200, h: 100 }, onClick: function (shape) { console.html(console.html() + '<br />' + 'クリックした図形は' + shape.name + 'です。'); } }); canvasArea.createShape({ name: 'round-rect-image1', type: 'round-rect', attr: { shapeZIndex: 102 }, image: { url: '../image/background/autumn-leaves_beiz.jp_S01143.jpg', offset: [0, 0], interlocked: false }, coords: { x: 140, y: 60, w: 200, h: 100, r: 10 }, onClick: function (shape) { console.html(console.html() + '<br />' + 'クリックした図形は' + shape.name + 'です。'); } }); /* 呼び出されたコールバックの図形が最前面かどうかチェックする */ canvasArea.createShape({ name: 'ellipse-image2', type: 'ellipse', attr: { shapeZIndex: 101 }, image: { url: '../image/background/sky_beiz.jp_S08163.jpg', offset: [0, 0], interlocked: false }, coords: { x: 400, y: 80, w: 100, h: 200 }, onDblClick: function (shape, coord, topmostShape) { if (shape.name === topmostShape) { console.html(console.html() + '<br />' + 'ダブルクリックした図形は' + shape.name + 'です。'); } } }); canvasArea.createShape({ name: 'round-rect-image2', type: 'round-rect', attr: { shapeZIndex: 102 }, image: { url: '../image/background/sky_beiz.jp_S06821.jpg', offset: [0, 0], interlocked: false }, coords: { x: 440, y: 140, w: 200, h: 100, r: 10 }, onDblClick: function (shape, coord, topmostShape) { if (shape.name === topmostShape) { console.html(console.html() + '<br />' + 'ダブルクリックした図形は' + shape.name + 'です。'); } } }); /* onCanvasOutイベントハンドラを実装した図形例 */ canvasArea.createShape({ name: 'circle-image2', type: 'circle', attr: { shapeZIndex: 100 }, style: { fillStyle: '#F00' }, coords: { x: 120, y: 220, r: 50 }, onCanvasOut: function (shape) { this.animateShape(shape, { endcoord: { r: 200 }, duration: 500, transition: 'sinoidal', afterFinish: function() { this.animateShape(shape, { endcoord: { r: 50 }, duration: 500, transition: 'sinoidal' }); } }); } }); });