在Action Script 3中逆时针方向旋转图片的问题

Question

在 .swf 对象中，我使用 eventRotateHit 函数沿一个方向旋转图片：顺时针（+90°）。有用！

我需要创建一个逆时针（-90°）函数：eventRotateHit2。 此功能不起作用：图片消失。 我认为这是因为旋转中心是假的，但我不确定。而且我不知道如何改变它。

你能帮我吗？

Frederic

我的代码：

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);

                }

        }

}

这里是旋转函数：

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() {

        }

    }

}

谢谢大家！！！

Answer 1

您的问题在于旋转矩阵：

您的位图围绕其原点 (0,0) 旋转，因此在 90 度时，它位于左侧可视区域之外。因此，您已将其沿 x 轴平移了原始图像的高度 - 并且它有效。

现在，当您将图像旋转到 270 度（或 -90 度，一样）时，它位于可视区域上方。因此，您现在必须沿 y 轴将其平移原始图像的宽度：

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

我认为你需要短轮换，这是一个找到通往新方向的最短路径的公式。旋转的问题是，如果您以 1 的速度从 0 旋转（使用正常旋转属性）到 -90，则需要 (360-90=) 270 步。对于短旋转，您只需要 90 步（因为大多数圆都是 360 度）。

我希望这段代码将有助于探索短轮换：

    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;
        }
    }