<span style="font-size:14px;"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>绘制箭头测试</title> <script src="7_5/jquery.min.js" ></script> <script src="7_5/jquery-ui.min.js" ></script> <script src="7_5/raphael.js" ></script> <script> var paper; $(function() { paper = Raphael("paper",500,500); var path = paper.path("M 50 60 80 130"); var path_arrow = paper.path(drawArrow(path.id));//生成的每一块图形都拥有唯一标示的id //另外一个API自带的线的arrow-end属性在多数情况下试用 //效果等同于生成path_arrow 示例: path.attr({'arrow-end':'classic-wide-long'}) }) /* * 自己绘制线段箭头 */ function drawArrow(line_id) { var size = 5; //analysis line var line = paper.getById(line_id); //get last points var length = line.attrs.path.length; var x1 = line.attrs.path[length-1][1];//单线段起点 var y1 = line.attrs.path[length-1][2];//单线段起点 var x2 = line.attrs.path[length-2][1];//单线段终点 var y2 = line.attrs.path[length-2][2];//单线段终点 //get last angle var angle = Raphael.angle(x1, y1, x2, y2);//API方法获取角度,原直线倾斜度 var angle_45_one = Raphael.rad(angle - 45);//API方法转变为弧度 var angle_45_two = Raphael.rad(angle + 45);//API方法转变为弧度 //arrow points求出箭头的双向点 var angle_x1 = x1 - Math.cos(angle_45_one) * size; var angle_y1 = y1 - Math.sin(angle_45_one) * size; var angle_x2 = x1 - Math.cos(angle_45_two) * size; var angle_y2 = y1 - Math.sin(angle_45_two) * size; //return var result = ["M",angle_x1,angle_y1, "L", x1,y1,"L",angle_x2, angle_y2]; return result; } </script> </head> <body> <div id="paper">. </div> </body> </html> </span>