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. 

<canvas id="canvas" width="300" height="200" ></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>
Voir aussi:


LongPage: h2: 1 - h3: 0