Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 599
  • Last Modified:

Need to highlight an image when user drag and drop in canvas

I have two canvas.First Canvas contains some images and second canvas it's like design view where we drag and drop an image.
Here i need to highlight an image when user drag and drop in canvas. Only the image which we are dragging and dropping should be highlight.
Below is the code which i am sharing.Also if possible add dotted line next to line image.

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 {
				var fileName:String = "demo.xml";
                var fileRef:FileReference = new FileReference();
				fileRef.save(xm, fileName);
				
			}
		]]>
	</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="400" y="10"/>
		<mx:Label text="Value" x="470" y="10"/>
		<mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>
		<mx:TextInput id="txtInput3" width="50" height="28" x="875" 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="750" 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
{
	public class Box extends Shape
	{
		[Bindable]
		[Embed(source="/Images/box.png")] 
		public var boxPicture:Class; 
		
		public function Box() {
			this.source = boxPicture;   
		}
	}
}

Circle.as
package DrawingClasses
{
	public class Circle extends Shape
	{
		[Bindable]
		[Embed(source="/Images/circle.png")] 
		public var circlePicture:Class; 
		
		public function Circle(){
			this.source = circlePicture;   
		}
	}
}

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 currentFromShape:Shape;
		private var currentToShape:Shape;
		
		// 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 setCurrentFromShape(value:Shape):void{
			this.currentFromShape = value;      
		}
		public function setCurrentToShape(value:Shape):void{
			this.currentToShape = 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.setFromShape(currentFromShape);
				newLine.setToShape(currentToShape);
				newLine.draw();        
				currentFromShape.addFromLine(newLine);
				currentToShape.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;
		}
	}
}

Designer.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 fromShape:Shape;
		private var toShape:Shape;
		//  this boolean variable understand selection on,off    
		private var isSelect:Boolean=false;
		
		public function Line(){
			super();
			this.addEventListener(MouseEvent.CLICK,mouseClick);
		}
		public function setFromShape(value:Shape):void{
			this.fromShape = value;
		}
		public function setToShape(value:Shape):void{
			this.toShape = 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 = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			
			if (fromShape.getX()>boxToX2 && boxFromY2<toShape.getY()){
				drawDirection = "RIGHT_TOP";
			}
			else if (fromShape.getX()>boxToX2 && fromShape.getY()>boxToY2){
				drawDirection  = "RIGHT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && fromShape.getY()>boxToY2){
				drawDirection  = "LEFT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && boxFromY2<toShape.getY()){
				drawDirection  = "LEFT_TOP";
			}
			else if (fromShape.getX()>boxToX2){
				drawDirection  = "RIGHT";
			}
			else if (boxFromY2<toShape.getY()){
				drawDirection  = "TOP";
			}
			else if (fromShape.getY()>boxToY2){
				drawDirection  = "BOTTOM";
			}
			else if (boxFromX2<toShape.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 = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			var diffY:int = 0;
			var diffX:int = 0;
			
			if (drawDirection =="BOTTOM" || drawDirection =="TOP")
			{
				if (fromShape.getX()<=toShape.getX() && boxFromX2>=boxToX2){					
					diffX =(toShape.getWidth())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2>boxToX2){					
					diffX =(boxToX2 - fromShape.getX())/2;
					diffX = fromShape.getX() + diffX;				
				}
				else if (fromShape.getX()<toShape.getX() && boxFromX2<boxToX2){					
					diffX =(boxFromX2 - toShape.getX())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2<boxToX2){					
					diffX =(fromShape.getWidth())/2;
					diffX = fromShape.getX() + diffX;
				}
				if (diffX == 0){
					diffX = fromShape.getX() + (fromShape.getWidth()/2);
				}
			}
			if (drawDirection =="RIGHT" || drawDirection =="LEFT" ){				
				if (fromShape.getY()<=toShape.getY() && boxFromY2>=boxToY2){				
					diffY =(boxToY2 - toShape.getY())/2;					
					diffY = toShape.getY() + diffY;						
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2>boxToY2){					
					diffY =(boxToY2 - fromShape.getY())/2;
					diffY = fromShape.getY() + diffY;
				}
				else if (fromShape.getY()<toShape.getY() && boxFromY2<boxToY2){					
					diffY =(boxFromY2 - toShape.getY())/2;
					diffY = toShape.getY() + diffY;								
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2<boxToY2){					
					diffY =(fromShape.getHeight())/2;
					diffY = fromShape.getY() + diffY;															
				}				
			}
			switch (drawDirection ){
				case "RIGHT_BOTTOM":
					this.x1 = fromShape.getX()+diffX;
					this.y1 = fromShape.getY();
					this.x2 = boxToX2;
					this.y2 = boxToY2-diffY;				
					break;
				case "RIGHT_TOP":
					this.x1 = fromShape.getX();
					this.y1 = boxFromY2-diffY;
					this.x2 = boxToX2-diffX;
					this.y2 = toShape.getY();				
					break;
				case "LEFT_BOTTOM":
					this.x1 = boxFromX2-diffX;
					this.y1 = fromShape.getY() ;
					this.x2 = toShape.getX();
					this.y2 = boxToY2-diffY;				
					break;					
				case "LEFT_TOP":
					this.x1 = boxFromX2;
					this.y1 = boxFromY2-diffY;
					this.x2 = toShape.getX()+diffX;
					this.y2 = toShape.getY();				
					break;					
				case "RIGHT":
					this.x1 = fromShape.getX();
					this.y1 = diffY;
					this.x2 = boxToX2;
					this.y2 = diffY;			
					break;
				case "TOP":
					this.x1 = diffX;
					this.y1 = boxFromY2;
					this.x2 = diffX;
					this.y2 = toShape.getY();				
					break;
				case "BOTTOM":
					this.x1= diffX;
					this.y1= fromShape.getY();
					this.x2= diffX;
					this.y2= boxToY2;				
					break;
				case "LEFT":
					this.x1= boxFromX2;
					this.y1= diffY;
					this.x2= toShape.getX();
					this.y2= diffY;	
					break;
			}
		}
	}
}


