We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

How to draw lines between two different images in flex

naveenm_006
naveenm_006 asked
on
Medium Priority
1,078 Views
Last Modified: 2012-05-11
How to draw lines between two different images in flex.i am able to draw line between two same images for first image but not for other images. ie., circle and oval square.

Also i am unable to draw line b/w two different images.In this case it is giving me error

TypeError: Error #1009: Cannot access a property or method of a null object reference.
      at DrawingClasses::Line/getDrawDirection()
      at DrawingClasses::Line/calculateCoordinate()
      at DrawingClasses::Line/draw()
      at DrawingClasses::Designer/addLine()
      at DrawingClasses::Circle/mouseUp()

I am sharing the code plz go through it and make any necessary changes.

Thanks
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
  <mx:Script>
    <![CDATA[
    import DrawingClasses.Designer;
    import mx.core.DragSource;
    import mx.managers.DragManager;
    import mx.events.DragEvent;
    import com.adobe.viewsource.ViewSource;
	import mx.controls.Alert;
    
    [Bindable]
    [Embed(source = "/Images/xml.png")] 
	 public var xmlIcon:Class; 
    [Bindable]
    [Embed(source="/Images/line.png")] 
    public var linePicture:Class; 
    [Bindable]
    [Embed(source="/Images/box.png")] 
    public var boxPicture:Class; 
    
    private var xOff:Number;
    private var yOff:Number;	  
    private var designer:Designer = new Designer();   
    public var xm:XML = <Relyon></Relyon>;
    public function initApp():void{
      designer.setDesignArea(designArea);
    }
    // this methods sets x,y coordinate of new box
    public function pictureDragDrop(event:DragEvent):void {	 
		var nodeName:String = txtInput1.text;
		var nodeValue:String = txtInput2.text;
		var xmlList:XMLList =new XMLList("<"+nodeName+">"+nodeValue+"</"+nodeName+">");
		xm.appendChild(xmlList); 
      var x:int = event.currentTarget.mouseX - xOff;
      var y:int = event.currentTarget.mouseY - yOff;  
      if(event.dragSource.dataForFormat("key") == "box")
      {
      	 designer.addBox(x, y); 	
      }   
      else  if(event.dragSource.dataForFormat("key") == "circle")
      {
      	designer.addCircle(x, y);
      }
      else
      {
      	designer.addRectangle(x, y);
      }
	  txtInput1.text = "";
	  txtInput2.text = "";
    } 
    // this method gets x and y coordinate of template box image
    private function myoffset(img:Image):void {
      xOff = img.mouseX;
      yOff = img.mouseY;
    }

    // this method does acceptable draging box image
    public function pictureDragEnter(event:DragEvent):void{
      DragManager.acceptDragDrop(Canvas(event.target));        
    }
    
    // this method supply drag box when mouse move on the design area 
    private function dragPicture1(event:MouseEvent, img1:Image,format:String):void{
      var dragInitiator:Image=Image(event.currentTarget);
      var ds:DragSource = new DragSource();
      var imageProxy:Image = new Image();
      imageProxy.source = img1.source;	    
      imageProxy.height= 150;
      imageProxy.width= 150;
      ds.addData(format,"key");
    /*  
    	
    	  */
      DragManager.doDrag(dragInitiator, ds, event,imageProxy, 0, 0, 1.00);
    }      
    // this method works when click on the line button 
    // it is make enable to draw line
   	public function doDrawEnable():void{
   	  designer.setIsDrawEnable(true);
   	}
	private function createXML():void{
		Alert.show(xm);
		}
    ]]>
  </mx:Script>
  <mx:Canvas id="MainArea" width="100%" height="100%">
      <mx:Image id="box" source="@Embed(source='Images/box.png')" mouseMove="dragPicture1(event, box, 'box');myoffset(box);" width="28" height="28" x="84" y="6"></mx:Image>
	  <mx:Image id="circle" source="@Embed(source='Images/circle.png')" mouseMove="dragPicture1(event, circle, 'circle');myoffset(circle);" width="28" height="28" x="120" y="8"></mx:Image>
	  <mx:Image id="rectangle" source="@Embed(source='Images/rectangle.png')" mouseMove="dragPicture1(event, rectangle, 'rectangle');myoffset(rectangle);" width="28" height="28" x="160" y="10"></mx:Image>
	  <mx:Label text="Name" x="350" y="10"/>
	  <mx:TextInput id="txtInput1" width="50" height="28" x="450" y="10"/>
	  <mx:Label text="Value" x="750" y="10"/>
	  <mx:TextInput id="txtInput2" width="50" height="28" x="850" y="10"/>
      <mx:Label text="Drag this picture on the gray area" x="10" y="36"></mx:Label>
      <mx:Canvas id="lineContanier" width="28" height="28" backgroundColor="#c0c0c0" x="279" y="10">
      </mx:Canvas>
      <mx:Label text="Click for draw line between two box" x="225" y="36"></mx:Label>
	  <mx:ComboBox x="510" y="15">
		  <mx:dataProvider>
          <mx:Array>
            <mx:String> Rectangle </mx:String>
            <mx:String> Circle </mx:String>
            <mx:String> Square </mx:String>
          </mx:Array>
        </mx:dataProvider>
		</mx:ComboBox>

	  
	  
	  <mx:Image source="{xmlIcon}" useHandCursor="true" buttonMode="true" click="createXML()" x="620" y="0" /> 

	  <mx:Canvas id="designArea" dragEnter="pictureDragEnter(event)" dragDrop="pictureDragDrop(event)" top="55" width="100%" height="100%" backgroundColor="#c0c0c0">      
    </mx:Canvas>
    <mx:Image id="line" source="@Embed(source='Images/line.png')" width="28" height="28" click="doDrawEnable()" x="279" y="10"></mx:Image>
  </mx:Canvas>
