在将图像从面板拖放到画布后，如何使用flex4在画布中旋转放置的图像

问题描述

| 这是3D旋转的代码

<s:Rotate3D id=\"rotate3DX\"
                    target=\"{image}\"
                    angleXFrom=\"0\"
                    angleXTo=\"360\"
                    duration=\"2000\"
                    autoCenterTransform=\"true\" />


    <s:Rotate3D id=\"rotate3DY\"
                target=\"{image}\"
                angleYFrom=\"0\"
                angleYTo=\"360\"
                duration=\"2000\"
                autoCenterTransform=\"true\" />

    <s:Rotate3D id=\"rotate3DZ\"
                target=\"{image}\"
                angleZFrom=\"0\"
                angleZTo=\"360\"
                duration=\"2000\"
                autoCenterTransform=\"true\" />

</fx:Declarations>

这个鳕鱼的拖放

private function mouseDownHandler(event:MouseEvent):void
            {
                var dragInitiator:Image=Image(event.currentTarget); 
                var ds:DragSource = new DragSource(); 
                ds.addData(dragInitiator,\"img\"); 
                DragManager.doDrag(dragInitiator,ds,event); 

            }

            private function dragenterHandler(event:DragEvent):void
            {
                if (event.dragSource.hasFormat(\"img\")) 
                    DragManager.acceptDragDrop(Canvas(event.currentTarget)); 

            }
            private function dropHandler(event:DragEvent):void {
                if (event.dragSource.hasFormat(\"img\")) {
                    var draggedImage:Image = 
                        event.dragSource.dataForFormat(\'img\') as Image;
                    var dropCanvas:Canvas = event.currentTarget as Canvas;

                    // Since this is a copy,create a new object to 
                    // add to the drop target.
                    var newImage:Image=new Image();
                    newImage.source = draggedImage.source;
                    newImage.x = dropCanvas.mouseX;
                    newImage.y = dropCanvas.mouseY;
                    newImage.height=200;
                    newImage.width=200;
                    newImage.addEventListener(MouseEvent.MOUSE_MOVE,mouseDownHandler);
                    newImage.addEventListener(DragEvent.DRAG_COMPLETE,dragCompleteHandler);
                    dropCanvas.addChild(newImage);
                    newImage.id=draggedImage.id;
                }
            }


            public function button1_clickHandler(event:MouseEvent):void
            {
                canvas1.graphics.clear();
            }
            private function dragCompleteHandler(event:DragEvent):void {
                var draggedImage:Image = 
                    event.dragInitiator as Image;
                var dragInitCanvas:Canvas = 
                    event.dragInitiator.parent as Canvas;

                if (event.action == DragManager.MOVE)
                    dragInitCanvas.removeChild(draggedImage);
            }          

图像是

<mx:Panel width=\"216\" height=\"349\" title=\"Parts\" color=\"#010101\"
                      cornerRadius=\"10\">
                <mx:Image source=\"images\\8.png\" 
                          width=\"128\" height=\"76\" 
                          mouseMove=\"mouseDownHandler(event)\"
                          id=\"image\"


                         />
                <mx:Image source=\"images\\10.jpg\" 
                          width=\"110\" height=\"87\" 
                          mouseMove=\"mouseDownHandler(event)\"/>
                <mx:Image source=\"images\\9.jpg\" 
                          width=\"111\" height=\"88\" 
                          mouseMove=\"mouseDownHandler(event)\"/>
            </mx:Panel>

放置图像的画布是

        <mx:Canvas id=\"canvas1\"
                   height=\"349\" width=\"1080\" 
                   backgroundColor=\"#BFBDBD\"
                   cornerRadius=\"10\"
                   borderColor=\"#000000\"
                   borderVisible=\"true\"
                   dropShadowVisible=\"true\"
                   dragenter=\"dragenterHandler(event)\"
                   dragDrop=\"dropHandler(event)\"
                  >




            <mx:ControlBar width=\"100%\" cornerRadius=\"0\">
                <s:Button id=\"buttonX\"
                          label=\"Rotate3D X-axis\"
                          click=\"rotate3DX.play();\" />
                <s:Button id=\"buttonY\"
                          label=\"Rotate3D Y-axis\"
                          click=\"rotate3DY.play();\" />
                <s:Button id=\"bButtonZ\"
                          label=\"Rotate3D Z-axis\"
                          click=\"rotate3DZ.play();\" />
            </mx:ControlBar>

        </mx:Canvas>

我想在将图像拖放到canvas中之后旋转图像。我能够在面板中旋转图像。     

解决方法

在这种情况下，您将绑定效果的目标。仅将ID从一个组件切换到另一组件实际上是行不通的。对原始图像的引用是实际绑定的内容。您最好在dropHandler方法中以编程方式切换效果的目标。

// DON\'T DO THIS
newImage.id=draggedImage.id;

// DO THIS
rotate3DY.target = newImage;
rotate3DZ.target = newImage;