Skip navigation
JohnBailey-NovelaStudios
JohnBailey-NovelaStudiosCommunity Member
Currently Being Moderated

Rasterize a Transformed Vector without Pixelation

Nov 10, 2009 12:35 PM

How does one rasterize a transformed vector capturing it's new dimensions without pixelation?


Challenge: To render a bitmap of a transformed vector display object without pixelation. Specifically, after a mx.controls.Text is transformed, a bitmap snapshot is needed to be taken of the new object including the dimensions.  I should note that the reason I am needing to get a bitmap snapshot is do to some shaping to the text.


Problem: However, doing so results in pixelation or the original dimensions of the transformed Text. It appears that flash.display.BitmapData::draw cannot get the new transformed display.


Example: http://sources.novelastudios.com/flash/matrix_adustments/MatriciesAndD imensions.html#
When the application creation complete is fired a snapshot is made. Change the matrix width (transform.matrix.a) and then re-render a snapshot / bitmap. Notice it retains the original, non-transformed values. Therefore and considering it is a rastered snapshot, when the snapshot/bitmap is scaled it becomes pixelated. Example version is now 1.1.0.0

 

 

Also at http://flashmoment.blogspot.com/2009/11/rasterize-transformed-vector-w ithout.html

  • Flex harUI
    Currently Being Moderated
    Flex harUI,
    Adobe Employee
    Nov 10, 2009 1:03 PM
    Report

    Not quite sure what you're asking, but transform.pixelBounds should show the bounds of most transformed objects unless they are clipping.

     

    Once you make a bitmap, scaling is likely to pixelate.

     

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc.

    Blog: http://blogs.adobe.com/aharui

    |
    Mark as:
  • JohnBailey-NovelaStudios
    Currently Being Moderated
    JohnBailey-NovelaStudios,
    Community Member
    Nov 10, 2009 1:24 PM
    Report

    Hello Alex,

     

    I apologize for the confusion and thanks for asking for clarification.

     

    When a flash.display.InteractiveObject is scaled on the x axis (or any axis) using transform.matrix, flash.display.BitmapData::draw cannot capture the new dimensions of the display object. This can be seen in the example:

    1. In the Matrix tab, change the Width stepper. This, as seen in the source, will change the matrix.a property and set the new matrix to the mx.controls.Text.
    2. In the Bitmap Tools tab, click Render Bitmap button.
    3. Notice the new rendered bitmap is the original Text's dimensions and not the new dimensions applied via the matrix transformation.
    4. Additionally, check the Pixel tab and you'll notice the width is still the original width value (ie 521), while the pixelBounds width is showing the accurate / displayed width.

     

    The primary objective is to be able to transform / scale a InteractiveObject's dimension (in this case mx.controls.Text) and then resample/render the bitmap with the new dimensions.

    |
    Mark as:
  • Flex harUI
    Currently Being Moderated
    Flex harUI,
    Adobe Employee
    Nov 10, 2009 3:31 PM
    Report

    You might have to wrap the scaled object in a parent and take a snapshot of the parent.

     

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc.

    Blog: http://blogs.adobe.com/aharui

    |
    Mark as:
  • JohnBailey-NovelaStudios
    Currently Being Moderated
    JohnBailey-NovelaStudios,
    Community Member
    Nov 10, 2009 5:10 PM
    Report

    Alex,

     

    You and a colleague of mine are correct! I will upload the proof of concept and update my blog. Thank you for your help and verifying my colleague's suggestion.

     

    Take care,

    John

    |
    Mark as:
  • JohnBailey-NovelaStudios
    Currently Being Moderated
    JohnBailey-NovelaStudios,
    Community Member
    Nov 10, 2009 6:07 PM
    Report

    Alex, I've uploaded a new version (the proof of concept). It is a bit messy at 1.2.0.0, but shows the results correctly for now. I must say though that this seems like a workaround to me. Do you consider this a workaround?

     

     

    Workaround: I give credit to Guy Stables (needs a link) and Alex Harui (http://blogs.adobe.com/aharui). 

    Essentially, the workaround is as follows:

    1. The InteractiveObject (we'll call our target) needs to be placed in a container. In this example mx.controls.Text is placed inside a mx.core.UIComponent.
    2. The matrix transform is then applied to the target (eg mx.controls.Text)
    3. The dimensions of the container (eg the UIComponent that contains the Text/target) are then set to the  target's pixelBounds dimensions.
    4. Finally, take the snapshot bitmap of the container (the UIComponent).


    For a demonstration see the latest version 1.2.0.0 of the example.
    |
    Mark as:
  • Flex harUI
    Currently Being Moderated
    Flex harUI,
    Adobe Employee
    Nov 10, 2009 10:09 PM
    Report

    No.  I think of the transform like a magnifying glass applied to the object.  The object doesn't know it has been transformed, but the parent, who is looking through the magnifying glass, does and sees the transformed result so that's what you need to capture.

     

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc.

    Blog: http://blogs.adobe.com/aharui

    |
    Mark as:
  • JohnBailey-NovelaStudios
    Currently Being Moderated
    JohnBailey-NovelaStudios,
    Community Member
    Nov 13, 2009 12:01 PM
    Report

    Alex, I suppose I view this differently.

     

    There are two primary issues I see:

    1. If a view object changes, I believe the properties of that object should reflect those changes. Specifically, to me it's surprising to have a display object be transformed and it's properties still reflect that it hasn't. In this example, it makes sense only if the transformation was taking place on the parent not the child.

    2. The matrix could be used as a model and seen as such. However, adjustments to matrix properties do not get dispatched which make it near impossible to use as a functional model.

     

    These two things nullify the event dispatching and ability to listen directly to an object, which forces the usage of a Design Pattern that is overkill but required.

     

    What do you think?

    |
    Mark as:
  • Flex harUI
    Currently Being Moderated
    Flex harUI,
    Adobe Employee
    Nov 13, 2009 11:03 PM
    Report

    Almost nothing in the Flash Player dispatches events when changed.  It makes watching for changes very difficult.  The Flex Framework has taken the time to get the 80% cases to dispatch events, but there is a performance cost to doing so and it isn't always possible to trap changes.  Rotation and Scale is better handled in Flex 4 (although the Spark components can be a bit slower because of it).

     

    Some properties are immediately modified by transform changes and vice-versa (scaleX/Y is reflected in the transform and vice-versa).  But if a object positioned a rectangle at 50,50 to 100, 100, then got scaled, the xy of that child rectangle is still 50,50 and I think that is correct.  That's why I think of scale as a magnifying glass above object.

     

    Alex Harui

    Flex SDK Developer

    Adobe Systems Inc.

    Blog: http://blogs.adobe.com/aharui

    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points
Choose your region
Security Contact Adobe Report piracy EULAs Permissions and trademarks Careers

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Reviewed by TRUSTe: site privacy statement

Use of this website signifies your agreement to the Terms of Use and Online Privacy Policy (updated 07-14-2009).