</mx:Application>
--------------------

Box.as
package DrawingClasses
{
  import flash.display.DisplayObject;
  import flash.events.MouseEvent;
  import mx.collections.ArrayCollection;
  import mx.controls.Image;  
  public class Box extends Image
  {
    private var designer:Designer;
//  this line refrence arrays for drawing this box lines especialy when box moving
    private var fromLines:ArrayCollection = new ArrayCollection();
    private var toLines:ArrayCollection = new ArrayCollection();

    [Bindable]
    [Embed(source="/Images/box.png")] 
    public var boxPicture:Class; 
    
    public function Box(){
      this.source =boxPicture;   
    }
    public function addFromLine(fromLine:Line):void{
      this.fromLines.addItem(fromLine);
    }
    public function addToLine(toLine:Line):void{
      this.toLines.addItem(toLine);
    }
    public function getFromLines():ArrayCollection{
      return this.fromLines;
    }
    public function getToLines():ArrayCollection{
      return this.toLines;
    }
    public function getWidth():int{
      return this.width;
    }
    public function getHeight():int{
      return this.height;
    }
    public function getX():int{
      return this.x;
    }
    public function getY():int{
      return this.y;
    }
    public function setDesigner(value:Designer):void{
      this.designer = value;
    }
    
    // when box create from Image Class adding this events for listening mouse movement 
    public function create(x:int,y:int,id:String):void{
      this.x = x;
      this.y = y;
      this.id = id;
      this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
      this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
      this.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
    }
    
    // mouse down event define start drawing line or draging box 
    //if line button click before, it sets mouse coordinate as firt points of line
    //if line button dosen't click it sets dragable of box
    private function mouseDown(event:MouseEvent):void{
      if (!designer.getIsDrawEnable()){
        this.startDrag();  
      }
      else{
        designer.prepareDrawing(); 
        designer.setCurrentFromBox(this);
      }      
    }
    //mouse move events works when box draging 
    //if this box has line this methods draws it
    private function mouseMove(event:MouseEvent):void{
      if (fromLines.length>0){
        drawFromLines();  
      }
      if (toLines.length>0){
        drawToLines();  
      }        
    }
    // this medthods draw "from direction" lines with updated coordinate 
    public function drawFromLines():void{
      for (var i:int=0;i<fromLines.length;i++){
        Line(fromLines[i]).draw();
      }
    }
    // this medthods draw "to direction" lines with updated coordinate 
    public function drawToLines():void{
      for (var i:int=0;i<toLines.length;i++){
        Line(toLines[i]).draw();
      }
    }
    
    //mouse up events define stop box dragging or finish drawing line
    //if finish drawing line it sets mouse coordinate as last points of line  
    //if stop draging it sets stop drag 
    private function mouseUp(event:MouseEvent):void{
      if (!designer.getIsDrawEnable()){
        this.stopDrag();
      }
      else{  
        designer.setCurrentToBox(this);
        designer.addLine();
      }      
    }
  }
}

