Comment dessiner un chemin partiellement dans le canevas de HTML5?

Disons que j'ai un chemin courbe fait en utilisant une série de bezierCurveTo() appels. Je voudrais le faire apparaître progressivement dans une animation, en augmentant le pourcentage de celui-ci qui est tracé image par image. Le problème est que je ne peux pas trouver un moyen standard de dessiner seulement une partie d'un chemin de toile - quelqu'un serait-il au courant d'un bon moyen (ou même d'une manière compliquée) d'y parvenir?Comment dessiner un chemin partiellement dans le canevas de HTML5?

Source

2013-03-02 Gnurou

Cette réponse à une question précédente peut vous être utile. http://stackoverflow.com/questions/878862/drawing-part-of-a-bezier-curve-by-reusing-a-basic-bezier-curve-function – jing3142

Oh, c'est très utile. Gloire. – Gnurou

Je viens de trouver une petite bibliothèque qui fait exactement cela: https://github.com/camoconnell/lazy-line-painter

Il repose sur le Raphael lib (http://raphaeljs.com/), et les deux mis ensemble ne font pas trop grand une charge utile.

Source

2013-03-04 15:02:42 Gnurou

Bien sûr ... et Simon Porritt a fait tous les calculs difficiles pour nous! JsBezier est un petit lib avec une fonction: pointAlongCurveFrom (courbe, emplacement, distance) qui vous permettra de tracer incrémentalement chaque point le long de votre courbe de Bézier.

jsBezier est disponible sur GitHub: https://github.com/sporritt/jsBezier

Source

2013-03-02 04:19:51 markE

Merci - cependant j'ai essayé cette méthode (en traçant des points le long de la courbe) avec d'autres environnements et le résultat est malheureusement assez lent à cause du surhaussement élevé. Cela pourrait être utilisé jusqu'à ce qu'une façon d'utiliser les tirets soit standardisée (l'utilisation de lignes pointillées est un moyen facile d'obtenir cet effet). Toujours ouvert à d'autres réponses. – Gnurou

BTW, je ne l'ai pas essayé, mais je pense que Chrome prend désormais en charge les lignes en pointillés avec context.setLineDash ([5]). – markE

C'est vrai - je voudrais rester dans la zone entièrement compatible si :) – Gnurou

Comment dessiner un chemin partiellement dans le canevas de HTML5?

Répondre

Questions connexes