Geek Answers Handbook

Calculate the size of a new BitmapData based on a matrix

I am trying to draw the contents of BitmapData in another, but for creation.
But before drawing, I need to scale and rotate the image, and draw it.
My problem is that I don’t know the size that BitmapData will have after the conversion, so I can’t create a new one to draw it.

This method shows what I mean:

public function getTransformedBitmapData(origin:BitmapData):BitmapData { var matrix:Matrix = new Matrix(); // ajusting the anchor point and rotating matrix.translate(-origin.width / 2, -origin.height / 2); matrix.rotate(Math.PI / 4); // 45 deg matrix.translate(origin.width / 2, origin.height / 2); // scaling matrix.scale(1.5, 1.5); // Calculating the size of the new BitmapData var width:Number = 0; // I don't know this value! var height:Number = 0; // I don't know this value! // Creating and drawing (with transformation) var result:BitmapData = new BitmapData(width, height, true, 0); result.draw(origin, matrix); return result; }

Does anyone know what I have to do to find out (calculate) the size of this image after conversion?

This image illustrates the turn in action and what I want to know:

enter image description here

+4
source share
3 answers

Ok, using the @ansiart answer as a starting point, I was able to calculate the sizes this way:

 public function getTransformedBitmapData(origin:BitmapData):BitmapData { var matrix:Matrix = new Matrix(); // ajusting the anchor point and rotating matrix.translate(-origin.width / 2, -origin.height / 2); matrix.rotate(Math.PI / 4); // 45 deg matrix.translate(origin.width / 2, origin.height / 2); // scaling matrix.scale(1.5, 1.5); // Finding the four corners of the bounfing box after transformation var topLeft:Point = matrix.transformPoint(new Point(0, 0)); var topRight:Point = matrix.transformPoint(new Point(origin.width, 0)); var bottomLeft:Point = matrix.transformPoint(new Point(0, origin.height)); var bottomRight:Point = matrix.transformPoint(new Point(origin.width, origin.height)); // Calculating "who" is "where" var top:Number = Math.min(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y); var bottom:Number = Math.max(topLeft.y, topRight.y, bottomLeft.y, bottomRight.y); var left:Number = Math.min(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x); var right:Number = Math.max(topLeft.x, topRight.x, bottomLeft.x, bottomRight.x); // Ajusting final position matrix.translate(-left, -top); // Calculating the size of the new BitmapData var width:Number = right - left; var height:Number = bottom - top; // Creating and drawing (with transformation) var result:BitmapData = new BitmapData(width, height, false, 0); result.draw(origin, matrix); return result; }

I think it might be a bit overkill, but it works.

+1
source

There is no need to calculate the new size of the bitmap. You can create a new bitmapData with the same size as the original one, and set the transparency parameter to true and fillColor to 0x00 (this is the alpha value on a 32-bit image). Thus, the new bitmapData will be filled only with the converted object, the rest of the image data structure will not be affected.

Or there is another method to determine the size of the data of the placeholder raster data by multiplying the original width and height bitmap data by a scale factor.

0
source
Matrix

has a transformPoint method. This will simplify the definition of topLeft / bottomRight.

 var matrix:Matrix = new Matrix(); // do stuff to matrix var topLeft:Point = matrix.transformPoint(new Point(0,0)); var bottomRight:Point = matrix.transformPoint(new Point(width,height)); // determine bounds of rectangle based on points (note: bottomRight might be now the topLeft, so need to do testing

If you are going to draw into this new bitmap, make sure it is offset based on tx / ty.

0
source

More articles:


All Articles