// Fonction qui trace le vecteur, cf. Dessiner une flèche / vecteur
function Norm(xA,yA,xB,yB) {return Math.sqrt(Math.pow(xB-xA,2)+Math.pow(yB-yA,2));}
function Vecteur (xA,yA,xB,yB,ArrowLength,ArrowWidth) {
if (ArrowLength === undefined) {ArrowLength=10;}
if (ArrowWidth === undefined) {ArrowWidth=10;}
ctx.lineCap="round";ctx.beginPath();ctx.moveTo(xA,yA);ctx.lineTo(xB,yB);ctx.stroke();
//
AB=Norm(xA,yA,xB,yB);
xC=xB+ArrowLength*(xA-xB)/AB;yC=yB+ArrowLength*(yA-yB)/AB;
xD=xC+ArrowWidth*(-(yB-yA))/AB;yD=yC+ArrowWidth*((xB-xA))/AB;
xE=xC-ArrowWidth*(-(yB-yA))/AB;yE=yC-ArrowWidth*((xB-xA))/AB;
ctx.beginPath();ctx.moveTo(xD,yD);ctx.lineTo(xB,yB);ctx.lineTo(xE,yE);;ctx.stroke();
}
// Ce qui se passe quand le bouton de la souris est enfoncé:
function MouseClickDown(e){
// Coordonnées du click, qui va ensuite lancer le déplacement
Xclick=e.pageX-canvas.offsetLeft;Yclick=e.pageY-canvas.offsetTop;
xMA=xA-Xclick;yMA=yA-Yclick;
xAB=xB-xA;yAB=yB-yA;
if (Xclick > xA-5 && Xclick < xA+5 && Yclick > yA-5 && Yclick < yA+5) {
document.getElementById("canvas").style.cursor="grabbing";
canvas.onmousemove = MoveA;}
if (Xclick > xB-5 && Xclick < xB+5 && Yclick > yB-5 && Yclick < yB+5) {
document.getElementById("canvas").style.cursor="grabbing";
canvas.onmousemove = MoveB;}
a=(yB-yA)/(xB-xA);b=(xA*yB-xB*yA)/(xB-xA);yM=a*Xclick-b;
if (xA < xB) {xmin=xA;xmax=xB;} else {xmin=xB;xmax=xA;}
if (Xclick > xmin+5 && Xclick < xmax-5 && Yclick < yM+3 && Yclick > yM-3) {
document.getElementById("canvas").style.cursor="grabbing";
canvas.onmousemove = MoveAB;}
}
function MoveA(e){xA=e.pageX-canvas.offsetLeft;yA=e.pageY-canvas.offsetTop;}
function MoveB(e){xB=e.pageX-canvas.offsetLeft;yB=e.pageY-canvas.offsetTop;}
function MoveAB(e){
xA=(e.pageX-canvas.offsetLeft)+(xMA);yA=(e.pageY-canvas.offsetTop)+(yMA);
xB=xA+xAB;yB=yA+yAB;
}
// Lorsqu'on relâche le bouton de la souris:
function MouseClickUp(){
canvas.onmousemove = null;
document.getElementById("canvas").style.cursor="auto";
}
// A chaque intervalle, on efface tout et on retrace le vecteur, avec
// éventuellement les valeurs recalculées pour xA, yA, xB, et yB
function ReDraw() {ctx.clearRect(0,0,Width,Height);Vecteur(xA,yA,xB,yB);}
setInterval(ReDraw, 50);