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;


      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;



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


                  or else please post your code.




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


                    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">
                                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};
                                private function acceptIt(event:DragEvent):void {
                                var dropTarget:Canvas = event.currentTarget as Canvas;
                                private function DeleteAcceptIt(event:DragEvent):void {
                                var dropTarget:Image = event.currentTarget as Image;
                                private function performDrop(event:DragEvent):void {
                                   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);
                                private function performDelete(event:DragEvent):void {
                                    var RemItem:DisplayObject = event.currentTarget as DisplayObject;
                                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);
                                    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();
                        <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: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: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"/>   

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






                      • 8. Re: Removing canvas child
                        rckehoe Level 1

                        You are a freakin Genius!


                        Thanks for the help!