EaselJSの次期バージョンでオブジェクトの幅と高さを取得する実装 [Edit]

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が使えるようになれば、より正確な矩形領域が求められるようになります。ご意見やご要望は、引続き求められています。

その他の記事