7 Replies Latest reply on Aug 18, 2009 9:15 PM by bendayan

    Problem drawing a line dynamically

    bendayan

      Hi there. I want to draw a line between two points dynamically, that's mean, clicking on a canvas the first time will give the origin of the line, and clicking again, will give the end of the line (segment/stroke). I'll appreciate any help with this issue. Thanks in advance.

        • 2. Re: Problem drawing a line dynamically
          babo_ya Level 3

          on creationComplete event handler add events..

           

          addEventListener(MouseEvent.MOUSE_DOWN, onMouseDownHandler);

          addEventListener(MouseEvent.MOUSE_UP, onMouseUpHandler);

           

           

          private function onMouseDownHandler(event:MouseEvent):void

          {

               startPtn = new Point(event.target.mouseX, event.target.mouseY);

           

               addEventListener(Event.ENTER_FRAME, onEnterFrameHandler);

           

               drawing = true;

           

          }

          private function onMouseUpHandler(event:MouseEvent):void

          {

               drawing = false;

               removeEventListener(Event.ENTER_FRAME, onEnterFrameHandler);

          }

          private function onEnterFrameHandler(event:Event):void

          {

               if(drawing)

               {

                    var g:Graphic = this.graphics;

           

                    g.clear();

                    g.moveTo(startPtn.x, startPtn.y);

                    g.lineTo(this.mouseX, this.mouseY);

                    g.endFille();

           

               }

           

          }

           

          something along this line..

          1 person found this helpful
          • 3. Re: Problem drawing a line dynamically
            bendayan Level 1

            Hi Atta. Thanks for your reply. The problem is that I only got the MXML file, but nothing about the AS one. Sorry, but without it, I got nothing indeed. The page you directed me to have the videos apparently erased, because Adobe said "the page do not exsist".and the beautiful article promeses a continuation that I dont have. Please, if you dont mind, send by email or post the AS code, in order for me to complete my project. Thanks.

            • 4. Re: Problem drawing a line dynamically
              bendayan Level 1

              Hi babo_ya. I tried to test your code, but didn't work and I don't know why. I'm new to Flex and AS3 and I'm sure I'm missing something. Please, send by email or post the whole code, including the <mx.Application> tag. thanks a lot for your response.

              • 5. Re: Problem drawing a line dynamically
                ShardulSingh Level 3

                Hi,

                pls find the solution of your problem with code below,and let me know if you have any issue.

                 

                 

                Main.mxml

                 

                 

                 

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

                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

                      layout="vertical" verticalAlign="middle" xmlns:local="*">

                      <local:DrawingCanvas width="400" height="500"/>

                </mx:Application>

                 

                 

                 

                DrawingCanvas

                 

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

                <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFffff"

                      width="400" height="300"

                      creationComplete="onCreationComplete()"

                        xmlns:local="*">

                      <mx:Script>

                            <![CDATA[

                                  private function onCreationComplete():void

                                  {

                                        this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);

                                        this.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);

                                        this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

                                  }

                                 

                                  private var isMouseDown : Boolean;

                                  private var counter : Number = 0;

                                  private var myShape : Shape = new Shape();

                                  private var origin:Point;

                                  private var destination:Point;

                                  private function onMouseDown(event : MouseEvent):void

                                  {

                                       

                                        isMouseDown = true;

                                        origin = new Point(event.localX,event.localY);

                                  }

                                 

                                  private function onMouseMove(event : MouseEvent):void

                                  {

                                        if(isMouseDown == true)

                                        {

                                              destination = new Point(event.localX,event.localY);

                                             

                                              var lineThickness:Number = 2;

                                              var lineColor:Number = 0x000000;

                                              var lineAlpha:Number = 1;

                                             

                                              myShape.graphics.clear();

                                              myShape.graphics.lineStyle(lineThickness,lineColor,lineAlpha);

                                              myShape.graphics.moveTo(origin.x,origin.y);

                                              myShape.graphics.lineTo(destination.x,destination.y);

                                        }    

                                  }

                                 

                                  private function onMouseUp(event  : MouseEvent):void

                                  {

                                        this.rawChildren.addChild(myShape);

                                        isMouseDown = false;

                                  }

                            ]]>

                      </mx:Script>

                </mx:Canvas>

                 

                 

                 

                with Regards,

                Shardul Singh Bartwal

                • 6. Re: Problem drawing a line dynamically
                  bendayan Level 1

                  Hi, Shardul.

                  I tryied your code, and got the following error: "Whitespace is not allowed before an XML Processing Instruction (<? ... ?>)"

                   

                  The way I placed your code is:  // somehow I feel that wasn't the right way to place the code???

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

                   

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

                   

                  <mx:Application

                   

                   

                  xmlns:mx="http://www.adobe.com/2006/mxml

                  "

                   

                  layout="

                   

                  vertical" verticalAlign="middle" xmlns:local="*"

                  >

                   

                   

                   

                  <local:DrawingCanvas width="400" height="500"

                  />

                   

                  </mx:Application>

                   

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

                   

                  <mx:Canvas

                   

                   

                  xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="0xFFffff

                  "

                   

                  width="

                   

                  400" height="300

                  "

                   

                  creationComplete="onCreationComplete()"

                   

                  xmlns:local="

                   

                  *"

                  >

                   

                   

                   

                  <mx:Script>

                   

                  <![CDATA[

                   

                   

                   

                  private function onCreationComplete():

                  void

                   

                  {

                   

                   

                   

                  this

                  .addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);

                   

                   

                   

                  this

                  .addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);

                   

                   

                   

                  this

                  .addEventListener(MouseEvent.MOUSE_UP,onMouseUp);

                   

                  }

                   

                   

                   

                   

                   

                  private var

                  isMouseDown : Boolean;

                   

                   

                   

                  private var

                  counter : Number = 0;

                   

                   

                   

                  private var myShape : Shape = new

                  Shape();

                   

                   

                   

                  private var

                  origin:Point;

                   

                   

                   

                  private var

                  destination:Point;

                   

                   

                   

                  private function onMouseDown(event : MouseEvent):

                  void

                   

                  {

                   

                   

                   

                  isMouseDown =

                   

                  true

                  ;

                   

                  origin =

                   

                  new

                  Point(event.localX,event.localY);

                   

                  }

                   

                   

                   

                   

                   

                  private function onMouseMove(event : MouseEvent):

                  void

                   

                  {

                   

                   

                   

                  if(isMouseDown == true

                  )

                   

                  {

                   

                  destination =

                   

                  new

                  Point(event.localX,event.localY);

                   

                   

                   

                   

                   

                  var

                  lineThickness:Number = 2;

                   

                   

                   

                  var

                  lineColor:Number = 0x000000;

                   

                   

                   

                  var

                  lineAlpha:Number = 1;

                   

                   

                   

                  myShape.graphics.clear();

                   

                  myShape.graphics.lineStyle(lineThickness,lineColor,lineAlpha);

                   

                  myShape.graphics.moveTo(origin.x,origin.y);

                   

                  myShape.graphics.lineTo(destination.x,destination.y);

                   

                  }

                   

                  }

                   

                   

                   

                   

                   

                  private function onMouseUp(event : MouseEvent):

                  void

                   

                  {

                   

                   

                   

                  this

                  .rawChildren.addChild(myShape);

                   

                  isMouseDown =

                   

                  false

                  ;

                   

                  }

                   

                  ]]>

                   

                   

                   

                  </mx:Script>

                   

                  </mx:Canvas>

                   

                    

                  • 7. Re: Problem drawing a line dynamically
                    bendayan Level 1

                    Thanks a lot Shardul. I got it! and it works!