Ligne en pointillés dans canvas
Style en javascript
… ou comment tracer des lignes en pointillés (line style: dashed)
On trace une ligne en pointillés en alternant de courts segments.
La fonction globale DashedLine(xA,yA,xB,yB,L,l) trace ceci, en utilisant 6 paramètres:
-
et
: les coordonnées du point
, une des deux extrémités du segment
-
et
: les coordonnées du point
, l'autre extrémité du segment
-
et
les deux longueurs, en pixels, respectivement de la longueur des tirets utilisés et de l'espacement entre chque tiret.
![\psset{unit=1.2cm}\begin{pspicture}(-.5,-.5)(8.2,1.8)
\newcommand{\f}[1]{#1 .7 add}
\multido{\i=0+1}{8}{\psline[linewidth=1.8pt](\i,1)(! \f{\i}\space1)}
\psline[linewidth=.3pt](2,1.2)(2,0)
\psline[linewidth=.3pt](2.7,1.2)(2.7,0)
\psline[arrowsize=6pt,linewidth=.3pt]{<->}(2.,.2)(2.7,.2)
\rput(2.35,-.1){$L$}
\psline[linewidth=.3pt](4.7,1.2)(4.7,0)
\psline[linewidth=.3pt](5,1.2)(5,0)
\psline[arrowsize=6pt,linewidth=.3pt]{->}(4.2,.2)(4.7,.2)
\psline[arrowsize=6pt,linewidth=.3pt]{<-}(5,.2)(5.5,.2)
\psline[linewidth=.3pt](4.7,.2)(5,.2)
\rput(4.85,-.1){$l$}
\rput(0,.98){$\bullet$}\rput(0,1.2){$A$}
\rput(7.7,.98){$\bullet$}\rput(7.7,1.2){$B$}
\end{pspicture}](canvas-line-style-pointilles-dashed-IMG/11.png)
Exemples de valeurs pour
![$L$](canvas-line-style-pointilles-dashed-IMG/12.png)
![$l$](canvas-line-style-pointilles-dashed-IMG/13.png)
![\psset{unit=1.2cm}\begin{pspicture}(-.3,-.3)(8.2,2.7)
\newcommand{\f}[1]{#1 .7 add}
\multido{\i=0+1}{8}{\psline[linewidth=1.5pt](\i,2)(! \f{\i}\space2)}
\rput[l](0,2.2){$L=0,7$, $l=0,3$}
\renewcommand{\f}[1]{#1 .9 add}
\multido{\i=0+1}{8}{\psline[linewidth=1.5pt](\i,1)(! \f{\i}\space1)}
\rput[l](0,1.2){$L=0,9$, $l=0,1$}
\renewcommand{\f}[1]{#1 .5 add}
\multido{\i=0+1}{8}{\psline[linewidth=1.5pt](\i,0)(! \f{\i}\space0)}
\rput[l](0,.2){$L=l=0,5$}
\end{pspicture}](canvas-line-style-pointilles-dashed-IMG/14.png)
Code javascript et exemples d'utilisation
- Code: Select all
-
<canvas id="canvas" width="300" height="200" style="border: 2px solid black;"></canvas>
<script>
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 DashedLine(xA,yA,xB,yB,L,l) {
Nhatch=Norm(xA,yA,xB,yB)/(L+l);
x1=xA;y1=yA;
for (i=0;i < Nhatch; i++) {
newXY=Hatch(xA,yA,xB,yB,x1,y1,L);
x2=newXY[0];y2=newXY[1];
ctx.beginPath();ctx.moveTo(x1,y1);ctx.lineTo(x2,y2);ctx.stroke();
newXY=Hatch(xA,yA,xB,yB,x2,y2,l);
x1=newXY[0];
y1=newXY[1];
}
}
function Hatch(xA,yA,xB,yB,x1,y1,l) {
a=(yB-yA)/(xB-xA);b=yA-a*xA;// Equation reduite y=ax+b de (AB):
if ((xB-xA)>0) {sgn=1;} else {sgn=-1;}
x2=sgn*l/Math.sqrt(1+a*a)+x1;
y2=a*x2+b;
if (Norm(x1,y1,x2,y2)>Norm(x1,y1,xB,yB)) {x2=xB;y2=yB;}
return [x2,y2];
}
// Et 4 exemples d'utilisation:
xA=10;yA=20;
xB=200;yB=50;
DashedLine(xA,yA,xB,yB,20,5);
ctx.strokeStyle = "red";ctx.lineWidth=3;
xA=10;yA=50;xB=250;yB=100;
DashedLine(xA,yA,xB,yB,20,5);
ctx.strokeStyle = "green";ctx.lineWidth=2;
xA=10;yA=160;xB=250;yB=130;
DashedLine(xA,yA,xB,yB,50,5);
ctx.strokeStyle = "blue";
xA=10;yA=180;xB=280;yB=180;
DashedLine(xA,yA,xB,yB,2,2);
</script>
- Affichage:
Détails et explications sur le code et les calculs effectués
Pour tracer cette ligne pointillée, on part du point
![$M_1\lp x_1;y_1\rp$](canvas-line-style-pointilles-dashed-IMG/15.png)
![$A\lp x_A;y_A\rp$](canvas-line-style-pointilles-dashed-IMG/16.png)
![$x_1=x_A$](canvas-line-style-pointilles-dashed-IMG/17.png)
![$y_1=y_A$](canvas-line-style-pointilles-dashed-IMG/18.png)
On cherche alors le point
![$M_2\lp x_2;y_2\rp$](canvas-line-style-pointilles-dashed-IMG/19.png)
![$M_1M_2=L$](canvas-line-style-pointilles-dashed-IMG/20.png)
![$M_2\in[M_1;B]$](canvas-line-style-pointilles-dashed-IMG/21.png)
![$[M_1M_2]$](canvas-line-style-pointilles-dashed-IMG/22.png)
On réitère ensuite en prenant
![$M_1=M_2$](canvas-line-style-pointilles-dashed-IMG/23.png)
![$M_2$](canvas-line-style-pointilles-dashed-IMG/24.png)
![$M_1M_2=l$](canvas-line-style-pointilles-dashed-IMG/25.png)
![$M_1M_2$](canvas-line-style-pointilles-dashed-IMG/26.png)
On recommence ensuite…
Cette boucle est implémentée dans la fonction DashedLine.
Il reste à déterminer les coordonnées du point
![$M_2\lp x_2;y_2\rp$](canvas-line-style-pointilles-dashed-IMG/27.png)
Détails de la fonction Hatch
On cherche donc les coordonnées![$\lp x_2;y_2\rp$](canvas-line-style-pointilles-dashed-IMG/28.png)
![$M_2$](canvas-line-style-pointilles-dashed-IMG/29.png)
![$M_1M_2=L$](canvas-line-style-pointilles-dashed-IMG/30.png)
![$M_2\in(AB)$](canvas-line-style-pointilles-dashed-IMG/31.png)
![$M_2\in[M_1;B]$](canvas-line-style-pointilles-dashed-IMG/32.png)
Tout d'abord, si on connaît l'équation réduite
![$y=ax+b$](canvas-line-style-pointilles-dashed-IMG/33.png)
![$(AB)$](canvas-line-style-pointilles-dashed-IMG/34.png)
![$M_2\in(AB)$](canvas-line-style-pointilles-dashed-IMG/35.png)
![$y_2=ax_2+b$](canvas-line-style-pointilles-dashed-IMG/36.png)
Equation réduite de la droite
L'équation réduite s'écrit ![$y=ax+b$](canvas-line-style-pointilles-dashed-IMG/38.png)
Le coefficient directeur
![$a$](canvas-line-style-pointilles-dashed-IMG/39.png)
![$a=\dfrac{\Delta y}{\Delta x}=\dfrac{y_B-y_A}{x_B-x_A}$](canvas-line-style-pointilles-dashed-IMG/40.png)
Ensuite, comme par exemple
![$A\in(AB)$](canvas-line-style-pointilles-dashed-IMG/41.png)
![$y_A=ax_A+b$](canvas-line-style-pointilles-dashed-IMG/42.png)
![$b$](canvas-line-style-pointilles-dashed-IMG/43.png)
![$b=y_A-ax_A$](canvas-line-style-pointilles-dashed-IMG/44.png)
On calcule ainsi simplement les coefficients
![$a$](canvas-line-style-pointilles-dashed-IMG/45.png)
![$b$](canvas-line-style-pointilles-dashed-IMG/46.png)
Calcul des coordonnées de ![$M_2$](canvas-line-style-pointilles-dashed-IMG/47.png)
Ensuite, ![$M_1M_2=L$](canvas-line-style-pointilles-dashed-IMG/48.png)
![M_1M_2=L
\iff
M_1M_2^2=L^2
\iff
\left( x_2-x_1\rp^2+\left( y_2-y_1\rp^2=L^2](canvas-line-style-pointilles-dashed-IMG/49.png)
Or on a vu que
![$y_2=ax_2+b$](canvas-line-style-pointilles-dashed-IMG/50.png)
![$M_1$](canvas-line-style-pointilles-dashed-IMG/51.png)
![$(AB)$](canvas-line-style-pointilles-dashed-IMG/52.png)
![$y_1=ax_1+b$](canvas-line-style-pointilles-dashed-IMG/53.png)
![$y_2-y_1=\lp ax_2+b\rp-\lp ax_1+b\rp=a\lp x_2-x_1\rp$](canvas-line-style-pointilles-dashed-IMG/54.png)
![\begin{array}{ll}
M_1M_2=L
&\iff \left( x_2-x_1\rp^2+\left( y_2-y_1\rp^2=L^2 \\[1em]
&\iff \left( x_2-x_1\rp^2+a^2\left( x_2-x_1\rp^2=L^2\\[1em]
&\iff \left( x_2-x_1\rp^2\left(1+a^2\rp=L^2 \\[1em]
&\iff \left( x_2-x_1\rp^2=\dfrac{L^2}{1+a^2}
\enar](canvas-line-style-pointilles-dashed-IMG/55.png)
On tourve ainsi deux possibilités pour
![$x_2$](canvas-line-style-pointilles-dashed-IMG/56.png)
![x_2-x_1=\sqrt{\dfrac{L^2}{1+a^2}}=\dfrac{L}{\sqrt{1+a^2}}
\iff
x_2=x_1+\dfrac{L}{\sqrt{1+a^2}}](canvas-line-style-pointilles-dashed-IMG/57.png)
ou
![x_2-x_1=-\sqrt{\dfrac{L^2}{1+a^2}}
\iff
x_2=x_1-\dfrac{L}{\sqrt{1+a^2}}](canvas-line-style-pointilles-dashed-IMG/58.png)
Ces deux valeurs sont les deux abscisses possibles pour
![$M_2$](canvas-line-style-pointilles-dashed-IMG/59.png)
![\psset{unit=1.2cm,arrowsize=7pt}\begin{pspicture}(-1.5,-.4)(6.5,1.8)
\psline[linewidth=.3pt,linestyle=dashed](-1,1)(6,1)
\rput(-1,.95){$\bullet$}\rput(-1,1.2){$A$}
\rput(1,.95){$\bullet$}\rput(1,1.2){$M_2$}
\rput(2,.95){$\bullet$}\rput(2,1.2){$M_1$}
\rput(3,.95){$\bullet$}\rput(3,1.2){$M_2$}
\rput(6,.95){$\bullet$}\rput(6,1.2){$B$}
\psline(1,1.1)(1,.1)\psline{<->}(1,.2)(2,.2)
\psline(2,1.1)(2,.1)\psline{<->}(3,.2)(2,.2)
\psline(3,1.1)(3,.1)
\rput(1.5,.4){$L$}\rput(2.5,.4){$L$}
\end{pspicture}](canvas-line-style-pointilles-dashed-IMG/60.png)
Il reste donc à choisir le point
![$M_2\in[M_1;B]$](canvas-line-style-pointilles-dashed-IMG/61.png)
![$x_2$](canvas-line-style-pointilles-dashed-IMG/62.png)
![$x_B-x_A$](canvas-line-style-pointilles-dashed-IMG/63.png)
- si
,
est à droite de
dans le canvas, et donc aussi
.
- si
, c'est le contraire.
En résumé, on a:
![x_2=x_1+\mbox{signe}\left( x_B-x_A\rp\dfrac{L}{\sqrt{1+a^2}}](canvas-line-style-pointilles-dashed-IMG/69.png)
et alors,
![$y_2=ax_2+b$](canvas-line-style-pointilles-dashed-IMG/70.png)
Dernière chose: il faut que
![$M_2\in[M_1;B]$](canvas-line-style-pointilles-dashed-IMG/71.png)
![$B$](canvas-line-style-pointilles-dashed-IMG/72.png)
![$M_1M_2>M_1B$](canvas-line-style-pointilles-dashed-IMG/73.png)
![$B$](canvas-line-style-pointilles-dashed-IMG/74.png)
![$M_2$](canvas-line-style-pointilles-dashed-IMG/75.png)
![$B$](canvas-line-style-pointilles-dashed-IMG/76.png)
Voir aussi: