Dessiner une flèche / vecteur dans canvas avec la bonne orientation !

Un modèle plus complet


Ce modèle de flèche ou de vecteur est juste un peu plus complet que celui proposé précédemment lien.
La fonction Vecteur(xA,yA,xB,yB,ArrowLength,ArrowWidth) détaillée ci-dessous trace le vecteur $\overrightarrow{AB}, c'est-à-dire le segment $[AB] ainsi que la flèche au point $B orientée convenablement.
Les paramètres sont
  • $xA et yA: les coordonnées de l'origine A
  • $xA et yA: les coordonnées de l'extrémité B
  • ArrowLength et ArrowWidth: deux paramètres optionnels et qui désignent deux paramètres de taille pour le dessin de la flèche, tel que représenté ci-dessous:
  • ArrowInset: paramètre optionnel aussi et fixant la profondeur de la flèche.
Les 3 paramètres, fixés par défaut respectivement à 10, 8 et 10, sont des dimensions, sans unité, en pixel.
\fbox{\psset{unit=1.4cm,linewidth=1.2pt,arrowsize=7pt}
\begin{pspicture}(-1,-1)(7,5)
%    \psline[arrowsize=14pt,arrowlength=2,arrowinset=1.2]{->}(1,1)(5,3)
\psline(0,2)(6,2)
\psline(4.2,3.4)(6,2)(4.2,0.6)
\psline[linewidth=1.5pt,linestyle=dotted,linecolor=blue](4.2,3.4)(4.2,0.6)
\rput(-0.1,2.2){\large$A$}\rput(0,1.97){\Large$\bullet$}
\rput(6.2,2.2){\large$B$}\rput(6,1.97){\Large$\bullet$}
\rput(3.9,2.2){\large$C$}\rput(4.2,1.97){\Large\blue$\bullet$}
\rput(4.2,3.6){\large$D$}\rput(4.2,3.37){\Large\blue$\bullet$}
\rput(4.2,.3){\large$E$}\rput(4.2,.57){\Large\blue$\bullet$}
%
\psline{<->}(3.6,2.1)(3.6,3.5)\rput{90}(3.3,2.8){\small ArrowWidth}
\psline{<->}(3.6,1.9)(3.6,.5)\rput{90}(3.3,1.2){\small ArrowWidth}
\psline{<->}(4.2,-0.2)(6,-.2)\rput(5.1,-.45){\small ArrowLength}
\end{pspicture}}



Il ne reste, par rapport au cas précédent, qu' à calculer les coordonnées du point B'.
On a la relation de proportionnalité (ou plus exactement pour des vecteurs, de colinéarité) $\overrightarrow{BB'}=ArrowInset\tm\dfrac{\overrightarrow{AB}}{AB}, soit,
\la\begin{array}{lcl} 
xB'-xB&=&\text{ArrowInset}\tm\dfrac{xB-xA}{AB}\\[.4cm]
yB'-yB&=&\text{ArrowInset}\tm\dfrac{yB-yA}{AB}\\
\enar\right.

ou encore,
\la\begin{array}{lcl} 
xB'&=&xB+\text{ArrowInset}\tm\dfrac{xB-xA}{AB}\\[.4cm]
yB'&=&yB+\text{ArrowInset}\tm\dfrac{yB-yA}{AB}\\
\enar\right.

Code: Select all
<canvas id="canvas" width="300" height="200" style="border: 2px solid black;"></canvas>
<script>
Width=document.getElementById("canvas").width;
Height=document.getElementById("canvas").height;
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

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,ArrowInset) {
 if (ArrowLength === undefined) {ArrowLength=10;}
 if (ArrowWidth === undefined) {ArrowWidth=8;}
 if (ArrowInset === undefined) {ArrowInset=10;}
 ctx.lineCap="round";ctx.fillStyle=ctx.strokeStyle;

 // Calculs des coordonnées des points B' (ici Bp), C, D et E
 AB=Norm(xA,yA,xB,yB);
 xBp=xB+ArrowInset*(xB-xA)/AB;yBp=yB+ArrowInset*(yB-yA)/AB;
 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;
 // et on trace le segment [AB], et sa flèche:
 ctx.beginPath();
 ctx.moveTo(xA,yA);ctx.lineTo(xB,yB);
 ctx.stroke();
 ctx.beginPath();
 ctx.moveTo(xD,yD);ctx.lineTo(xB,yB);ctx.lineTo(xE,yE);ctx.lineTo(xBp,yBp);
 ctx.fill();
}


// Et 3 exemples d'utilisation:
ctx.strokeStyle="red";
Vecteur(30,180,120,150);

ctx.strokeStyle="blue";
ctx.lineWidth=4;
ArrowLength=10;ArrowWidth=18;ArrowInset=30;
Vecteur(200,100,30,25,ArrowLength,ArrowWidth,ArrowInset);

ctx.strokeStyle="green";
ctx.lineWidth=2;
ArrowLength=6;ArrowWidth=4;ArrowInset=5;
for (i=0;i<15;i++) {
 Vecteur(240,30+10*i,260,20+10*i,ArrowLength,ArrowWidth,ArrowInset);
}
</script>
Affichage:

Voir aussi: