Problem beim Drehen des Bildes gegen den Uhrzeigersinn in Action Script 3

Question

In einem .swf Objekt, rotiere ich Bilder in eine Richtung: im Uhrzeigersinn (+ 90 °), mit der eventRotateHit Funktion. Es klappt!

Ich muss eine Gegenuhrzeigersinn (-90 °) Funktion erstellen: eventRotateHit2. Diese Funktion funktioniert nicht: Das Bild verschwindet. Ich denke, es ist, weil das Rotationszentrum falsch ist, aber ich bin mir nicht sicher. Und ich weiß nicht, wie ich es ändern soll.

Können Sie mir bitte helfen?

Frederic

Mein Code:

package Classes.image 

{ 
     import fl.controls.Button; 
     import flash.display.Bitmap; 
     import flash.display.MovieClip; 
     import Classes.utils.*; 
     import Classes.*; 
     import flash.events.*; 
     import flash.text.TextField; 
     import flash.text.StyleSheet; 
     import flash.utils.ByteArray; 
     import flash.display.BitmapData; 
     import com.adobe.images.JPGEncoder; 

     public class imgBox extends MovieClip 
     { 
       public var _img         : imgHelper; 
       private var _MAX_WIDTH       : Number; 
       private var _MAX_HEIGHT       : Number; 
       private var boxFrame:MovieClip; 
       private var statusMsg:TextField; 

       public var byteData:ByteArray; 

       public function imgBox(w:Number,h:Number,_bitmap:Bitmap) 
       { 
         _MAX_WIDTH = w; 
         _MAX_HEIGHT = h; 

         var borderColor:uint = 0x666666; 
         var borderSize:uint = 1; 
         var vMenu:verticalMenu; 

         _img = new imgHelper(_bitmap); 
         _img.addEventListener("invalidate", eventImageInvalidated); 
         if (_bitmap.width > _MAX_WIDTH || _bitmap.height > _MAX_HEIGHT) 
           _img.resizePic(_MAX_WIDTH, _MAX_HEIGHT, false); 

         boxFrame = new MovieClip; 
         boxFrame.graphics.lineStyle(borderSize, borderColor); 
         boxFrame.graphics.drawRect(0, 0, _img.width+4,_img.height+4); 
         addChild(boxFrame); 

         addChild(_img); 
         boxFrame.x = 60 + _img.theImage.x; 
         boxFrame.y = _img.theImage.y; 
         _img.x = 62; 
         _img.y = 2; 

         //vMenu = new verticalMenu(); 
         //var myMenu:Array = new Array({ label:'Rotate', _function:eventRotateHit });// , 
                     //  { label:'Upload', _function:eventUploadHit }); 
         //vMenu.buildMenu(myMenu); 

         var button:Button = new Button(); 
         button.label = Local.getInstance().getString("rotate"); 
         button.width = 50; 
         button.addEventListener(MouseEvent.CLICK, eventRotateHit); 
         addChild(button); 

         var buttonbis:Button = new Button(); 
         buttonbis.label = Local.getInstance().getString("rotate"); 
         buttonbis.width = 50; 
         buttonbis.y = 50; 
         buttonbis.addEventListener(MouseEvent.CLICK, eventRotateHit2); 
         addChild(buttonbis); 

       } 


       private function eventImageInvalidated(e:Event) { 
         e.stopImmediatePropagation(); 

         dispatchEvent(new Event("invalidate", true, true));// invalidate for re-encoding the image. 

       } 

       private function eventUploadHit(e:*) { 
         trace('Upload Hit'); 
         this.dispatchEvent(new Event("uploadImage")); 
       } 

       public function showStatus(msg:String) { 
           TweenLite.to(boxFrame, 0.5, { height: _img.height + 24 }); 
           var vMenu:verticalMenu = new verticalMenu();; 
           if (statusMsg){ 
             removeChild(statusMsg); 
             statusMsg = null; 
           } 
           statusMsg = new TextField(); 
           statusMsg.htmlText = msg; 
           statusMsg.styleSheet = vMenu._textStyleSheet; 
           statusMsg.width = _img.width; 
           addChild(statusMsg); 
           statusMsg.y = _img.height + 2; 
           statusMsg.x = boxFrame.x + 10; 

       } 

       public function hideStatus(msg:String = "") { 
           if (statusMsg){ 
             removeChild(statusMsg); 
             statusMsg = null; 
           } 
           TweenLite.to(boxFrame, 0.5, { height: _img.height + 4 }); 
       } 

       private function eventRotateHit(e:*) { 
         trace('rotate Image'); 
         if (statusMsg){ 
             removeChild(statusMsg); 
             statusMsg = null; 
           } 

         _img.rotate(Math.PI/2); 
         _img.resizePic(_MAX_WIDTH, _MAX_HEIGHT, false); 
         boxFrame.width = _img.width + 4; 
         boxFrame.height = _img.height + 4; 

         boxFrame.x = 60 + _img.theImage.x; 
         boxFrame.y = _img.theImage.y; 

       } 

       private function eventRotateHit2(e:*) { 
         trace('rotate Image'); 
         if (statusMsg){ 
             removeChild(statusMsg); 
             statusMsg = null; 
           } 

         _img.rotate((-1)*Math.PI/2); 
         _img.resizePic(_MAX_WIDTH, _MAX_HEIGHT, false); 
         boxFrame.width = _img.width + 4; 
         boxFrame.height = _img.height + 4; 

         boxFrame.x = 60 + _img.theImage.x; 
         boxFrame.y = _img.theImage.y;   

       } 

       public function dispose() { 

       } 

       public function prepare(w:Number, h:Number, q:Number) { 
         var btData:BitmapData = _img.resizeBitmapData(w, h); 
         byteData = new JPGEncoder(q).encode(btData); 

       } 

     } 

} 

