レイヤーとイベント処理
図形描画において複数の図形をグループ化して操作するために、独立した複数枚の描画領域を重ねる「レイヤー」が利用されることがあります。HTML5のCanvasでレイヤーを実現するためには独自に処理を実装する必要がありますが、jCanvasでは標準でレイヤーの機能がサポートされます。
レイヤーを追加するにはaddLayerメソッドを用います。また描画処理の記述でlayerプロパティをtrueに設定すると、描画が自動的にレイヤーになります。
リスト8 レイヤーの定義方法1：addLayerメソッド利用
$("#canvas").addLayer({
type: "rectangle", // 図形の種類（四角形）
fillStyle: 'red', // 塗りつぶし色（赤）
x: 240, y: 160, // 位置
width: 200, height: 100 // サイズ
}).drawLayers();
リスト9 レイヤーの定義方法2：layerプロパティ使用
$("#canvas").drawEllipse({
layer: true, // 描画をレイヤーにする
fillStyle: 'green', // 塗りつぶし色（緑）
x: 150, y: 100, // 位置
width: 200, height: 100 // サイズ
});
リスト8、リスト9を実行すると図5のように表示されます。図形が重なって表示されるのは図3と同じですが、内部的には各図形がレイヤーに分割されています。
図5 図形をレイヤーに分けて描画する例（005_jquery_jcanvas_layer1.html）
jCanvasではレイヤーに分割された図形を個別に操作する方法が提供されています。まずレイヤーにはnameプロパティで名前をつけたり、レイヤーグループにグループ分けしたりすることができます。
リスト10 レイヤーに名前box1を付けてレイヤーグループgroup1に追加
$("#canvas").addLayer({
type: "rectangle",
name: "box1" // レイヤー名を付ける
fillStyle: 'red',
x: 240, y: 160,
width: 200, height: 100
}).drawLayers();
// レイヤーをレイヤーグループに追加
$("canvas").addLayerToGroup("box1", "group1");
レイヤーやレイヤーグループは後で名前で参照して操作することができます。例えばWebページ上のあるボタンを押した時に、対応するレイヤーやレイヤーグループを名前で参照して図形の色を変えるような処理が実現できます。
リスト11 レイヤーやレイヤーグループの名前による参照
$("canvas").getLayer("box1");
$("canvas").getLayerGroup("group1");
レイヤーに対してdraggableプロパティをtrueに設定すると、レイヤーをドラッグして動かすことができるようになります。
リスト12 レイヤーでドラッグを有効にする例
$("#canvas").drawEllipse({
layer: true,
draggable: true, // ドラッグ有効化
fillStyle: 'green',
x: 150, y: 100,
width: 200, height: 100
});
リスト8～リスト12の内容を含むサンプルの実行結果を図6に示します。各図形のドラッグや表示／非表示切り替えなどが可能になっています。
図6 jCanvasのレイヤーを用いた描画の例（006_jquery_jcanvas_layer2.html）
さらにリスト13のように、レイヤーにはマウスクリックなどイベントを設定することができます。
リスト13 レイヤーでマウスクリックを有効にする例（007_jquery_jcanvas_event.html）
$("#canvas").drawPolygon({
layer: true,
type: "polygon",
fillStyle: "blue",
x: 240, y: 160,
radius: 100,
sides: 5,
click: function(layer) { // マウスクリックイベント
$('canvas').animateLayer(layer, {
rotate: "+=30" // 1回当たり30度回転させる
}, 250, 'swing');
}
});
リスト13を実行するとマウスクリックにより30度ずつ回転する五角形が表示されます。
図7 マウスクリックイベントによりレイヤーが回転する
