8 Replies Latest reply on Mar 27, 2009 1:17 PM by ahmed.malik

    Rotation Problems

    ahmed.malik Level 1
      I have a canvas on which i drag and drop an image and user has an option to rotate it. When image is rotated using mx.effects.Rotate it adds extra space to canvas size.. means increases maximum horizontal and vertical scroll positions. After banging my head with walls I dropped the idea of rotating it with effect and used the following code, but it also showed the same problem. I do not want to use BitmapData to redraw as do not want to lose image quality. Also image size needs to be adjusted after rotation. Please help, badly stuck :(

      var m : Matrix = img.transform.matrix;
      var p:Point = m.transformPoint(new Point(img.width/2, img.height/2));
      m.translate(-p.x, -p.y);
      m.rotate(angle)
      m.translate(p.x, p.y);
      img.transform.matrix = m;

        • 1. Re: Rotation Problems
          run,ryan! Level 3
          set scrollpolicy of canvas to OFF
          • 2. Re: Rotation Problems
            ahmed.malik Level 1
            scroll policy is already off...
            I am creating a photo album.. and this image can be moved/zoomed/transformed and of course rotated :)

            I need to rotate image and set its new width and height with respect to container by keeping the aspect ratio. So even if scroll policy is off.. image can still move within the container with mouse move and button down.. and can see the extra space added.
            • 3. Re: Rotation Problems
              run,ryan! Level 3
              if scroll policy is set to OFF, there is no scrollbar for canvas at all, if you didn't set resizeToFitcontent, how do you see the extra space added?
              • 4. Re: Rotation Problems
                ahmed.malik Level 1
                if i set horizontalScrollPolicy="off" and verticalScrollPolicy="off"

                scrollbars just hide themselves... and i can scroll the canvas using the following method.. user needs to adjust the image in canvas.. so this is the must needed thing as well. Please find attached the onMouseMoveHandler
                • 5. Re: Rotation Problems
                  run,ryan! Level 3
                  set a mask for the canvas so it will have a limited stage, will it fix your problem? or reposition the image after rotation?
                  • 6. Re: Rotation Problems
                    ahmed.malik Level 1
                    well not sure if this will solve the problem or not.. though sounds an interesting suggestion.. already on my way to build a sample test and wud let u know if it works.
                    • 7. Re: Rotation Problems
                      ahmed.malik Level 1
                      nopes it does not work... :(

                      there must be some way to refresh canvas and remove extra maximum scroll positions added.. And I also need to keep another thing in consideration. What ever approach i use, I also need to update my Image Size with the following formula. As you said update image on rotation, I only cant think of when and where to update image size after rotation and remove canvas extra spaces :'(

                      if (container.width >= container.height) {
                      image.width = container.width;
                      image.height = (1/aspectRatioOf-ImageContent) * container.width;
                      }
                      else if (container.height > container.width) {
                      image.height = container.height;
                      image.width = aspectRatioOf-ImageContent * container.height;
                      }
                      • 8. Re: Rotation Problems
                        ahmed.malik Level 1
                        I have concluded that BitmapData does not reduce the image quality. So got the solution to my problem, please find attached the code, might help someone.

                        first of all

                        //duplicate image.content as Bitmap and save for further use in Rotation
                        var imageBitmapData : BitmapData = Bitmap(image.content).bitmapData;
                        image.data.content = new Bitmap(imageBitmapData);

                        //then use the following method for rotating image
                        private function rotateImage(image: Image, degrees : Number) : void {
                        image.addEventListener("sourceChanged", onImageLoadCompleteHandle);
                        var matrix : Matrix = getRotatedMatrix(image, degrees);
                        this. image.source = getBitmapImageOfRotatedMatrix(image, matrix, degrees);
                        }

                        //gets the rotated matrix for a new Matrix();
                        private function getRotatedMatrix(image : Image, degrees : Number) : Matrix {
                        var radians : Number = degreesToRadians(degrees);
                        var m : Matrix = new Matrix();
                        var p:Point = m.transformPoint(new Point(image.data.content.width/2, image.data.content.height/2));
                        m.translate(-p.x, -p.y);
                        m.rotate(radians);

                        if ((degrees == 90) || (degrees == -90)) {
                        m.translate(p.y, p.x);
                        } else {
                        m.translate(p.x, p.y);
                        }
                        return m;
                        }

                        /**
                        * Pass in reference to of the Image control with the original image and the matrix
                        *
                        * @param img
                        * @param matrix
                        * @return
                        *
                        */
                        private function getBitmapImageOfRotatedMatrix(img:Image, matrix:Matrix, degrees : Number) : Bitmap {
                        var bd:BitmapData;
                        try {
                        if ((degrees == 90) || (degrees == -90)) {
                        bd = new BitmapData(img.data.content.height, img.data.content.width);
                        } else {
                        bd = new BitmapData(img.data.content.width, img.data.content.height);
                        }

                        bd.draw(img.data.content, matrix);
                        var bmp : Bitmap = new Bitmap(bd);
                        } catch (err : Error) {
                        Alert.show(err.message + "\n" + err.getStackTrace());
                        }
                        return bmp;
                        }
                        }

                        this method resizes my image to the size of container with respect to the following logic, if someone is interested in the methods used in the code, please let me know
                        //if (container.width >= container.height) {
                        //image.width = container.width;
                        //image.height = (1/aspectRatioOf-ImageContent) * container.width;
                        //}
                        //else if (container.height > container.width) {
                        //image.height = container.height;
                        //image.width = aspectRatioOf-ImageContent * container.height;
                        //}
                        private function onImageLoadCompleteHandle(event : Event) : void {

                        img.maintainAspectRatio = false;

                        var imageDim : Dimension = new Dimension(img.height, img.width);
                        var parentDim : Dimension = new Dimension(img.parent.width, img.parent.height);

                        var newDimensions : Dimension = UIDrawing.getImageNewDimensions(imageDim, parentDim);
                        img.width = newDimensions.Width;
                        img.height = newDimensions.Height;

                        img.removeEventListener("sourceChanged", onImageLoadCompleteHandle);
                        }