SVG Chemin et morphing

Question

J'ai quelques questions théoriques. Disons que j'ai 2 chemins en svg. Chacun avec un nombre différent de points. On a 4 courbes de Bézier et l'autre 3.

Ce que je veux faire, c'est transformer l'un dans l'autre. Maintenant, je sais qu'ils doivent avoir la même structure exacte et le même nombre de points pour le faire. Donc, la question est, est-ce que je peux ajouter des "points virtuels" dans leurs chemins pour obtenir la même structure et le même nombre de points, sans changer la forme des objets? Par exemple, en prenant un point dans l'un des chemins et en ajoutant simplement le même point après lui pour augmenter le nombre de points.

Ou créer une courbe de Bézier dans les deux chemins qui prétendraient être une ligne au lieu d'une courbe. Cela changerait-il l'objet? Et si j'ai des points sur x = 1 y = 1 et x = 4 y = 4, l'utilisation de cette forme ferait-elle une courbe de Bézier? (M1 1C1 1 4 4 4 4)

Answer 1

Compris. L'utilisation de points de contrôle n'importe où sur la même ligne que les coordonnées transforme le Bézier en ligne, même si vous utilisez le même point que les points de contrôle, les coordonnées de début et de fin, vous pouvez faire de la courbe un point. Ajouter plus de ces points dans le chemin ne change pas l'aspect de l'objet, ajoute simplement plus de données dans le chemin.

http://www.petercollingridge.co.uk/book/export/html/560

vers le bas les courbes cubiques vous pouvez aligner les points de la manière décrite pour obtenir le résultat souhaité

Answer 2

J'ai un simple à utiliser le plugin d3 pour animer chemin svg qui supporte un nombre différent de points , aussi, il n'anime que les parties du chemin qui diffère du chemin original, et non le chemin entier. 7kb minifié: https://pratyushcrd.github.io/d3-path-morphing/