8 Replies Latest reply on Jul 10, 2009 12:20 PM by rckehoe

    Removing canvas child

    rckehoe Level 1

      I am dynamically adding image children to a mx:canvas... I don't know how to do this but I want a user to be able to drag and drop the image from the canvas to a picture of a trash can to remove this image child from the canvas completely.

       

      The code all works except for the delting part... I don't know how to obtain the child ID or whatever I need to removeChild. Here is my code:

       

      private function performDelete(event:DragEvent):void {
                     
                      var RemItem:Object = event.currentTarget;
                      cvs.removeChild(RemItem);
                
      }

       

      This is the functon that is called when the object is dragged from the canvas to the trash can.... It doesn't work. Obviously.

        • 1. Re: Removing canvas child
          Gregory Lafrance Level 6

          I would think that your code might work. Are you getting an error?

          • 2. Re: Removing canvas child
            rckehoe Level 1

            I get this error in the problems console:

             

            1118: Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:DisplayObject.

            • 3. Re: Removing canvas child
              rgadiparthi Level 2

              try doing this way

                cvs.removeChild(RemItem as DisplayObject);

              • 4. Re: Removing canvas child
                rckehoe Level 1

                I get this error:

                The supplied DisplayObject must be a child of the caller.

                • 5. Re: Removing canvas child
                  rgadiparthi Level 2

                  May be you should try

                   

                  private function performDelete(event:DragEvent):void {
                                  
                                   var RemItem:DisplayObjec = event.currentTarget;

                                  cvs.removeChild(RemItem);          
                  }

                   

                  it should work. did you check whether your event.current has Image ??

                   

                  or else please post your code.

                   

                  Regards,

                  Ranga

                  • 6. Re: Removing canvas child
                    rckehoe Level 1

                    I get an error in the problem console:

                    Implicit coercion of a value with static type Object to a possibly unrelated type flash.display:DisplayObject.

                     

                    so i di this:

                    var RemItem:DisplayObject = event.currentTarget as DisplayObject;
                    cvs.removeChild(RemItem);

                     

                    Then I get this error when I run the app:

                    The supplied DisplayObject must be a child of the caller

                     

                    Here is my full code:

                     

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" creationComplete="GetItems();" xmlns:mx="http://www.adobe.com/2006/mxml" width="700" height="400" cornerRadius="5" backgroundColor="#E5E5E5" borderStyle="solid" borderThickness="2">
                       
                        <mx:Script>
                            <![CDATA[
                           
                                import mx.events.DropdownEvent;
                                import mx.core.IUIComponent;
                                import mx.graphics.ImageSnapshot;
                                import mx.controls.Alert;
                                import mx.core.Application;
                                import mx.controls.Button;
                                import mx.core.DragSource;
                                import mx.collections.ArrayCollection;
                                import mx.managers.DragManager
                                import mx.events.DragEvent
                                import mx.core.UIComponent
                                import mx.controls.Image
                                import mx.graphics.codec.JPEGEncoder;
                               
                                [Bindable] private var _UserId:String = Application.application._UserId;
                                [Bindable] private var PASSCODE:String = Application.application.PASSCODE;
                                [Bindable] private var URL:String = Application.application.URL;
                               
                                private function GetItems():void {
                                   
                                    var InsiParams:Object = {PASSCODE:PASSCODE};
                                   
                                    Insi.method="POST";
                                    Insi.url=URL+"stage_plot_graphics.php";
                                    Insi.showBusyCursor=true;
                                    Insi.send(InsiParams);
                                   
                                }
                               
                                private function acceptIt(event:DragEvent):void {
                                var dropTarget:Canvas = event.currentTarget as Canvas;
                                  DragManager.acceptDragDrop(dropTarget);
                                }
                               
                                private function DeleteAcceptIt(event:DragEvent):void {
                                var dropTarget:Image = event.currentTarget as Image;
                                  DragManager.acceptDragDrop(dropTarget);
                                }
                               
                                private function performDrop(event:DragEvent):void {
                           
                                   if(event.dragSource.hasFormat("items"))
                                   {
                                   var items:Array = event.dragSource.dataForFormat("items") as Array;
                                   var img:Image = new Image()
                                   img.x=event.localX - (30/2);
                                   img.y=event.localY - (30/2);
                                   img.source=URL+"stage_plot/"+items[0].image;
                                   img.addEventListener(MouseEvent.MOUSE_MOVE,dragIt);
                                   cvs.addChild(img);
                                   }
                                   else
                                   {
                                       event.dragInitiator.x=event.localX
                                       event.dragInitiator.y=event.localY
                                   }
                              
                                }
                               
                                private function performDelete(event:DragEvent):void {
                                   
                                    var RemItem:DisplayObject = event.currentTarget as DisplayObject;
                                    cvs.removeChild(RemItem); 
                              
                                }
                               
                                private function dragIt(event:MouseEvent):void {

                     

                                    var img:Image = event.currentTarget as Image;
                                   
                                    var dsource:DragSource = new DragSource();
                                    dsource.addData(img, 'img');
                                   
                                    var dragProxy:Image = new Image();
                                    var bmp:Bitmap = new Bitmap(Bitmap(event.currentTarget.content).bitmapData);
                                    dragProxy.source = bmp;
                                   
                                    DragManager.doDrag(img, dsource, event, dragProxy);
                                   
                                }
                               
                                private function SaveStagePlot():void {

                     

                                    var bmpd:BitmapData = new BitmapData(cvs.width,cvs.height);
                                    bmpd.draw(cvs);
                                   
                                    var jpgenc:JPEGEncoder = new JPEGEncoder(100);
                                    var imgByteArray:ByteArray = jpgenc.encode(bmpd);
                                   
                                    var fl:File = File.documentsDirectory.resolvePath("StagePlots/snapshot.jpg");
                                    var fs:FileStream = new FileStream();
                                   
                                    fs.open(fl,FileMode.WRITE);
                                    fs.writeBytes(imgByteArray);
                                    fs.close();
                                   
                                }
                               
                            ]]>
                        </mx:Script>
                       
                        <mx:HTTPService id="Insi" />
                       
                        <mx:Canvas horizontalScrollPolicy="off" verticalScrollPolicy="off" x="193" y="62" width="422" height="298" borderStyle="solid" borderThickness="1" backgroundColor="#FFFFFF" id="cvs" dragEnter="acceptIt(event)" dragDrop="performDrop(event)">
                           
                        </mx:Canvas>
                       
                        <mx:Image id="DaTrash" source="trash_can.png" right="-4" bottom="-2" dragEnter="DeleteAcceptIt(event)" dragDrop="performDelete(event)"/>
                       
                        <mx:Accordion x="10" y="62" width="175" height="324">
                      
                            <mx:Repeater dataProvider="{Insi.lastResult.root.category}" id="Reap">
                          
                                <mx:Canvas label="{Reap.currentItem.title}" width="100%" height="100%">
                                       <mx:List dragEnabled="true" itemRenderer="comps.StagePlot_Image_View" width="100%" height="100%" x="0" y="0" dataProvider="{Reap.currentItem.ins}" labelField="title" />
                                </mx:Canvas>
                              
                            </mx:Repeater>
                          
                    </mx:Accordion>
                        <mx:Label x="10" y="38" text="Drag and Drop objects from the left to the canvas on the right. Construct your Stage Plot and then click save." fontSize="8"/>
                        <mx:Label x="10" y="12" text="Stage Plot Design" fontSize="10" fontWeight="bold"/>
                        <mx:Button x="623" y="10" label="Cancel"/>
                        <mx:Button x="561" y="10" label="Save" click="SaveStagePlot();"/>
                        <mx:Label y="368" text="++ Audience Here ++" fontStyle="italic" x="193" width="422" textAlign="center"/>   
                    </mx:Canvas>

                    • 7. Re: Removing canvas child
                      rgadiparthi Level 2

                      in your code

                       

                      var RemItem:DisplayObject = event.currentTarget as DisplayObject;

                       

                      means DaTrash, not the Item your dragging

                       

                      try this code

                      private function performDelete(event:DragEvent):void

                           {

                                      var RemItem:Image = event.dragSource.dataForFormat('img') as Image;               

                                      cvs.removeChild(RemItem);           

                           }

                       

                      Regards,

                      Ranga

                      • 8. Re: Removing canvas child
                        rckehoe Level 1

                        You are a freakin Genius!

                         

                        Thanks for the help!