flex 畫連接線條
flex 畫連接線條
1， 寫一個類 Line.as 主要用於畫線條
package com
{
import flash.geom.Point;
import mx.core.UIComponent;
public class Line extends UIComponent
{
//起啟節點
public var startPoint:Point;
//結束節點、
public var endPoint:Point;
//是否有箭頭
public var isArrow:Boolean = true;
//箭頭大小
public var arrowSize:uint = 6;
//顏色
public var lineColor:uint = 0x000000;
//提示語
public var tip:String = "線條";
public function Line()
{
super();
}
public function drawLine(){
this.graphics.clear();
this.graphics.lineStyle(2,lineColor);
this.graphics.moveTo(startPoint.x,startPoint.y);
this.graphics.lineTo(endPoint.x,endPoint.y);
this.toolTip = tip;
//畫箭頭
if(isArrow){
var angle:Number = this.getAngle();
var centerX:Number = endPoint.x - arrowSize * Math.cos(angle*(Math.PI/180));
var centerY:Number = endPoint.y + arrowSize * Math.sin(angle*(Math.PI/180));
var leftX:Number = centerX + arrowSize * Math.cos((angle+120)*(Math.PI/180));
var leftY:Number = centerY - arrowSize * Math.sin((angle+120)*(Math.PI/180));
var rightX:Number = centerX + arrowSize * Math.cos((angle+240)*(Math.PI/180));
var rightY:Number = centerY - arrowSize * Math.sin((angle+240)*(Math.PI/180));
//this.graphics.beginFill(lineColor,1);
this.graphics.lineStyle(2,lineColor,1);
this.graphics.moveTo(endPoint.x,endPoint.y);
this.graphics.lineTo(leftX,leftY);
this.graphics.lineTo(centerX,centerY);
this.graphics.lineTo(rightX,rightY);
this.graphics.lineTo(endPoint.x,endPoint.y);
//this.graphics.endFill();
}
}
//得到線的角度
private function getAngle(){
var temX:Number = endPoint.x - startPoint.x;
var temY:Number = startPoint.y - endPoint.y;
var angle:Number = Math.atan2(temY,temX)*(180/Math.PI)
return angle;
}
//刪除
public function removeLine():void{
this.graphics.clear();
}
}
}
2 新建類 LineLag.as 用於存放線條
package com
{
public class LineLag
{
public var line:Line;
public var isHead:Boolean;//是否是箭頭
public function LineLag(line:Line,isHead:Boolean)
{
this.line = line;
this.isHead = isHead;
}
}
}
3 新建類LinkMap.as 用於畫圖標
package com
{
import flash.events.MouseEvent;
import flash.geom.Point;
import flash.net.SharedObject;
import mx.containers.Canvas;
import mx.controls.Image;
import mx.controls.Label;
public class LinkMap extends Canvas
{
private var oldIndex:int;
private var lineList:Array = new Array();
private var num:int = 0;
public var startDrawClick:Boolean;
public var endDrawClick:Boolean;
public function LinkMap(point:Point, width:Number,height:Number,name:String,type:int)
{
super();
this.x = point.x;
this.y = point.y;
this.width = width;
this.height = height;
this.init(name,type);
}
private function init(name:String,type:int):void{
this.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
this.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
this.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
// 設置沒有滾動條
this.verticalScrollPolicy = "off";
this.horizontalScrollPolicy = "off";
var uLable:Label = new Label();
uLable.text = name;
uLable.x = 0 ;
uLable.y = 60;
uLable.width = 30;
uLable.height =60;
this.addChild(uLable);
var uImage:Image = new Image();
switch(type){
case 1:
uImage.source = "image/client.png";
break;
case 2:
uImage.source = "image/server.png";
}
uImage.x = 10;
uImage.y = 0;
this.addChild(uImage);
}
private function onMouseDown(event:MouseEvent):void{
//設置移動的圖標所處的層次
oldIndex = this.parent.getChildIndex(this);
this.parent.setChildIndex(this,this.parent.numChildren-1);
//設置全局變數
var shareObject:SharedObject = SharedObject.getLocal("drawLine","/");
var isDrawLine:Boolean = shareObject.data.drawLine ;
if(!isDrawLine){
this.startDrag(false);//開始移動
}else{
startDrawClick = true;
}
}
private function onMouseMove(evnet:MouseEvent):void{
this.refreshLine();
}
private function onMouseUp(event:MouseEvent):void{
this.stopDrag();//停止移動
this.parent.setChildIndex(this,oldIndex);//恢復圖標所以的層次
}
/**
* 重繪圖標上的連線
* */
private function refreshLine():void{
var x:int = this.getCenterX();
var y:int = this.getCenterY();
for(var i:int = 0; i < lineList.length; i++){
var lineFlag:LineLag = lineList[i];
var line:Line = lineFlag.line;
var isHead:Boolean = lineFlag.isHead;
/**
* 如果是連線箭頭所指的，則重設線條開始位置
* 如果不是，則重設連線結束
**/
if(isHead){
line.startPoint = new Point(x,y);
}else{
line.endPoint = new Point(x,y);
}
line.drawLine();
}
}
public function setLine(line:Line,flag:Boolean ):void{
var lineFlag:LineLag = new LineLag(line,flag);
lineList[num] = lineFlag;
num++;
}
public function getCenterX():int{
return this.x + 20;
}
public function getCenterY():int{
return this.y + 20;
}
}
}
4,新建應用程序
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
<![CDATA[
import events.ShowTitle;
import mx.controls.Alert;
import com.Line;
import com.LinkMap;
private var lineList:Array = new Array();
private var currentLine:int = 0;
private var drawLine:Boolean = false;
private var startMap:LinkMap;
private var endMap:LinkMap;
/**
* 初始化
* */
function init():void{
//添加三個圖標到容器
var startPoint:Point = new Point(450,50);
var endPoint:Point = new Point(200,350);
var endPoint2:Point = new Point(600,400);
var linkMap1:LinkMap = new LinkMap(startPoint,100,80,"a",1);
var linkMap2:LinkMap = new LinkMap(endPoint,100,80,"b",2);
var linkMap3:LinkMap = new LinkMap(endPoint2,100,80,"c",2);
myCanvas.addChild(linkMap1);
myCanvas.addChild(linkMap2);
myCanvas.addChild(linkMap3);
//設置全局變數
var shareObject:SharedObject = SharedObject.getLocal("drawLine","/");
shareObject.data.drawLine = false;
//添加事件
myCanvas.addEventListener(MouseEvent.MOUSE_DOWN,onMouseDown);
myCanvas.addEventListener(MouseEvent.MOUSE_MOVE,onMouseMove);
myCanvas.addEventListener(MouseEvent.MOUSE_UP,onMouseUp);
}
/**
* 開始畫線
* */
function onMouseDown(event:MouseEvent):void{
if(drawLine && this.isDrawClickNode(event,1)){
var line:Line = new Line();
line.startPoint = new Point(event.stageX,event.stageY);
line.endPoint = new Point(event.stageX,event.stageY);
line.drawLine();
myCanvas.addChild(line);
lineList[currentLine] = line;
}
}
//稱動滑鼠
function onMouseMove(event:MouseEvent):void{
if(drawLine && lineList.length > currentLine ){
var line:Line = lineList[currentLine] as Line;
line.endPoint = new Point(event.stageX,event.stageY);
line.drawLine();
}
}
function onMouseUp(event:MouseEvent):void{
if(drawLine){
if(this.isDrawClickNode(event,2) && startMap != endMap){
//節點與連線建立關係
var line:Line = lineList[currentLine] as Line;
startMap.setLine(line,true);
endMap.setLine(line,false);
currentLine ++;
drawLine = false;
}else{
var line:Line = lineList[currentLine] as Line;
if(line != null){
line.removeLine();
lineList.slice(currentLine,1);//刪除指定位置的對象
myCanvas.removeChild(line);
}
}
}
}
//點擊開始畫線
function startDrawLine():void{
//設置一個全局變數，
var shareObject:SharedObject = SharedObject.getLocal("drawLine","/");
shareObject.data.drawLine = true;
drawLine = true;
}
//點擊移動
function onMove():void{
var shareObject:SharedObject = SharedObject.getLocal("drawLine","/");
shareObject.data.drawLine = false;
drawLine = false;
}
/**
* 判斷事件是否是在節點上
* */
function isDrawClickNode(event:MouseEvent,type:int):Boolean{
var children:Array = myCanvas.getChildren();
for(var i:int=0; i < children.length; i++){
var child:Object = children[i];
if(child is LinkMap){
var map:LinkMap = child as LinkMap;
var x:int = map.x;
var y:int = map.y;
var width:int = map.width;
var height:int = map.height;
if(event.stageX > x && event.stageX < x+width && event.stageY > y && event.stageY < y+height){
if(type == 1){
startMap = map;
}else if(type == 2){
endMap = map;
}
return true
}
}
}
return false;
}
]]>
</mx:Script>
<mx:Canvas id="myCanvas" width_="90%" height="90%" />
<mx:Button label="畫線" click="startDrawLine()" x="10" y="200" fontSize="15" />
<mx:Button label="移動" click="onMove()" x="10" y="100" fontSize="15" />
</mx:Application>
推薦閱讀：
