9/30/2011 6:00:46 AM

Title: Group Child Resize Issue

---

Hi,

I am making line at run time in <s:Group/> (with width = 400) component as per Mouse X and Mouse Y click Position.

For the time if MouseX is 250. the line will be added at that position.Now i resize the group to width 200.It is showing the line

out of the group at the same position 250 but now the width of group is 200.

How can i show the line same as in full and half view.



Here is the Code:

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

               xmlns:s="library://ns.adobe.com/flex/spark"

               xmlns:mx="library://ns.adobe.com/flex/mx"

               minWidth="955"

               minHeight="600"

               creationComplete="creationHandler()">

    <fx:Declarations>

        <!-- Place non-visual elements (e.g., services, value objects) here -->

    </fx:Declarations>

    <fx:Script>

        <![CDATA[

            import mx.controls.Alert;

            import mx.core.IVisualElement;

            import mx.core.UIComponent;

            private var selShape:String;

            private var xStart:Number;

            private var yStart:Number;

            private var currentRectName:String;

 

            //Creation Complete Handler of application

            private function creationHandler():void

            {

                canCont.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);

                canCont.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);

                canCont.addEventListener(MouseEvent.ROLL_OUT, rollOutHandler);

            }

 

            private function mouseDownHandler(evt:MouseEvent):void

            {

                xStart=evt.currentTarget.mouseX;

                yStart=evt.currentTarget.mouseY;

                var uniqueNum:Date=new Date();

                currentRectName=String(uniqueNum.getDate());

                canCont.addEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

            }

 

            private function rollOutHandler(evt:MouseEvent):void

            {

                try

                {

                    canCont.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

                    var tempUi:DisplayObject=canCont.getChildByName(currentRectName);

                    tempUi.name="";

                }

                catch (ex:Error)

                {

                }

 

            }

 

 

            //To Create the shape

            private function mouseUpHandler(evt:MouseEvent):void

            {

                resetTool(evt);

            }

 

 

            private function resetTool(evt:MouseEvent):void

            {

                canCont.removeEventListener(MouseEvent.MOUSE_MOVE, mouseMoveHandler);

                try

                {

                    var tempUi:DisplayObject=canCont.getChildByName(currentRectName);

                    tempUi.name="";

                }

                catch (ex:Error)

                {

                }

                ;

            }

 

            private var component1:UIComponent

 

            private function mouseMoveHandler(evt:MouseEvent):void

            {

 

                try

                {

 

                    var tempUi:DisplayObject=canCont.getChildByName(currentRectName);

                    canCont.removeElement(tempUi as IVisualElement);

                }

                catch (ex:Error)

                {

                    trace("error occurs")

                }

                ;

 

                var xEnd:Number=evt.currentTarget.mouseX;

                var yEnd:Number=evt.currentTarget.mouseY;

 

 

                component1=new UIComponent();

                var sprite:Sprite=new Sprite();

                sprite.graphics.lineStyle(1, 0xff0000);

                sprite.graphics.moveTo(xStart, yStart);

                sprite.graphics.lineTo(xEnd, yEnd);

                sprite.graphics.endFill();

                component1.addChild(sprite);

                component1.name=currentRectName;

                canCont.addElement(component1);

                //canCont.addChild(component1);

 

 

            }

 

            private function resizeClickHandler(evt:Event):void

            {

                if (evt.currentTarget.id == "incWid")

                {

                    canCont.width=400;

 

                    trace("canCont.contentWidth : " + canCont.contentWidth);

                }

                else if (evt.currentTarget.id == "decWid")

                {

                    canCont.width=200;

                    trace("canCont.contentHeight : " + canCont.contentHeight);

                }

 

            }

        ]]>

 

    </fx:Script>

 

 

    <s:Group id="canCont"

             width="400"

             height="300"

             x="182"

             y="41">

        <s:Rect width="100%"

                height="100%">

            <s:fill>

                <s:SolidColor color="#000000"/>

            </s:fill>

 

        </s:Rect>

    </s:Group>

    <s:Button label="Increase Width"

              id="incWid"

              click="resizeClickHandler(event)"

              x="277"

              y="430"/>

    <s:Button label="Decrease Width"

              id="decWid"

              click="resizeClickHandler(event)"

              x="497"

              y="430"/>

 

 

</s:Application>

 

Any Suggestion will be really thankful. Thanks

10/3/2011 10:51:09 PM

Type your Reply or Answer