after dropping the image from panel to canvas, how can the dropped image be rotated in canvas using flex4

this is the code for 3d rotation

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

this the cod for drag and drop

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

the images are

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

the canvas in which images are dropped is

        <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();" />
     开发者_JAVA百科           <s:Button id="bButtonZ"
                          label="Rotate3D Z-axis"
                          click="rotate3DZ.play();" />
            </mx:ControlBar>

        </mx:Canvas>

i want to rotate the image after dropping them in the canvas.i am able to rotate them in the panel.

In this case, you are binding the target of the effect. Simply switching the ID from one component to another won't actually work. The reference to the original image is what is actually bound. You would be better off programmatically switching the target of the effect in the dropHandler method.

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

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