11528 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Récupérer valeurs d'une courbe de bézier

Bonjour à tous,
Je connais deux manières de tracer une courbe de bézier côté client: canvas et vectorielle (comme ci-dessous). Mais ce qui m'intéresserait, c'est de récupérer en javascript les valeurs X, Y de ces courbes (afin de m'en servir pour la trajectoire d'une image ou d'un canvas). Mais là, je coince et j'arrive à mes limites. Si vous avez une idée, un procédé... le moins verbeux possible, je suis preneur...


<canvas id="myCanvas" width="1100" height="700" style="border:1px solid red;"></canvas>

<script>
      var ctx=document.getElementById("myCanvas").getContext("2d");
      ctx.beginPath();
      ctx.moveTo(0,0);
      ctx.bezierCurveTo(100,150,200,800,1100,700);
      ctx.stroke();
</script> 


<svg  width="500" height="400">
  <path d="M 10,10 Q 250,425 490,290" style="fill-opacity:0;stroke:red;stroke-width:1px"/>
</svg>
Bonsoir à tous,
Je me suis aidé moi même et je partage si cela intéresse quelqu'un...
En fait, il ne faut pas passer par canvas, ni rien, mais directement aller à l'équation de la courbe mathématique disponible sur wikipedia (quadratique ou cubique), puis la convertir en algorithme pour javascript. Je mets mon code à disposition si ça peut aider quelqu'un...

<body>
         <div id="courbe"></div>
</body>

<script>
let p=0, hori=0, verti=0, pasX=1, pasY=1, P0=[], P1=[], P2=[];
P0=[0,0];
P1=[300,318];
P2=[50,50];
P3=[600,30];
  {setInterval(() =>joyeuse(), 5);}
function joyeuse(){p++;
  var t=p/1000;
  hori = (1-t)*(1-t)*(1-t)*P0[0]+ 3*(1-t)*(1-t)*t*P1[0] + 3*(1-t)*t*t*P2[0] + t*t*t*P3[0];
  verti = (1-t)*(1-t)*(1-t)*P0[1] + 3*(1-t)*(1-t)*t*P1[1] + 3*(1-t)*t*t*P2[1] + t*t*t*P3[1];
document.getElementById("courbe").innerHTML='<div  style=" margin-left: '+hori+'px; margin-top: '+verti+'px"><img src="https://newhorizonsinventory.com/images/items-webp/FtrUFO.webp"</div>'
                   
                   
  if(p>1000){p=0};}    

</script>

Modifié par A-V (15 Jul 2021 - 22:06)
Sujet clos
Aller à