🐉 グォォォオオ！ Hello,World!! ドラゴンだ！
🐉ちなみに昔好きだったレンジャーシリーズは「忍者戦隊カクレンジャー」だぜ！
🐉 ...
🐉 ...（これ、世代がバレるくない・・？）
🐉今回は Paper.jsで地味に詰まった内容についての備忘録系です！
🐉 Paper.jsが不慣れな人間がやりがちだろう！というネタです。このブログ記事が助けになれば嬉しいです！
はじめに
paper.jsは、HTML5 Canvasをベースにしたオープンソースのグラフィックスライブラリです。
本記事では、addChildメソッドの意外な挙動について解説し、正しく活用するためのポイントを紹介します。
paper.jsにおけるItemとは
paper.jsでは、Canvas上に描画する要素を「Item」と呼びます。これらのItemは、PathやGroup、Layerなどのクラスを持ち、共通の基本機能を継承しています。Itemは親子関係を持つことができ、一つのItemは常に一つの親を持ちます。
本件は同じアイテムを作成し、各レイヤーなどに同じ要素を含めようとした時に発生しました。
サンプルコード
// paper.jsの環境を設定 paper.setup(document.getElementById('myCanvas') as HTMLCanvasElement); // Layer1を作成 const layer1 = new paper.Layer(); // Layer2を作成 const layer2 = new paper.Layer(); // グループを作成 const group = new paper.Group(); // アイテムを定義（円を描画） const circle = new paper.Path.Circle({ center: new paper.Point(100, 100), radius: 50, fillColor: 'red' }); // アイテムをLayer1に追加 layer1.addChild(circle); console.log("Layer1にアイテム追加: ", layer1.children.length); // 1 // アイテムをGroupに追加 group.addChild(circle); console.log("Groupにアイテム追加後:", group.children.length); // 1 console.log("Layer1のアイテム数:", layer1.children.length); // 0 // 再度アイテムをLayer2に追加 layer2.addChild(circle); console.log("Layer2にアイテム追加後:", layer2.children.length); // 1 console.log("Groupのアイテム数:", group.children.length); // 0 // 結果をCanvasに描画 paper.view.draw();
簡単にコード解説するよー
- 環境設定:
paper.setupでCanvas要素を設定します。 - レイヤーとグループの作成:
layer1、layer2の2つのレイヤーとgroupというグループを作成します。 - アイテムの作成: 赤色の円（
circle）を作成し、layer1に追加します。 - グループへの再追加: 同じ
circleをgroupに追加すると、layer1から削除され、groupに移動します。 - レイヤー2への再追加: 再度、
circleをlayer2に追加すると、groupから削除され、layer2に移動します。 - 描画:
paper.view.draw()でCanvasに結果を描画します。
addChildメソッドの挙動
このサンプルから分かるように、addChildメソッドは以下のように動作します。
- 一意性の確保: 同じItemを複数の親に追加することはできません。新しい親に追加すると、自動的に元の親から削除されます。
- 親子関係の管理: Itemは常に一つの親を持ち、
addChildはItemを「親要素に登録」すると同時に、他の親から解除します。 - Groupとの関係:
GroupもLayerと同様に親として機能し、Itemをグループ内に整理できます。
この挙動により、グラフィック要素の一貫性が保たれ、意図しない重複や競合を防ごうとする特性から、元の親要素からは削除されます。。。 これで検査しようとして詰まりました。
まとめ
paper.jsのaddChildメソッドは、単なる「追加」ではなく、Itemの親子関係を管理する重要な機能を持っています。同じItemを複数のレイヤーやグループで共有することはできず、追加時には既存の親から自動的に削除されます。
- 正しい管理: 複数のレイヤーやグループを操作する際は、Itemの親子関係に注意しましょう。
- 意図しない移動を防ぐ: Itemを再利用する場合は、親が変わります。注意してください！
