8 Replies Latest reply on Nov 13, 2009 10:03 PM by Flex harUI

    Rasterize a Transformed Vector without Pixelation

    JohnBailey-NovelaStudios Level 1

      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/MatriciesAndDimensions.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-without.html

        • 1. Re: Rasterize a Transformed Vector without Pixelation
          Flex harUI Adobe Employee

          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

          • 2. Re: Rasterize a Transformed Vector without Pixelation
            JohnBailey-NovelaStudios Level 1

            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.

            • 3. Re: Rasterize a Transformed Vector without Pixelation
              Flex harUI Adobe Employee

              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

              • 4. Re: Rasterize a Transformed Vector without Pixelation
                JohnBailey-NovelaStudios Level 1

                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

                • 5. Re: Rasterize a Transformed Vector without Pixelation
                  JohnBailey-NovelaStudios Level 1

                  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.
                  • 6. Re: Rasterize a Transformed Vector without Pixelation
                    Flex harUI Adobe Employee

                    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

                    • 7. Re: Rasterize a Transformed Vector without Pixelation
                      JohnBailey-NovelaStudios Level 1

                      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?

                      • 8. Re: Rasterize a Transformed Vector without Pixelation
                        Flex harUI Adobe Employee

                        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