EaselJSの次期バージョンでオブジェクトの幅と高さを取得する実装 [Edit]
投稿者：野中 文雄 | 投稿日：2013.08.26 | [CreateJS][HTML5][野中ゼミ]CreateJS Blogに「Update: Width & Height in EaselJS」という更新情報の記事が公開されました。「EaselJSの次期バージョンにおけるオブジェクトの幅と高さの取得」の04「次期バージョンでgetBounds()メソッドが備わる」で検討されていた矩形領域の調べ方について、DisplayObjectクラスへの実装が決まりました。
DisplayObjectクラスには、新たにつぎの3つのメソッドが備わります。
- DisplayObject.getBounds()
- DisplayObject.getTransformedBounds()
- DisplayObject.setBounds()
DisplayObject.getBounds()メソッド
DisplayObject.getBounds()メソッドは、オブジェクトのローカルな座標空間における矩形領域をRectangleで返します。オブジェクトの基準点(0, 0)を起点として、座標変換は除かれます。領域が自動計算できるオブジェクトについては、その値が返されます。矩形領域は、BitmapとSpriteオブジェクトについては正確に求められ、Textオブジェクトでは概算値になります。Containerオブジェクトは、DisplayObject.getBounds()メソッドの戻り値がnullでないすべての子オブジェクトから集計します。なお、Shapeオブジェクトでは、メソッドの戻り値がデフォルトではnullになります。
DisplayObject.setBounds()メソッド
矩形領域を自ら求められないShapeインスタンスなどのオブジェクトについては、DisplayObject.setBounds()メソッドで値が定められます。
オブジェクト.setBounds(x座標, y座標, 幅, 高さ)
DisplayObject.setBounds()メソッドで矩形領域を与えれば、親ContainerオブジェクトがDisplayObject.getBounds()メソッドで求める領域の集計に加えられます。また、DisplayObject.setBounds()メソッドで定めた矩形領域は、領域の自動計算をオーバーライドします。たとえば、Textオブジェクトにより正確な矩形領域が与えられますし、Containerオブジェクトが領域を集計する負荷も下げられるでしょう。また、インスタンスにDisplayObject.cache()メソッドを呼出したときも、キャッシュの矩形領域が、自動計算をオーバーライドします。
DisplayObject.getTransformedBounds()メソッド
DisplayObject.getTransformedBounds()メソッドは、表示リストの親オブジェクトの座標にもとづく、インスタンスの矩形領域を返します。したがって、インスタンスへの座標変換も加わった値になります。
なお、Shapeオブジェクトの矩形領域の扱いについては、他のやり方も考えていくそうです。また、Textオブジェクトに新たなCanvas APIが使えるようになれば、より正確な矩形領域が求められるようになります。ご意見やご要望は、引続き求められています。
