jQueryプラグインClickableCanvasをアップデートしました

HTML5のCanvas図形をクリック可にするjQueryプラグイン、ClickableCanvasをバージョン0.9に更新しました。バグ修正と新たな機能をいくつか追加しています。 ⇒Canvasをクリッカブルに　ClickableCanvas ver 0.9 ＜追加した機能＞ ・線形（lines）、多角形（polygon）もアニメーション可能に ・線形（lines）、多角形（polygon）の座標指定を相対座標で指定できるオプションを追加 ・図形表示可能に。選択した図形の形に切り取られます ＜修正した箇所＞ ・図形描画の更新をsetTimeoutからsetIntervalに変更（PC性能にあまり左右されないように） ・多角形（polygon）をいくつか表示したとき、マウスを置いてない図形がクリックされるなどの不具合が見られたので、ポインタ判定を特許の方法から別のものに変更（後述） 線形（lines）、多角形（polygon）のアニメーション指定は、createShapeメソッドのcoordsプロパティと同じように、animateShapeメソッドの座標を入れるプロパティ（startcoord、endcoord）に以下のように配列を指定します。

myCanvas.animateShape('shape1', {
	endcoord: [
		{ x: 200, y: 400 },
		{ x: 300, y: 100 },
		{ x: 150, y: 200 }
	],
......
......

⇒ポリゴンのアニメーションデモ また、線形（lines）、多角形（polygon）の図形を作成する場合、少しだけ図形の座標をずらしたいというだけでも全体の座標ポイントを計算し直さなければならず非常に面倒だと思いました。そこで、最初の座標ポイント（配列の最初の要素）を基準に以降の座標ポイントを相対的に設定していく方法で指定できるようにしました。 図で説明しますと、いままでの絶対座標ではC1～C3の座標が左上の（0, 0）を基準にしていたので、同じ形で少し座標を変えるのにもC1～C3すべての座標を変える必要がありました。一方、図の右側のようにC1の座標を基準にC2（C1から右に100）、C3（C1から右に100、下に100）を設定できるなら、他の図形のようにひとつの座標を変更するだけで図形を崩さず、図形の移動ができるようになります。 線形・多角形を相対座標で指定するにはcreateShapeメソッドで図形を作成するとき、attrにcoordModeプロパティを入れて”relative“を指定します。

myCanvas.createShape({
	name: 'poly1',
	type: 'polygon',
	attr: {
		coordMode: 'relative',
		shapeZIndex: 100
	},
......
......

ポリゴンのアニメーションデモの右側の図形が実際に相対座標を指定しているので、ソースなどを参考にしてみてください。なお、coordModeプロパティを”relativeにすると、同じ図形をアニメーションさせるときに指定する座標も相対座標として指定する必要があるので注意してください。 その他、多角形（polygon）の判定（関数update内）で少しおかしなところが見られたので、判定方法をこれまで使用していた特許参照の方法（コード760行付近のコード）から、通常の（やや処理の重い）方法に置き換えることにしました。この二つの判定方法についてはユーザー側で選択してもかまいません。 図形表示もこのバージョンから追加しました。Canvasのクリップメソッドを使用して、選択した図形の形に図形を切り取るようにしています。 ⇒クリップ機能を使用した図形表示 これもまたcreateShapeメソッドで図形を作成するとき、必要なデータを追加します。imageオブジェクトを作り、そのなかに画像URL（urlプロパティ）、オフセット座標（offsetプロパティ）を入れます。また、図形と画像の動きを連動させたいときは、interlockedプロパティ（デフォルトはfalse）にtrueを入れます。

myCanvas.createShape({
		name: 'circle-image',
		type: 'circle',
		image: {
			url: '../image/background/autumn-leaves_beiz.jp_M07486.jpg',
			offset: [0, 0],
			interlocked: false
		},
......
......

合わせてドキュメントの方も変更しました。万一プラグインに何か不具合等ございましたら、コメント欄かメール等にてご連絡お願いいたします。 ⇒Canvas図形をクリッカブルにするjQueryプラグイン ClickableCanvas

 - JavaScript/Ajax ClickableCanvas, JavaScript, jQuery, プラグイン