1 Reply Latest reply on Oct 16, 2012 11:31 AM by avdave

    How to rotate a rectangle around centroid in flex 3

    avdave

      I am using matrix.rotate method to rotate the rectangle (box in my case). My rotate event looks like below:

       

      public function transformObject(transformEvent:TransformEvent):void{

              var numChildrn:int = _markedObjectLayer.numChildren;
             
      var tempMatrix: Matrix = null;
             
      var tempx:Number;
             
      var tempy:Number;
             
      for(var i:int = 0; i < numChildrn; i++){
                 
      var chld:MarkedObject = UIComponent.getChildAt(i) MarkedObject
                 
      if (chld.selected){
                     
      var  height:int = (BoxObject) chld.height;
                     
      var  width:int = (BoxObject) chld.width;


                      tempMatrix
      = chld.transform.matrix;


                      

                                      tempx = chld.x;

                                    tempy= chld.y ;




                      tempMatrix
      = MatrixTransformer.transform(tempMatrix,transformEvent.angle);


                      tempMatrix
      .tx=tempx;
                      tempMatrix
      .ty=tempy

                      chld
      .transform.matrix = tempMatrix;
                 
      }
             
      }

              invalidateDisplayList
      ();
         
      }
      }

      The Matrix.transform method calls matrix.rotate method

      public static function transform(sourceMatrix:Matrix, rotation:Number=0 ):Matrix {

              sourceMatrix = MatrixTransformer.rotate(sourceMatrix, rotation, "degrees");

             
      return sourceMatrix;
         
      }



         
      /**
           * Rotates a matrix and returns the result. The unit parameter lets the user specify "degrees",
           * "gradients", or "radians".
           */

         
      public static function rotate(sourceMatrix:Matrix, angle:Number, unit:String = "radians"):Matrix {
             
      if (unit == "degrees")
             
      {
                  angle
      = Math.PI * 2 *( angle / 360);
             
      }

              sourceMatrix
      . rotate(angle)
             
      return sourceMatrix;
         
      }

      The issue is that x and y are left corener of the box and hence it is rotating around left corner. However, if I try to give temp.x and temp.y as centroid value it does not rotate around centroid?

      I would really appreciate if someone can tell me what am I doing wrong here

      Thanks Akshay

        • 1. Re: How to rotate a rectangle around centroid in flex 3
          avdave Level 1

          Figured it out:

           

            Use following code:

           

          tempMatrix = chld.transform.matrix;

          tempx = chld.x + widht/2;

          tempy= chld.y +height/2 ;

           

          //the important step is to translate the code to appropriate position before and after rotation

              tempMatrix.translate(-1*tempx,-1*tempy);
              tempMatrix = MatrixTransformer.transform(tempMatrix,transformEvent.angle);

          tempMatrix.translate(tempx,tempy);

           

          chld.transform.matrix = tempMatrix;