How can I accurately draw a rotated bitmap?

Question

I have a container with a masked bitmap. The scaling and rotation of this container changes at runtime, and I need to draw a masked bitmap, but I can’t find the corresponding matrix calculations for this.

My code works correctly to reflect position, scale, offset to center without rotation. When turning, the angle is correct, but the positioning is incorrect - I believe it, because the dimensions change when the rectangle is rotated.

Can someone help me figure out how to compensate for this in positioning - here is some code:

// Adjust the transformation matrix to account for the position of the container var tMatrix:Matrix = _imgContainer.transform.matrix; //Offset for container tMatrix.translate(this.x,this.y); //Offset for bounds centering tMatrix.translate(-_imgContainer.width/2,-_imgContainer.height/2); // Compensate for rotation // ???? var result_bitmap:BitmapData = new BitmapData(_maskedImg.width,_maskedImg.height,true,0x00FFFFFF); result_bitmap.lock(); result_bitmap.draw(_maskedImg,tMatrix,null,null,null,true); result_bitmap.unlock(); 

Thanks in advance for any help you can provide -

b

EDIT: Sorry, if I do not explain it correctly, let me try again with the image for support. I have a masked bitmap in a container that I use as a source to draw a new bitmap. This container can be scaled / rotated at runtime by the user before capturing. To do this, I pass the drawing method a transformation matrix based on the container matrix and adjust the values ​​of tx and ty to account for a non-zero start (due to centering). Until this moment, it works fine and captures what I expect.

However - after this container is rotated, the Grab POSITION will now turn off again - presumably due to resizing, so the tx / ty offsets are now incorrect for the new container sizes. I just need to compensate for this, but I can’t figure out how to do it.

Does anyone have any experience with a transformation matrix that can help? Thanks again for that!

Answer 1

FYI for those who may encounter similar problems. I solved my problem by explicitly setting the values ​​of the transformation matrix and in this particular order scaling, then rotation, and then translation.

This was instead of copying the transformation matrix from the container. Therefore, instead of

 var tMatrix:Matrix = _imgContainer.transform.matrix; 

I set the values ​​directly in the following order:

 tMatrix.scale (_imgContainer.scaleX, _imgContainer.scaleY); tMatrix.rotate (_imgContainer.rotation * (Math.PI/180)); tMatrix.translate (_imgContainer.x, _imgContainer.y); 

Thanks for the effort -

b

Answer 2

If the bitmap is contained inside the container, any transformations applied to the container should also be applied to the things contained in it.

I would not apply any transformations to the bitmap, I would apply them only to the container.

Answer 3

I'm not sure I fully understood your question, but it doesn’t cost anything if you rotate a 100x200 object 90 degrees, it will give 200x100 for width and height.

There are several ways around this, but I usually use scaleX / scaleY, since they are not affected by rotations, and multiply them by the original width / height of the clip.

Answer 4

I did not understand what you are trying to do 100%, but I get the main problem that you applied is the tx / ty change that you need to use when applying your transform matrix.

On this basis, maybe it helps: http://www.senocular.com/flash/tutorials/transformmatrix/ See the section “Manipulating transformation matrices”, in particular, the part on ignoring the translation of a value from deltaTransformPoint. This is AS2, but hopefully the principles will help you on the right track.