前回はStageとLayerを作成し、オブジェクトをLayerに追加して表示できるようにしました。今回は、オブジェクトのグループ化について説明します。
オブジェクトを別々のLayerに追加することもできますが、複数のオブジェクトを一緒に表示したり、コントロールしたりしたい場合があります。
例えば、くまの画像とその名前のテキストを一緒に表示したい時です。こういった場合、グループ化することで、必ず一緒に移動したり配置したりするオブジェクトを効率よく管理できます。
Konvaでグループを作成する方法は次の通りです。
const group = new Konva.Group({
x: 100,
y: 100,
rotation: 0,
});
グループ化された場合、stage上の位置はグループのx、y設定によって決まります。
グループを作成したら、次に画像と文字のKonvaオブジェクトを作成します。
const bear = new Image();//こちらのはHTML Image element
bear.src = imageUrl;
bear.onload = () => {
const bearImg = new Konva.Image({ //こちらのはKonvaのImage Object
x: 0, //stageではなく、グループ中のX位置
y: 0, //stageではなく、グループ中のY位置
rotation: 0,
width: 100,
height: 100,
image: bear,
});
//作成した画像オブジェクトをグループに追加する
group.add(bearImg);
};
注意点：グループに追加されるのは最初に作成したHTMLのImage要素ではなく、KonvaのImageオブジェクトです。そのため、onload内でこのオブジェクトをグループに追加します。
次に文字オブジェクトを作成します。画像がロードされた後、文字オブジェクトを作成し、グループに追加したいため、onload内で作成して、グループに追加します。
const name = new Konva.Text({
x: 0,
y: 110, //くまの高さは100、くまの下にするため、110に設定する
text: 'Bob',
fontSize: 16,
fill: 'black',
});
//作成した文字オブジェクトをグループに追加する
group.add(name);
オブジェクトがすべて作成された後、グループをLayerに追加し、Layerを描画して追加内容を表示します。
this.layer.add(group);
this.layer.draw();
注意点: ：画像と文字はすでにグループに追加されているので、個別にLayerに追加する必要はありません。グループのみを追加します。
画像や文字、グループを別々にLayerに追加すると、コントロールできない不具合が発生する可能性があるため、そのような操作は避けてください。
以上が、Konvaでのオブジェクトグループ化の紹介です。
