AS3 Fit DisplayObject into Rectangle


/ Published in: ActionScript 3
Save to your folder(s)

DisplayUtils.as and Alignment.as

These two classes by Justin Windle (aka Soulwire) can be used to scale a DisplayObject to fit within (fill) a rectangle, without distorting the image.

Example Usage

Fit a DisplayObject into a Rectangle

var area:Rectangle = new Rectangle( 0, 0, 200, 100 );
DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );

Create a fullscreen background image

stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;

function onStageResized( event:Event = null ):void
{
var area:Rectangle = new Rectangle( 0, 0, stage.stageWidth, stage.stageHeight );
DisplayUtils.fitIntoRect( myDisplayObject, area, true, Alignment.MIDDLE );
}

stage.addEventListener( Event.RESIZE, onStageResized );
onStageResized();

Create a thumbnail

var thumb:Bitmap = DisplayUtils.createThumb( myBitmap.bitmapData, 100, 100, Alignment.MIDDLE, true );
addChild( thumb );


Copy this code and paste it in your HTML
  1. package uk.soulwire.utils.display
  2. {
  3. /**
  4. * uk.soulwire.utils.display.DisplayUtils
  5. *
  6. * @version v1.0
  7. * @since May 26, 2009
  8. *
  9. * @author Justin Windle
  10. * @see http://blog.soulwire.co.uk
  11. *
  12. * About DisplayUtils
  13. *
  14. * DisplayUtils is a set of static utility methods for dealing
  15. * with DisplayObjects
  16. *
  17. * Licensed under a Creative Commons Attribution 3.0 License
  18. * http://creativecommons.org/licenses/by/3.0/
  19. */
  20.  
  21. import flash.display.PixelSnapping;
  22. import flash.display.Bitmap;
  23. import flash.display.BitmapData;
  24. import flash.geom.Matrix;
  25. import flash.geom.Rectangle;
  26. import flash.display.DisplayObject;
  27.  
  28. public class DisplayUtils
  29. {
  30.  
  31. //---------------------------------------------------------------------------
  32. //------------------------------------------------------------ PUBLIC METHODS
  33.  
  34. /**
  35. * Fits a DisplayObject into a rectangular area with several options for scale
  36. * and alignment. This method will return the Matrix required to duplicate the
  37. * transformation and can optionally apply this matrix to the DisplayObject.
  38. *
  39. * @param displayObject
  40. *
  41. * The DisplayObject that needs to be fitted into the Rectangle.
  42. *
  43. * @param rectangle
  44. *
  45. * A Rectangle object representing the space which the DisplayObject should fit into.
  46. *
  47. * @param fillRect
  48. *
  49. * Whether the DisplayObject should fill the entire Rectangle or just fit within it.
  50. * If true, the DisplayObject will be cropped if its aspect ratio differs to that of
  51. * the target Rectangle.
  52. *
  53. * @param align
  54. *
  55. * The alignment of the DisplayObject within the target Rectangle. Use a constant from
  56. * the DisplayUtils class.
  57. *
  58. * @param applyTransform
  59. *
  60. * Whether to apply the generated transformation matrix to the DisplayObject. By setting this
  61. * to false you can leave the DisplayObject as it is but store the returned Matrix for to use
  62. * either with a DisplayObject's transform property or with, for example, BitmapData.draw()
  63. */
  64.  
  65. public static function fitIntoRect(displayObject : DisplayObject, rectangle : Rectangle, fillRect : Boolean = true, align : String = "C", applyTransform : Boolean = true) : Matrix
  66. {
  67. var matrix : Matrix = new Matrix();
  68.  
  69. var wD : Number = displayObject.width / displayObject.scaleX;
  70. var hD : Number = displayObject.height / displayObject.scaleY;
  71.  
  72. var wR : Number = rectangle.width;
  73. var hR : Number = rectangle.height;
  74.  
  75. var sX : Number = wR / wD;
  76. var sY : Number = hR / hD;
  77.  
  78. var rD : Number = wD / hD;
  79. var rR : Number = wR / hR;
  80.  
  81. var sH : Number = fillRect ? sY : sX;
  82. var sV : Number = fillRect ? sX : sY;
  83.  
  84. var s : Number = rD >= rR ? sH : sV;
  85. var w : Number = wD * s;
  86. var h : Number = hD * s;
  87.  
  88. var tX : Number = 0.0;
  89. var tY : Number = 0.0;
  90.  
  91. switch(align)
  92. {
  93. case Alignment.LEFT :
  94. case Alignment.TOP_LEFT :
  95. case Alignment.BOTTOM_LEFT :
  96. tX = 0.0;
  97. break;
  98.  
  99. case Alignment.RIGHT :
  100. case Alignment.TOP_RIGHT :
  101. case Alignment.BOTTOM_RIGHT :
  102. tX = w - wR;
  103. break;
  104.  
  105. default :
  106. tX = 0.5 * (w - wR);
  107. }
  108.  
  109. switch(align)
  110. {
  111. case Alignment.TOP :
  112. case Alignment.TOP_LEFT :
  113. case Alignment.TOP_RIGHT :
  114. tY = 0.0;
  115. break;
  116.  
  117. case Alignment.BOTTOM :
  118. case Alignment.BOTTOM_LEFT :
  119. case Alignment.BOTTOM_RIGHT :
  120. tY = h - hR;
  121. break;
  122.  
  123. default :
  124. tY = 0.5 * (h - hR);
  125. }
  126.  
  127. matrix.scale(s, s);
  128. matrix.translate(rectangle.left - tX, rectangle.top - tY);
  129.  
  130. if(applyTransform)
  131. {
  132. displayObject.transform.matrix = matrix;
  133. }
  134.  
  135. return matrix;
  136. }
  137.  
  138. /**
  139. * Creates a thumbnail of a BitmapData. The thumbnail can be any size as
  140. * the copied image will be scaled proportionally and cropped if necessary
  141. * to fit into the thumbnail area. If the image needs to be cropped in order
  142. * to fit the thumbnail area, the alignment of the crop can be specified
  143. *
  144. * @param image
  145. *
  146. * The source image for which a thumbnail should be created. The source
  147. * will not be modified
  148. *
  149. * @param width
  150. *
  151. * The width of the thumbnail
  152. *
  153. * @param height
  154. *
  155. * The height of the thumbnail
  156. *
  157. * @param align
  158. *
  159. * If the thumbnail has a different aspect ratio to the source image, although
  160. * the image will be scaled to fit along one axis it will be necessary to crop
  161. * the image. Use this parameter to specify how the copied and scaled image should
  162. * be aligned within the thumbnail boundaries. Use a constant from the Alignment
  163. * enumeration class
  164. *
  165. * @param smooth
  166. *
  167. * Whether to apply bitmap smoothing to the thumbnail
  168. */
  169.  
  170. public static function createThumb(image : BitmapData, width : int, height : int, align : String = "C", smooth : Boolean = true) : Bitmap
  171. {
  172. var source : Bitmap = new Bitmap(image);
  173. var thumbnail : BitmapData = new BitmapData(width, height, false, 0x0);
  174.  
  175. thumbnail.draw(image, fitIntoRect(source, thumbnail.rect, true, align, false), null, null, null, smooth);
  176. source = null;
  177.  
  178. return new Bitmap(thumbnail, PixelSnapping.AUTO, smooth);
  179. }
  180. }
  181. }
  182.  
  183.  
  184.  
  185.  
  186.  
  187.  
  188. package uk.soulwire.utils.display
  189. {
  190.  
  191. /**
  192. * @author Justin Windle ([email protected])
  193. */
  194. public class Alignment
  195. {
  196. /**
  197. * Specifies that alignment is at the bottom.
  198. */
  199. public static const BOTTOM : String = "B";
  200. /**
  201. * Specifies that alignment is in the bottom-left corner.
  202. */
  203. public static const BOTTOM_LEFT : String = "BL";
  204. /**
  205. * Specifies that alignment is in the bottom-right corner.
  206. */
  207. public static const BOTTOM_RIGHT : String = "BR";
  208. /**
  209. * Specifies that alignment is on the left.
  210. */
  211. public static const LEFT : String = "L";
  212. /**
  213. * Specifies that alignment is in the middle
  214. */
  215. public static const MIDDLE : String = "C";
  216. /**
  217. * Specifies that alignment is on the right.
  218. */
  219. public static const RIGHT : String = "R";
  220. /**
  221. * Specifies that alignment is at the top.
  222. */
  223. public static const TOP : String = "T";
  224. /**
  225. * Specifies that alignment is in the top-left corner.
  226. */
  227. public static const TOP_LEFT : String = "TL";
  228. /**
  229. * Specifies that alignment is in the top-right corner.
  230. */
  231. public static const TOP_RIGHT : String = "TR";
  232. }
  233. }

URL: http://blog.soulwire.co.uk/code/actionscript-3/fit-a-displayobject-into-a-rectangle

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.