Rectangle.as
package DrawingClasses
{
	public class Rectangle extends Shape
	{
		[Bindable]
		[Embed(source="/Images/rectangle.png")] 
		public var rectanglePicture:Class; 
		
		public function Rectangle() {
			this.source = rectanglePicture;   
			
		}
	}
}

Shape.as

package DrawingClasses
{
	import flash.events.MouseEvent;
	
	import mx.collections.ArrayCollection;
	import mx.controls.Image;
	
	public class Shape 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();

		public function Shape() {
			super();
		}
		
		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.setCurrentFromShape(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.setCurrentToShape(this);
				designer.addLine();
			}      
		}

	}
}

Open in new window

box.png
circle.png
line.png
rectangle.png
xml.png
0
naveenm_006
Asked:
naveenm_006
  • 3
  • 2
1 Solution
 
naveenm_006Author Commented:
added new tag(flash)
0
 
dgofmanCommented:
Create DragImage.as class

package DrawingClasses
{
	import flash.display.CapsStyle;
	import flash.display.GradientType;
	import flash.display.Graphics;
	import flash.display.JointStyle;
	import flash.display.SpreadMethod;
	import flash.events.MouseEvent;
	import flash.geom.Matrix;
	
	import mx.controls.Image;
	import mx.core.DragSource;
	import mx.events.DragEvent;
	import mx.managers.DragManager;

	public class DragImage extends Image
	{
		private var gap:uint = 5;
		private var isDrag:Boolean = false;

		public function DragImage(){
			super();
			addEventListener(MouseEvent.MOUSE_DOWN, doDragStart);
			addEventListener(DragEvent.DRAG_COMPLETE, endDragHandler);
		}
		
		private function endDragHandler(event:DragEvent):void{
			isDrag = false;
			invalidateDisplayList();
		}

		private function doDragStart(event:MouseEvent):void 
		{
			isDrag = true;
			invalidateDisplayList();

			var dragInitiator:DragImage = event.currentTarget as DragImage;
			var dragSource:DragSource = new DragSource();
			var imageProxy:Image = new Image();
			imageProxy.source = source;
			imageProxy.height= 150;
			imageProxy.width= 150;
			dragSource.addData(id, "key");
			DragManager.doDrag(dragInitiator, dragSource, event, imageProxy, 0, 0, 1.00);
		}

		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
		{
			var g:Graphics = graphics;
			g.clear();

			super.updateDisplayList(unscaledWidth, unscaledHeight);

			trace(this + "+++++"+ isDrag);
			if(isDrag == true){
				var gradientBoxMatrix:Matrix = new Matrix(); 
				gradientBoxMatrix.createGradientBox(4, 4, Math.PI/4, 2, 2); 
				g.lineStyle(2, 0x000000,0.5,false, "normal", CapsStyle.ROUND, JointStyle.ROUND, 2); 
				g.lineGradientStyle(GradientType.LINEAR, [0x000000, 0x000000], [1, 0], [0, 100], gradientBoxMatrix, SpreadMethod.REPEAT); 
				g.drawRect(-gap, -gap, unscaledWidth + (gap * 2), unscaledHeight + (gap * 2));
			}
		}
	}
}

