您当前的位置: 在canvas容器中拖拽了2个Image组件，现在需要在两个组件之间连线，并且带有箭头（点Image1的时候出线，点Image2的时候线结束，并且线是带箭头的，由Image1指向Image2），在canvas的两个图片组件是可以移动的，在移动的过程中指向该组件的线是随着组件一起移动的，请问高手如何实现？
------解决方案--------------------
new 一个Sprite，Graphic类画线，箭头，镜头也可以用另外的影片剪辑
把Sprite添加到舞台
------解决方案--------------------
业务逻辑自己去定义，画线无非就是调一个连线的方法，要知道两个组件的中心点，将连个Point传到画线的方法里，然后画一条线，再Endpoint端画一个箭头，先把这个做出来就差不多了，移动组件的时候要听组件的move事件，在move事件中要重绘连线的，即先clear（），再根据两个新的Point点调用画线的方法。、
这里有个网上的画箭头的类，可以参考下
- JScript code
package org.noka.workflow{
//--------- 加载系统显示类 start --------------------
import flash.display.Sprite;
import flash.events.*;
//---------- 加载系统显示类 end --------------------
public class Line {
//----------变量定义 start------------------------
private var startX:Number=0;//开始点的x坐标
private var startY:Number=0;//开始点的y坐标
private var endX:Number=0;//结束点的x坐标
private var endY:Number=0;//结束点的y坐标
private var mwith:int=10;//箭头大小
private var lj:uint=30;//箭头角度
private var rj:uint=60;//箭头角度
private var linesize:uint=2;//线条粗度
private var linecolor:uint=0x990000;//线条颜色
private var linestyle:Number=1.0// 表示线条颜色的 Alpha 值
private var triangle:Sprite = new Sprite();//路径对像
private var mouseisdown:Boolean=false;//鼠标是否处于按状态
private var coordinate:Array = new Array();//线段坐标
private var mouseisonline:Boolean=false;//鼠标是否在线上
//----------变量定义 end -------------------------
/*******************************************************************
*= 根据两个从标点画一个箭头
*@ PstartX:Number 开始点的X坐标值
*@ PstartY:Number 开始点的Y坐标值
*@ PendX:Number 结束点的X坐标值
*@ PendY:Number 结束点的Y坐标值
*+ 返回Sprite对像
********************************************************************/
public function markLineNode(PstartX:Number=200,PstartY:Number=200,PendX:Number=500,PendY:Number=500):Sprite{
coordinate[0]=[PstartX,PstartY];
coordinate[1]=[PendX,PendY];
return line();
}
/*******************************************************************
*= 根据给点的二维数据画折线箭头
*@ Pcoordinate:Array 一系列坐标点的二维数组
*+ 返回Sprite对像
********************************************************************/
public function markLineInit(Pcoordinate:Array):Sprite{
coordinate=Pcoordinate;
return line();
}
/*******************************************************************
*= 根据已有二维数组对像画箭头
*+ 返回Sprite对像
*******************************************************************/
public function markLineMoues():Sprite{
return line();
}
/*******************************************************************
*= 根据已有二维数组对像画箭头，供类内部使用
*+ 返回Sprite对像
*******************************************************************/
private function line():Sprite{
triangle.graphics.clear();
triangle.graphics.lineStyle(linesize, linecolor,linestyle);
triangle.graphics.moveTo(coordinate[0][0],coordinate[0][1]);
for(var i:int=0;i <coordinate.length;i++){
triangle.graphics.lineTo(coordinate[i][0],coordinate[i][1]);//画线段
}
//================确定箭头坐标===========================================
//-------结束点-----------------------------------
var endX:Number=coordinate[coordinate.length-1][0];
var endY:Number=coordinate[coordinate.length-1][1];
//-------开始点------------------------------------
var startX:Number=coordinate[coordinate.length-2][0];
var startY:Number=coordinate[coordinate.length-2][1];
var xx:Number=endX;
var yy:Number=endY;
//-------计算箭头结束点-------------------------------
var xx1:Number=xx-mwith*Math.cos(Math.atan((yy-startY)/(xx-startX))-(lj * (Math.PI/180)));
var yy1:Number=yy-mwith*Math.sin(Math.atan((yy-startY)/(xx-startX))-(lj * (Math.PI/180)));
var xx2:Number=xx-mwith*Math.sin((rj * Math.PI/180)-Math.atan((yy-startY)/(xx-startX)));
var yy2:Number=yy-mwith*Math.cos((rj * Math.PI/180)-Math.atan((yy-startY)/(xx-startX)));
if(startX>endX){
xx1=xx+mwith*Math.cos(Math.atan((yy-startY)/(xx-startX))-(lj * (Math.PI/180)));
yy1=yy+mwith*Math.sin(Math.atan((yy-startY)/(xx-startX))-(lj * (Math.PI/180)));
xx2=xx+mwith*Math.sin((rj * Math.PI/180)-Math.atan((yy-startY)/(xx-startX)));
yy2=yy+mwith*Math.cos((rj * Math.PI/180)-Math.atan((yy-startY)/(xx-startX)));
}
//----------------开始画箭头---------------------
triangle.graphics.lineTo(xx1,yy1);
triangle.graphics.moveTo(endX,endY);
triangle.graphics.lineTo(xx2,yy2);
//----------------响应鼠标事件--------------------------------------------------
triangle.addEventListener(MouseEvent.MOUSE_DOWN,mouser_down);//鼠标按下
triangle.addEventListener(MouseEvent.MOUSE_MOVE,mouser_move);//鼠标移动
triangle.addEventListener(MouseEvent.MOUSE_UP,mouser_up);//鼠标弾起
triangle.addEventListener(MouseEvent.DOUBLE_CLICK,mouser_click);//鼠标双击
triangle.addEventListener(MouseEvent.CLICK,mouser_double_click);//鼠标单击
return triangle;
}
//-------------------------事件处理------------------------
/*******************************************************************
*= 响应鼠标按下事件
*+ 无返回对像
*******************************************************************/
public function mouser_down(event:MouseEvent){
mouseisdown=true;//鼠标按下
}
/*******************************************************************
*= 响应鼠标移动事件
*+ 无返回对像
*******************************************************************/
public function mouser_move(event:MouseEvent){
if(mouseisdown){
var mouseXX:Number=event.stageX;
var mouseYY:Number=event.stageY;
if((mouseXX/mouseYY)==(coordinate[0][0]/coordinate[0][1])){//在线上
trace("在线上");
}else{
}
//coordinate[coordinate.length]=[mouseXX,mouseYY];
//markLine();
}
}
/*******************************************************************
*= 响应鼠标弹起事件
*+ 无返回对像
*******************************************************************/
public function mouser_up(event:MouseEvent){
mouseisdown=false;//鼠标弹起
}
/*******************************************************************
*= 响应鼠标单击事件
*+ 无返回对像
*******************************************************************/
public function mouser_click(event:MouseEvent){
}
/*******************************************************************
*= 响应鼠标双击事件
*+ 无返回对像
*******************************************************************/
public function mouser_double_click(event:MouseEvent){
}
//===================================================================
public function setTriangle(Ptriangle:Sprite):void{
triangle=Ptriangle;
}
public function getTriangle():Sprite{
return triangle;
}
public function setMouseisdown(Pmouseisdown:Boolean):void{
mouseisdown=Pmouseisdown;
}
public function getMouseisdown():Boolean{
return mouseisdown;
}
public function setCoordinate(Pcoordinate:Array):void{
coordinate=Pcoordinate;
}
public function getCoordinate():Array{
return coordinate;
}
public function setMouseisonline(Pmouseisonline:Boolean):void{
mouseisonline=Pmouseisonline;
}
public function getMouseisonline():Boolean{
return mouseisonline;
}
//====
}
}