表示モード

複数のエンティティをまとめて扱う ​

エンティティを入れ子構造にすることにより、複数のエンティティをまとめて操作することができます。

凡例 ​

javascript
var group = new g.E({ scene: scene });
var red = new g.FilledRect({
  ...      // 必要なプロパティ
});
group.append(red); // group の子エンティティに red を追加

var green = new g.FilledRect({
  ...      // 必要なプロパティ
});
group.append(green); // group の子エンティティに green を追加
scene.append(group);
javascript
group.hide(); // 子エンティティの red, green ごと非表示になります

利用例 ​

次のコンテンツは、親エンティティ (g.E) に子エンティティを追加しまとめて半透明状態で表示します。

詳細 ​

シーンにエンティティを append() できるのと同様、エンティティにもまた別のエンティティを append() することができます (入れ子構造)。 子エンティティは親エンティティに追従して動くので、入れ子にすることで複数のエンティティをまとめて操作することができます。 親エンティティを移動・回転・拡大すると、その子エンティティも同じように移動・回転・拡大されます。 また、親の透明度や非表示状態なども子エンティティに影響します。

複数のエンティティをグループ化する場合には g.E エンティティが便利です。 g.E は、それ自身は何も描画しないエンティティです。

親エンティティは、エンティティ生成時に parent プロパティで指定することもできます。

javascript
var group = new g.E({ scene: scene });
var blue = new g.FilledRect({
  scene: scene,
  width: 30,
  height: 30,
  cssColor: "blue",
  parent: group // 親をgroup エンティティに指定
});

関連情報 ​