hier die Drehfunktion:

package Classes.utils 
{ 
    import flash.display.Bitmap; 
    import flash.display.DisplayObject; 
    import flash.display.MovieClip; 
    import flash.net.*; 
    import flash.display.Loader; 
    import flash.events.*; 
    import flash.system.LoaderContext; 
    import flash.text.TextField; 
    import flash.geom.ColorTransform; 
    import flash.geom.Matrix; 
    import flash.display.BitmapData; 
    import Classes.*; 
    import flash.utils.ByteArray; 

    public class imgHelper extends MovieClip 
    { 
     public var tt:TextField; 
     public var theImage:Bitmap; 
     private var myMask:MovieClip; 


     private var _boxDimW:Number; 
     private var _boxDimH:Number; 




     public function imgHelper(img:Bitmap=null) 
     { 
      theImage = img; 
      if (theImage) 
       addChild(theImage); 
      tt = new TextField; 
      tt.text = '0%'; 
     /* addChild(tt);*/ 

     } 

     public override function get width():Number { 
      return theImage.width; 
     } 

     public override function get height():Number { 
      return theImage.height; 
     } 
     public function get _scaleX():Number { 
      return theImage.scaleX; 
     } 
     public function set _scaleX(sx) { 
      theImage.scaleX = sx; 
     } 

     public function get _scaleY():Number { 
      return theImage.scaleY; 
     } 
     public function set _scaleY(sy:Number) { 
      theImage.scaleY = sy; 
     } 

     public function load(url:String) 
     { 
      //trace('loading : ' + url); 
      var loader:Loader = new Loader(); 
      loader.contentLoaderInfo.addEventListener(Event.COMPLETE, picLoaded); 
      loader.contentLoaderInfo.addEventListener(IOErrorEvent.IO_ERROR, errLoading); 
      loader.contentLoaderInfo.addEventListener(ProgressEvent.PROGRESS, progress); 
      var lContext:LoaderContext = new LoaderContext(true); 



      var request:URLRequest = new URLRequest(url); 
      try { 
       loader.load(request,lContext); 


      } catch (error:Error) { 
       trace("Unable to load requested document."); 
      } 

     } 
     private function progress(e:ProgressEvent) 
     { 
      tt.text = Math.round(e.bytesLoaded /e.bytesTotal *100) + '%'; 
     } 

     private function errLoading(e:*) 
     { 
      tt.visible = false; 
      dispatchEvent(new Event("imgLoaded",true,true)); 
     } 

     private function picLoaded(e:*) 
     { 
      var picLoader:Loader = Loader(e.target.loader); 
      theImage = Bitmap(picLoader.content); 
      addChild(theImage); 

      tt.visible = false; 
      dispatchEvent(new Event("imgLoaded",true,true)); 
     } 

     public function resizePic(rW:Number,rH:Number,crop:Boolean=false) 
     { 
      var img = theImage; 
      _boxDimW = rW; 
      _boxDimH = rH; 

      if (img.width > img.height) 
      { 
       img.width = rW; 
       img.height = img.height * img.scaleX; 
      } 
      else 
      { 
       img.height = rH; 
       img.width = img.width * img.scaleY; 
      } 


      if (crop) 
      { 
       if (img.width < img.height) 
       { 
        var oldScaleX = img.scaleX; 
        img.width = rW; 
        img.scaleY += img.scaleX-oldScaleX; 

       } 
       else 
       { 
        var oldScaleY = img.scaleY; 
        img.height = rH; 
        img.scaleX += img.scaleY-oldScaleY; 

       } 

       maskIt(rW, rH); 

      } 
      else { 
       if (img.height < img.width) { 
        img.y=(rH-img.height)/2 
       } 
       else { 
        img.x=(rW-img.width)/2 

       } 
      } 



     } 



     public function resizeBitmapData (rW:Number, rH:Number):BitmapData { 
      var img:Bitmap = new Bitmap(theImage.bitmapData); 
      trace('resize bitmap : ' + img.height + '-' + img.width); 
      trace('resize bitmap : ' + rH + '-' + rW); 
      if (img.width > img.height) { 
        if (img.height>rH) 
         rH = img.height * (rW/img.width); 
        else{ // do not resize 
         rH = img.height; 
         rW = img.width; 
        } 
      } 
      else { 
       if (img.width>rW) 
        rW = img.width * (rH/img.height); 
       else{ // do not resize 
         rH = img.height; 
         rW = img.width; 
        } 

      } 

      var bmpData:BitmapData = new BitmapData(rW, rH); 
      var scaleMatrix:Matrix = new Matrix(rW/img.width , 0, 0, rH/img.height , 0,0); 
      var colorTransform:ColorTransform = new ColorTransform(); 
      bmpData.draw(theImage, scaleMatrix , colorTransform, null, null, true); 
      return (bmpData); 
     } 

     public function rotate(dir:Number) { 


      var workingImage:Bitmap = new Bitmap(theImage.bitmapData.clone()); 
      var bmpData:BitmapData = new BitmapData(workingImage.height, workingImage.width); 
      var transMatrix:Matrix = new Matrix(Math.cos(dir),Math.sin(dir),-Math.sin(dir),Math.cos(dir), workingImage.height,0); 
      var colorTransform:ColorTransform = new ColorTransform(); 
      bmpData.draw(workingImage, transMatrix, colorTransform, null, null, true); 
      TweenLite.to(theImage, 0.5, { autoAlpha:0 }); 
      //removeChild(theImage); 
      theImage = new Bitmap(bmpData); 
      addChild(theImage); 
      //trace(theImage.y + '--' + theImage.x+'--'+theImage.height+'--'+theImage.width); 
      if (theImage.height < theImage.width) { 
        theImage.y += (_boxDimH - theImage.height)/2 
       } 
       else { 
        theImage.x +=(_boxDimW-theImage.width)/2 

       } 


      theImage.alpha = 0; 
      TweenLite.to(theImage, 1, { autoAlpha:1 }); 
      trace('sending event !'); 
      dispatchEvent(new Event("invalidate", true, true));// invalidate for re-encoding the image. 
     } 


     public function maskIt(w:Number, h:Number) 
     { 
      if (myMask) { 
       removeChild(myMask); 
       myMask = null; 
      } 
      myMask = new MovieClip(); 
      myMask.graphics.beginFill(0xFFCC00); 
      myMask.graphics.drawRect(0, 0, w,h); 
      addChild(myMask); 
      this.mask = myMask; 
     } 

     public function dispose() { 

     } 

    } 

} 