Open in new window



and update MXML file

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()" xmlns:DrawingClasses="DrawingClasses.*">
	<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 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 {
				var fileName:String = "demo.xml";
				var fileRef:FileReference = new FileReference();
				fileRef.save(xm, fileName);
				
			}
		]]>
	</mx:Script>
	<mx:Canvas id="MainArea" width="100%" height="100%">
		<DrawingClasses:DragImage id="box" source="@Embed(source='Images/box.png')" mouseMove="myoffset(box);" width="28" height="28" x="84" y="6"/>
		<DrawingClasses:DragImage id="circle" source="@Embed(source='Images/circle.png')" mouseMove="myoffset(circle);" width="28" height="28" x="120" y="6"/>
		<DrawingClasses:DragImage id="rectangle" source="@Embed(source='Images/rectangle.png')" mouseMove="myoffset(rectangle);" width="28" height="28" x="160" y="6"/>
		<mx:Label text="Name" x="350" y="10"/>
		<mx:TextInput id="txtInput1" width="50" height="28" x="400" y="10"/>
		<mx:Label text="Value" x="470" y="10"/>
		<mx:TextInput id="txtInput2" width="50" height="28" x="510" y="10"/>
		<mx:TextInput id="txtInput3" width="50" height="28" x="875" 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="750" 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>

Open in new window

0
 
