Sample Example:
Less nonsense, directly on the code:
Arrow.js
/** * To achieve the function of two-point arrow @author mapleque@163.com * @version 1.0 * @date 2013.05.23/;(function (window,document) {if (
window.mapleque==undefined) window.mapleque={};
if (window.mapleque.arrow!=undefined) return; /** * Component External interface/var proc={/** * Receive Canvas object, and on this draw arrow (arrowhead start point has been set) * @param context */paint:function (context) {Paint (t His,context);},/** * Set arrowhead starting point * @param sp start * @param EP endpoint * @param st Strength/set:function (sp,ep,st) {init (this,sp,ep,s t);/** * Set arrow appearance * @param args/setpara:function (args) {this.size=args.arrow_size;//arrow size This.sharp=args.arro
w_sharp;//arrow Sharp Blunt}};
var init=function (a,sp,ep,st) {a.sp=sp;//Beginning a.ep=ep;//endpoint a.st=st;//intensity};
var paint=function (a,context) {var sp=a.sp;
var Ep=a.ep;
if (context==undefined) return;
Draw Arrow Main Line Context.beginpath ();
Context.moveto (SP.X,SP.Y);
Context.lineto (EP.X,EP.Y);
Draw Arrow Head Var h=_calch (A,sp,ep,context);
Context.moveto (EP.X,EP.Y);
Context.lineto (H.H1.X,H.H1.Y); Context.moveto (EP.X,EP.Y);
Context.lineto (H.H2.X,H.H2.Y);
Context.stroke ();
};
Computes the head coordinates var _calch=function (a,sp,ep,context) {var Theta=math.atan (ep.x-sp.x)/(EP.Y-SP.Y));
var Cep=_scrollxoy (Ep,-theta);
var Csp=_scrollxoy (Sp,-theta);
var ch1={x:0,y:0};
var ch2={x:0,y:0};
var l=cep.y-csp.y; ch1.x=cep.x+l* (a.sharp| |
0.025); ch1.y=cep.y-l* (a.size| |
0.05); ch2.x=cep.x-l* (a.sharp| |
0.025); ch2.y=cep.y-l* (a.size| |
0.05);
var H1=_scrollxoy (Ch1,theta);
var H2=_scrollxoy (Ch2,theta);
return {h1:h1, h2:h2};
}; Rotational coordinates var _scrollxoy=function (P,theta) {return {X:p.x*math.cos (theta) +p.y*math.sin (theta), Y:p.y*math.cos (theta)-P
. X*math.sin (Theta)};
};
var arrow=new Function ();
Arrow.prototype=proc;
Window.mapleque.arrow=arrow; }) (window,document);
Arrow.html