Circle.as
package DrawingClasses
{
  import flash.display.DisplayObject;
  import flash.events.MouseEvent;
  import mx.collections.ArrayCollection;
  import mx.controls.Image;  
  public class Circle extends Image
  {
    private var designer:Designer;
//  this line refrence arrays for drawing this box lines especialy when box moving
    private var fromLines:ArrayCollection = new ArrayCollection();
    private var toLines:ArrayCollection = new ArrayCollection();

    [Bindable]
    [Embed(source="/Images/circle.png")] 
    public var circlePicture:Class; 
    
    public function Circle(){
      this.source =circlePicture;   
    }
    public function addFromLine(fromLine:Line):void{
      this.fromLines.addItem(fromLine);
    }
    public function addToLine(toLine:Line):void{
      this.toLines.addItem(toLine);
    }
    public function getFromLines():ArrayCollection{
      return this.fromLines;
    }
    public function getToLines():ArrayCollection{
      return this.toLines;
    }
    public function getWidth():int{
      return this.width;
    }
    public function getHeight():int{
      return this.height;
    }
    public function getX():int{
      return this.x;
    }
    public function getY():int{
      return this.y;
    }
    public function setDesigner(value:Designer):void{
      this.designer = value;
    }
    
    // when box create from Image Class adding this events for listening mouse movement 
    public function create(x:int,y:int,id:String):void{
      this.x = x;
      this.y = y;
      this.id = id;
      this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
      this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
      this.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
    }
    
    // mouse down event define start drawing line or draging box 
    //if line button click before, it sets mouse coordinate as firt points of line
    //if line button dosen't click it sets dragable of box
    private function mouseDown(event:MouseEvent):void{
      if (!designer.getIsDrawEnable()){
        this.startDrag();  
      }
      else{
        designer.prepareDrawing(); 
        designer.setCurrentFromCircle(this);
	
      }      
    }
    //mouse move events works when box draging 
    //if this box has line this methods draws it
    private function mouseMove(event:MouseEvent):void{
      if (fromLines.length>0){
        drawFromLines();  
      }
      if (toLines.length>0){
        drawToLines();  
      }        
    }
    // this medthods draw "from direction" lines with updated coordinate 
    public function drawFromLines():void{
      for (var i:int=0;i<fromLines.length;i++){
        Line(fromLines[i]).draw();
      }
    }
    // this medthods draw "to direction" lines with updated coordinate 
    public function drawToLines():void{
      for (var i:int=0;i<toLines.length;i++){
        Line(toLines[i]).draw();
      }
    }
    
    //mouse up events define stop box dragging or finish drawing line
    //if finish drawing line it sets mouse coordinate as last points of line  
    //if stop draging it sets stop drag 
    private function mouseUp(event:MouseEvent):void{
      if (!designer.getIsDrawEnable()){
        this.stopDrag();
      }
      else{  
        designer.setCurrentToCircle(this);
        designer.addLine();
      }      
    }
  }
}
Designer.as
package DrawingClasses
{
  
  import flash.net.URLRequestHeader;
  import mx.collections.ArrayCollection;
  import mx.containers.Canvas;
  import flash.events.MouseEvent;
  import mx.core.UIComponent;
  import mx.rpc.events.AbstractEvent;
  import mx.controls.Alert;
  
  public class Designer
  {
    private var boxes:ArrayCollection = new ArrayCollection();
	private var circles:ArrayCollection = new ArrayCollection();
	private var rectangles:ArrayCollection = new ArrayCollection();
    private var lines:ArrayCollection = new ArrayCollection();
    private var designArea:Canvas;
    private var isDrawEnable:Boolean = false;
    private var isDrawing:Boolean = false;
    private var templateLine:Line;
    private var currentFromBox:Box;
	private var currentToBox:Box;
	private var currentFromCircle:Circle;
   	private var currentToCircle:Circle;
	private var currentFromRectangle:Rectangle;
   	private var currentToRectangle:Rectangle;
    
    // designer is a manager class. 
    public function Designer(){        
      templateLine = new Line();
      templateLine.name="templateLine";
      templateLine.visible = false;
    }
    public function setIsDrawEnable(value:Boolean):void{
      this.isDrawEnable = value;
    }
    public function getIsDrawEnable():Boolean{
      return this.isDrawEnable;
    }
    public function setCurrentFromBox(value:Box):void{
      this.currentFromBox = value;      
    }
    public function setCurrentToBox(value:Box):void{
      this.currentToBox = value;  
    }
	public function setCurrentFromCircle(value:Circle):void{
      this.currentFromCircle = value;      
    }
    public function setCurrentToCircle(value:Circle):void{
      this.currentToCircle = value;  
    }
	 public function setCurrentFromRectangle(value:Rectangle):void{
      this.currentFromRectangle = value;      
    }
    public function setCurrentToRectangle(value:Rectangle):void{
      this.currentToRectangle = value;  
	}
    public function getBoxList():ArrayCollection{
      return boxes;
    }
	public function getCircleList():ArrayCollection{
      return circles;
    }
	public function getRectangleList():ArrayCollection{
      return rectangles;
    }	
    public function getLineList():ArrayCollection{
      return lines;
    }
    private function getId(type:String):String{
      var idString:String  = type + Math.round(Math.random()*10000).toString();
      return idString;
    }
    
    // set design area and adding desing area events.    
    public function setDesignArea(value:Canvas):void{
      this.designArea = value;
      designArea.addChild(templateLine);      
      designArea.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
      designArea.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
    }
		// this method checks mouse up event on the box or not .
		// if not cancel drawing. 
		// if there is no excpation add lines
		public function mouseUp(event:MouseEvent):void{
      if (isDrawEnable){
        try{
          if (Box(event.currentTarget)!= null){
            addLine();
          }                  
        }
        catch(e:Error){
            cancelDrawing();          
        }        
      }      
    }
    //when mouse move on the design area drawing template line if isDrawing true
    public function mouseMove(event:MouseEvent):void{
      if (isDrawing){
        drawLine();  
      }
    }
    // create box 
    public function addBox(x:int, y:int):void{
      var newBox:Box = new Box();
      var id:String = getId("Box");
      newBox.setDesigner(this);
      newBox.create(x,y,id);
      boxes.addItem(newBox);     
      designArea.addChild(newBox);
	}
	  // create circle
	 public function addCircle(x:int, y:int):void{
	  var newCircle:Circle = new Circle();
	  var id2:String = getId("Circle");
	  newCircle.setDesigner(this);
	  newCircle.create(x,y,id2);
	  circles.addItem(newCircle);
	  designArea.addChild(newCircle);
	  }
	  // create rectangle
	 public function addRectangle(x:int, y:int):void{
	  var newRectangle:Rectangle= new Rectangle();
	  var id3:String = getId("Rectangle");
	  newRectangle.setDesigner(this);
	  newRectangle.create(x,y,id3);
	  rectangles.addItem(newRectangle);
	  designArea.addChild(newRectangle);
    } 
    // this method works when mouse down on the box 
    // it sets first point coordinae of template line
    public function prepareDrawing():void{    
      if (isDrawEnable){
        templateLine.graphics.clear();
        templateLine.setX1(designArea.mouseX);
        templateLine.setY1(designArea.mouseY);
        templateLine.visible = true;
        isDrawing = true;      
      }  
    }
    // this methods set second coordinate of template line and draw
    public function drawLine():void{   
      if (isDrawing){
        templateLine.setX2(designArea.mouseX);
        templateLine.setY2(designArea.mouseY);
        templateLine.draw();
      }
    }
    
    // this methods create new line and add line to box and designer
    public function addLine():void{ 
      if (isDrawing){
        var newLine:Line = new Line();
        newLine.setId(getId("Line"));
        newLine.setFromBox(currentFromBox);
        newLine.setToBox(currentToBox);
        newLine.draw();        
        currentFromBox.addFromLine(newLine);
        currentToBox.addToLine(newLine);          
        lines.addItem(newLine);
        designArea.addChild(newLine);
        templateLine.visible = false;        
        isDrawEnable = false;
        isDrawing = false;        
      }
      else{
        cancelDrawing();
      }
    }
    // this methods cancel drawing
    public function cancelDrawing():void{
      templateLine.visible = false;
      isDrawEnable = false;
      isDrawing = false;
    }
  }
}
Line.as
package DrawingClasses
{
  import flash.events.MouseEvent;
  import mx.core.UIComponent;
  
  public class Line extends UIComponent
  {
    private var thicknessNumber:uint = 2;
    private var alphaNumber:uint = 4.0;
    private var arrowWidth:int = 4;
    private var arrowHeight:int = 8;
 // x1,y1,x2,y2 this points are coordinate of line first point x,y and second 
 // poind x,y  positions on the screen
    private var x1:int;
    private var y1:int;
    private var x2:int;
    private var y2:int;
    private var color:uint = 0x000000;
//  this box referance for find line distance
    private var fromBox:Box;
    private var toBox:Box;
//  this boolean variable understand selection on,off    
    private var isSelect:Boolean=false;
    
    public function Line(){
      super();
      this.addEventListener(MouseEvent.CLICK,mouseClick);
    }
    public function setFromBox(value:Box):void{
      this.fromBox = value;
    }
    public function setToBox(value:Box):void{
      this.toBox = value;
    }
  	public function getX1():int{
  	  return this.x1;
  	}
  	public function setX1(value:int):void{
  	  this.x1 = value;
  	}
  	public function getY1():int{
  	  return this.y1;
  	}
  	public function setY1(value:int):void{
  	  this.y1 = value;
  	}
  	public function getX2():int{
  	  return this.x2;
  	}
  	public function setX2(value:int):void{		
  	  this.x2 = value;
  	}
  	public function getY2():int{
  	  return this.y2;
  	}
  	public function setY2(value:int):void{
  	  this.y2 = value;
  	}
  	public function setId(value:String):void{
  	  this.id = value;
  	}
  	public function getId():String{
  	  return this.id;
  	}
    public function clear():void{
      graphics.clear();
    }
    public function mouseClick(event:MouseEvent):void{
      select();
    }
//  this method select line 
    public function select():void{
      if (!this.isSelect){
        this.color = 0xff0000;
        this.isSelect = true;
      }
      else{
        this.color = 0x000000;
        this.isSelect = false;
      }
      draw();
    }
//  this method draw line on UIComponent graphics. 
    public function draw():void{
      if(name != "templateLine"){
        calculateCoordinate();
      }
  	  graphics.clear();
  	  //this transparent line for easy selection
  	  graphics.lineStyle(8,color,0.0);
  	  graphics.moveTo(getX1(),getY1());
  	  graphics.lineTo(getX2(),getY2());
  	  //this is real line
  	  graphics.lineStyle(thicknessNumber,color,alphaNumber);
  	  graphics.moveTo(getX1(),getY1());
  	  graphics.lineTo(getX2(),getY2());
  	  createArrow();
    }
 	  //Draw the arrow
  	public function createArrow():void{
  	  var angle:Number = Math.atan2(getY2()-getY1(), getX2()-getX1());
  	  graphics.lineTo(getX2()-arrowHeight*Math.cos(angle)-arrowWidth*Math.sin(angle),
  									getY2()-arrowHeight*Math.sin(angle)+arrowWidth*Math.cos(angle));
  	  graphics.lineTo(getX2(), getY2());
  	  graphics.lineTo(getX2()-arrowHeight*Math.cos(angle)+arrowWidth*Math.sin(angle),	
  									getY2()-arrowHeight*Math.sin(angle)-arrowWidth*Math.cos(angle));										
  	}
  	
		//this method find which way "from" box sides.
  	public function getDrawDirection():String{
  	  var drawDirection :String;
  	  var boxFromX2:int = fromBox.getX()+fromBox.getWidth();
  	  var boxFromY2:int = fromBox.getY()+fromBox.getHeight();
  	  var boxToX2:int = toBox.getX()+toBox.getWidth();
  	  var boxToY2:int = toBox.getY()+toBox.getHeight();
  		
  	  if (fromBox.getX()>boxToX2 && boxFromY2<toBox.getY()){
  		  drawDirection = "RIGHT_TOP";
  	  }
  	  else if (fromBox.getX()>boxToX2 && fromBox.getY()>boxToY2){
  	    drawDirection  = "RIGHT_BOTTOM";
  	  }
  	  else if (boxFromX2<toBox.getX() && fromBox.getY()>boxToY2){
  	    drawDirection  = "LEFT_BOTTOM";
  	  }
  	  else if (boxFromX2<toBox.getX() && boxFromY2<toBox.getY()){
  	    drawDirection  = "LEFT_TOP";
  	  }
  	  else if (fromBox.getX()>boxToX2){
  	    drawDirection  = "RIGHT";
  	  }
  	  else if (boxFromY2<toBox.getY()){
  	    drawDirection  = "TOP";
  	  }
  	  else if (fromBox.getY()>boxToY2){
  	    drawDirection  = "BOTTOM";
  	  }
  	  else if (boxFromX2<toBox.getX()){
  	    drawDirection  = "LEFT";
  	  }
  	  return drawDirection;
  	}
  	//this methos calculate coordinate for draw line. it use two side of box distance
  	private function calculateCoordinate():void{
  	  var drawDirection:String = getDrawDirection();
  	  var boxFromX2:int = fromBox.getX()+fromBox.getWidth();
  	  var boxFromY2:int = fromBox.getY()+fromBox.getHeight();
  	  var boxToX2:int = toBox.getX()+toBox.getWidth();
  	  var boxToY2:int = toBox.getY()+toBox.getHeight();
  	  var diffY:int = 0;
  	  var diffX:int = 0;
  	  
  	  if (drawDirection =="BOTTOM" || drawDirection =="TOP")
  	  {
    		if (fromBox.getX()<=toBox.getX() && boxFromX2>=boxToX2){					
    		  diffX =(toBox.getWidth())/2;
    		  diffX = toBox.getX() + diffX;				
    		}
    		else if (fromBox.getX()>toBox.getX() && boxFromX2>boxToX2){					
    		  diffX =(boxToX2 - fromBox.getX())/2;
    		  diffX = fromBox.getX() + diffX;				
    	  }
    	  else if (fromBox.getX()<toBox.getX() && boxFromX2<boxToX2){					
    		  diffX =(boxFromX2 - toBox.getX())/2;
    		  diffX = toBox.getX() + diffX;				
    		}
    		else if (fromBox.getX()>toBox.getX() && boxFromX2<boxToX2){					
    		  diffX =(fromBox.getWidth())/2;
    		  diffX = fromBox.getX() + diffX;
    		}
    	  if (diffX == 0){
    		  diffX = fromBox.getX() + (fromBox.getWidth()/2);
    		}
  	  }
  	  if (drawDirection =="RIGHT" || drawDirection =="LEFT" ){				
    		if (fromBox.getY()<=toBox.getY() && boxFromY2>=boxToY2){				
    		  diffY =(boxToY2 - toBox.getY())/2;					
    		  diffY = toBox.getY() + diffY;						
    		}
    		else if (fromBox.getY()>toBox.getY() && boxFromY2>boxToY2){					
    		  diffY =(boxToY2 - fromBox.getY())/2;
    		  diffY = fromBox.getY() + diffY;
    		}
    		else if (fromBox.getY()<toBox.getY() && boxFromY2<boxToY2){					
    	    diffY =(boxFromY2 - toBox.getY())/2;
    		  diffY = toBox.getY() + diffY;								
    		}
    		else if (fromBox.getY()>toBox.getY() && boxFromY2<boxToY2){					
    		  diffY =(fromBox.getHeight())/2;
    		  diffY = fromBox.getY() + diffY;															
    		}				
  	  }
  	  switch (drawDirection ){
  	    case "RIGHT_BOTTOM":
  		  this.x1 = fromBox.getX()+diffX;
  		  this.y1 = fromBox.getY();
  		  this.x2 = boxToX2;
  		  this.y2 = boxToY2-diffY;				
  		break;
  		case "RIGHT_TOP":
  		  this.x1 = fromBox.getX();
  		  this.y1 = boxFromY2-diffY;
  		  this.x2 = boxToX2-diffX;
  		  this.y2 = toBox.getY();				
  		break;
  		case "LEFT_BOTTOM":
  		  this.x1 = boxFromX2-diffX;
  		  this.y1 = fromBox.getY() ;
  		  this.x2 = toBox.getX();
  		  this.y2 = boxToY2-diffY;				
  		break;					
  		case "LEFT_TOP":
  		  this.x1 = boxFromX2;
  		  this.y1 = boxFromY2-diffY;
  		  this.x2 = toBox.getX()+diffX;
  		  this.y2 = toBox.getY();				
  		break;					
  		case "RIGHT":
  		  this.x1 = fromBox.getX();
  		  this.y1 = diffY;
  		  this.x2 = boxToX2;
  		  this.y2 = diffY;			
  		break;
  		case "TOP":
  		  this.x1 = diffX;
  		  this.y1 = boxFromY2;
  		  this.x2 = diffX;
  		  this.y2 = toBox.getY();				
  		break;
  		case "BOTTOM":
  		  this.x1= diffX;
  		  this.y1= fromBox.getY();
  		  this.x2= diffX;
  		  this.y2= boxToY2;				
  		break;
  		case "LEFT":
  		  this.x1= boxFromX2;
  		  this.y1= diffY;
  		  this.x2= toBox.getX();
  		  this.y2= diffY;	
  		break;
  	  }
  	}
  }
}
Rectangle.as
package DrawingClasses
{
  import flash.display.DisplayObject;
  import flash.events.MouseEvent;
  import mx.collections.ArrayCollection;
  import mx.controls.Image;  
  public class Rectangle extends Image
  {
    private var designer:Designer;
//  this line refrence arrays for drawing this box lines especialy when box moving
    private var fromLines:ArrayCollection = new ArrayCollection();
    private var toLines:ArrayCollection = new ArrayCollection();

    [Bindable]
    [Embed(source="/Images/rectangle.png")] 
    public var rectanglePicture:Class; 
    
    public function Rectangle(){
      this.source =rectanglePicture;   
    }
    public function addFromLine(fromLine:Line):void{
      this.fromLines.addItem(fromLine);
    }
    public function addToLine(toLine:Line):void{
      this.toLines.addItem(toLine);
    }
    public function getFromLines():ArrayCollection{
      return this.fromLines;
    }
    public function getToLines():ArrayCollection{
      return this.toLines;
    }
    public function getWidth():int{
      return this.width;
    }
    public function getHeight():int{
      return this.height;
    }
    public function getX():int{
      return this.x;
    }
    public function getY():int{
      return this.y;
    }
    public function setDesigner(value:Designer):void{
      this.designer = value;
    }
    
    // when box create from Image Class adding this events for listening mouse movement 
    public function create(x:int,y:int,id:String):void{
      this.x = x;
      this.y = y;
      this.id = id;
      this.addEventListener(MouseEvent.MOUSE_DOWN,mouseDown);
      this.addEventListener(MouseEvent.MOUSE_MOVE,mouseMove);
      this.addEventListener(MouseEvent.MOUSE_UP,mouseUp);
    }
    
    // mouse down event define start drawing line or draging box 
    //if line button click before, it sets mouse coordinate as firt points of line
    //if line button dosen't click it sets dragable of box
    private function mouseDown(event:MouseEvent):void{
      if (!designer.getIsDrawEnable()){
        this.startDrag();  
      }
      else{
        designer.prepareDrawing(); 
        designer.setCurrentFromRectangle(this);
	
      }      
    }
    //mouse move events works when box draging 
    //if this box has line this methods draws it
    private function mouseMove(event:MouseEvent):void{
      if (fromLines.length>0){
        drawFromLines();  
      }
      if (toLines.length>0){
        drawToLines();  
      }        
    }
    // this medthods draw "from direction" lines with updated coordinate 
    public function drawFromLines():void{
      for (var i:int=0;i<fromLines.length;i++){
        Line(fromLines[i]).draw();
      }
    }
    // this medthods draw "to direction" lines with updated coordinate 
    public function drawToLines():void{
      for (var i:int=0;i<toLines.length;i++){
        Line(toLines[i]).draw();
      }
    }
    
    //mouse up events define stop box dragging or finish drawing line
    //if finish drawing line it sets mouse coordinate as last points of line  
    //if stop draging it sets stop drag 
    private function mouseUp(event:MouseEvent):void{
      if (!designer.getIsDrawEnable()){
        this.stopDrag();
      }
      else{  
        designer.setCurrentToRectangle(this);
        designer.addLine();
      }      
    }
  }
}

Open in new window

box.png
circle.png
line.png
rectangle.png
xml.png
Comment
Watch Question

I would assume that the reason is that fromBox or toBox is null when calling getDrawDirection when looking at you code I can't really see where these values are actually set.
I just refactored your application and made it a lot easier ... just a moment and I'll post it.
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
when i run your app i am getting the following error

D:\test\src\DrawingClasses\Box.as(11): col: 9 Error: Access of possibly undefined property source through a reference with static type DrawingClasses:Box.
this.source = boxPicture;
^
D:\test\src\DrawingClasses\Circle.as(11): col: 9 Error: Access of possibly undefined property source through a reference with static type DrawingClasses:Circle.
this.source = circlePicture;
^
Well I posted the code of a test-project that I built an compiled. Box extends Shape and Shape extends Image, so Box should have the source property of Image ... if it's not, I thing you might not have copied my code correctly.

Author

Commented:
ok problem with import statement which i included in my code
ok anyway thanx for your reply.

Author

Commented:
problem solved
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.