dgofmanCommented:
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 fromShape:Shape;
		private var toShape:Shape;
		//  this boolean variable understand selection on,off    
		private var isSelect:Boolean=false;
		
		public function Line(){
			super();
			this.addEventListener(MouseEvent.CLICK,mouseClick);
		}
		public function setFromShape(value:Shape):void{
			this.fromShape = value;
		}
		public function setToShape(value:Shape):void{
			this.toShape = 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();
		}
		
		public function drawLine(startx:Number, starty:Number, endx:Number, endy:Number, len:Number, gap:Number): void {
			// startx, starty = beginning of dashed line
			// endx, endy = end of dashed line
			// len = length of dash
			// gap = length of gap between dashes
			// ==============
			//
			// init vars
			var seglength:Number, deltax:Number, deltay:Number, segs:Number, cx:Number, cy:Number;
			// calculate the legnth of a segment
			seglength = len + gap;
			// calculate the length of the dashed line
			deltax = endx - startx;
			deltay = endy - starty;
			var delta:Number = Math.sqrt((deltax * deltax) + (deltay * deltay));
			// calculate the number of segments needed
			segs = Math.floor(Math.abs(delta / seglength));
			// get the angle of the line in radians
			var radians:Number = Math.atan2(deltay,deltax);
			// start the line here
			cx = startx;
			cy = starty;
			// add these to cx, cy to get next seg start
			deltax = Math.cos(radians)*seglength;
			deltay = Math.sin(radians)*seglength;
			// loop through each seg
			for (var n:uint = 0; n < segs; n++) {
				graphics.moveTo(cx,cy);
				graphics.lineTo(cx+Math.cos(radians)*len,cy+Math.sin(radians)*len);
				cx += deltax;
				cy += deltay;
			}
			// handle last segment as it is likely to be partial
			graphics.moveTo(cx,cy);
			delta = Math.sqrt((endx-cx)*(endx-cx)+(endy-cy)*(endy-cy));
			if(delta>len){
				// segment ends in the gap, so draw a full dash
				graphics.lineTo(cx+Math.cos(radians)*len,cy+Math.sin(radians)*len);
			} else if(delta>0) {
				// segment is shorter than dash so only draw what is needed
				graphics.lineTo(cx+Math.cos(radians)*delta,cy+Math.sin(radians)*delta);
			}
		}

		//  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);
			drawLine(getX1(), getY1(), getX2(), getY2(), 10, 10);
			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 = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			
			if (fromShape.getX()>boxToX2 && boxFromY2<toShape.getY()){
				drawDirection = "RIGHT_TOP";
			}
			else if (fromShape.getX()>boxToX2 && fromShape.getY()>boxToY2){
				drawDirection  = "RIGHT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && fromShape.getY()>boxToY2){
				drawDirection  = "LEFT_BOTTOM";
			}
			else if (boxFromX2<toShape.getX() && boxFromY2<toShape.getY()){
				drawDirection  = "LEFT_TOP";
			}
			else if (fromShape.getX()>boxToX2){
				drawDirection  = "RIGHT";
			}
			else if (boxFromY2<toShape.getY()){
				drawDirection  = "TOP";
			}
			else if (fromShape.getY()>boxToY2){
				drawDirection  = "BOTTOM";
			}
			else if (boxFromX2<toShape.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 = fromShape.getX()+fromShape.getWidth();
			var boxFromY2:int = fromShape.getY()+fromShape.getHeight();
			var boxToX2:int = toShape.getX()+toShape.getWidth();
			var boxToY2:int = toShape.getY()+toShape.getHeight();
			var diffY:int = 0;
			var diffX:int = 0;
			
			if (drawDirection =="BOTTOM" || drawDirection =="TOP")
			{
				if (fromShape.getX()<=toShape.getX() && boxFromX2>=boxToX2){					
					diffX =(toShape.getWidth())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2>boxToX2){					
					diffX =(boxToX2 - fromShape.getX())/2;
					diffX = fromShape.getX() + diffX;				
				}
				else if (fromShape.getX()<toShape.getX() && boxFromX2<boxToX2){					
					diffX =(boxFromX2 - toShape.getX())/2;
					diffX = toShape.getX() + diffX;				
				}
				else if (fromShape.getX()>toShape.getX() && boxFromX2<boxToX2){					
					diffX =(fromShape.getWidth())/2;
					diffX = fromShape.getX() + diffX;
				}
				if (diffX == 0){
					diffX = fromShape.getX() + (fromShape.getWidth()/2);
				}
			}
			if (drawDirection =="RIGHT" || drawDirection =="LEFT" ){				
				if (fromShape.getY()<=toShape.getY() && boxFromY2>=boxToY2){				
					diffY =(boxToY2 - toShape.getY())/2;					
					diffY = toShape.getY() + diffY;						
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2>boxToY2){					
					diffY =(boxToY2 - fromShape.getY())/2;
					diffY = fromShape.getY() + diffY;
				}
				else if (fromShape.getY()<toShape.getY() && boxFromY2<boxToY2){					
					diffY =(boxFromY2 - toShape.getY())/2;
					diffY = toShape.getY() + diffY;								
				}
				else if (fromShape.getY()>toShape.getY() && boxFromY2<boxToY2){					
					diffY =(fromShape.getHeight())/2;
					diffY = fromShape.getY() + diffY;															
				}				
			}
			switch (drawDirection ){
				case "RIGHT_BOTTOM":
					this.x1 = fromShape.getX()+diffX;
					this.y1 = fromShape.getY();
					this.x2 = boxToX2;
					this.y2 = boxToY2-diffY;				
					break;
				case "RIGHT_TOP":
					this.x1 = fromShape.getX();
					this.y1 = boxFromY2-diffY;
					this.x2 = boxToX2-diffX;
					this.y2 = toShape.getY();				
					break;
				case "LEFT_BOTTOM":
					this.x1 = boxFromX2-diffX;
					this.y1 = fromShape.getY() ;
					this.x2 = toShape.getX();
					this.y2 = boxToY2-diffY;				
					break;					
				case "LEFT_TOP":
					this.x1 = boxFromX2;
					this.y1 = boxFromY2-diffY;
					this.x2 = toShape.getX()+diffX;
					this.y2 = toShape.getY();				
					break;					
				case "RIGHT":
					this.x1 = fromShape.getX();
					this.y1 = diffY;
					this.x2 = boxToX2;
					this.y2 = diffY;			
					break;
				case "TOP":
					this.x1 = diffX;
					this.y1 = boxFromY2;
					this.x2 = diffX;
					this.y2 = toShape.getY();				
					break;
				case "BOTTOM":
					this.x1= diffX;
					this.y1= fromShape.getY();
					this.x2= diffX;
					this.y2= boxToY2;				
					break;
				case "LEFT":
					this.x1= boxFromX2;
					this.y1= diffY;
					this.x2= toShape.getX();
					this.y2= diffY;	
					break;
			}
		}
	}
}

Open in new window

0
 
naveenm_006Author Commented:
How to generate xml file in the below format
I am supplying nodename and and node value through input fields in the browser.

<root>
<first><firstchild>10</firstchild></first>
<second>20</second>
</root>

Also i am sharing the attachement.
could you plz tell me the sol for this query as i need urgently.

Thanks
Naveen.


flowcahart.bmp
0
 
dgofmanCommented:
That is new question :)

Close this one and open a new question.

By the way upload your code to searchforge or I like http://code.google.com/hosting/createProject

And Experts will able to upload from Google SVN server
0

Featured Post

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now