Dank für alle !!!

Answer 1

Ihr Problem ist in der Rotationsmatrix:

Ihre Bitmap dreht sich um seinen Ursprung (0,0), so bei 90 Grad, befindet sich außerhalb des sichtbaren Bereichs auf der linken Seite. Aus diesem Grund haben Sie es entlang der X-Achse um die Höhe des ursprünglichen Bildes verschoben - und es funktioniert.

Jetzt, wenn Sie das Bild auf 270 Grad (oder -90 Grad, genau das gleiche) drehen, befindet es sich über dem sichtbaren Bereich. So werden Sie jetzt übersetzen, um es entlang der y-Achse durch die Breite des Originalbildes:

var dir:Number = Math.PI*1.5; // the same as 3*Math.PI/2 
var a:Number = Math.cos(dir); 
var b:Number = Math.sin(dir); 
var c:Number = -b; 
var d:Number = a; 
var transMatrix:Matrix = new Matrix(a,b,c,d,0,workingImage.width); 

Answer 2

Ich denke, Sie brauchen kurze Rotation, das ist eine Formel, um den kürzesten Weg in die neue Richtung zu finden. Problem mit Rotation ist, wenn Sie (mit normaler Rotationseigenschaft) von 0 bis -90 mit einer Geschwindigkeit von 1 drehen, wird es (360-90 =) 270 Schritte benötigen. Mit einer kurzen Rotation benötigen Sie nur 90 Schritte (da die meisten Kreise 360 ​​Grad sind).

Ich hoffe, dass Sie dieses Stück Code wird kurze Drehung helfen zu entdecken:

var startValue:int = targetMC.rotation = 0; 
    var endValue:int = -90; 
    var position:Number = 0; // should always be ratio betweeen 0-1 

    addEventListener(Event.ENTER_FRAME, update); 

    function update(e:Event=null):void 
    { 
     if (position < 1) 
     { 
     position += 0.05; 
     targetMC.rotation = startValue + (((endValue - startValue + 540) % 360) - 180) * position; 
     } 
    }