jQueryプラグインClickableCanvasをアップデートしました
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)を設定できるなら、他の図形のようにひとつの座標を変更するだけで図形を崩さず、図形の移動ができるようになります。

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