SVG texte hit-test

Question

J'essaie d'implémenter la détection de collision pour les éléments de texte SVG en utilisant JavaScript côté client. Le hit-test doit vérifier si un glyphe d'un texte chevauche un glyphe d'un autre élément de texte. Depuis getBBox et getExtentOfChar sont quelque chose de précis, j'ai besoin d'une solution personnalisée. Ma première approche a été d'obtenir la couleur de chaque coordonnée/pixel d'un élément et de faire le test d'impact manuellement, mais cela ne fonctionne pas car il n'est pas possible d'obtenir la couleur d'une coordonnée. Il faudrait une toile supplémentaire pour obtenir des couleurs de pixel -> solution de contournement terrible.

Maintenant, je pense à convertir le texte ou les glyphes en polygones pour les tests de hit. C'est possible? Ou quelqu'un d'autre a-t-il une autre approche pour les tests de glyphes?

Cordialement

Answer 1

Quant au hit-test à base de pixels - si vous passez à HTML5 Canvas, cela deviendra possible. Plusieurs projets permettent une transition facile de SVG à Canvas, par ex. fabric.js. See a comparison table here. En ce qui concerne l'approche polygonale - possible, mais difficile. Vous pouvez convertir du texte ou des glyphes en polygones (chemins) à l'aide d'un outil (le chemin texte d'Inkscape par exemple). Et puis il y aura des calculs. Faire une solution générale pour n'importe quel texte exigera beaucoup de travail. Cependant, si le texte ne change pas, dessiner manuellement votre texte en utilisant des chemins peut être une solution rapide et sale.

Answer 2

Vous entrez vraiment dans un monde de douleur et de problèmes de navigateur. J'ai fini par faire le chemin personnalisé-rendu des polices seulement pour obtenir le total longueur du texte fiable et cohérent. Je ne veux même pas penser à des glyphes. Un problème par exemple est que firefox (au moins 3.6) et iirc aussi une version d'opéra a une erreur d'arrondi lors de la mise à l'échelle alors quand vous mettez à l'échelle l'élément parent contenant le texte et l'échelle du texte par l'inverse de cette échelle , alors l'espacement des lettres sera légèrement différent de sans aucune échelle. (Parce que chaque lettre doit commencer sur un nombre pair ou quelque chose comme ça, le problème peut être résolu en multipliant les deux upscale et downscale avec 10000 mais c'est une autre histoire)

L'impact de la performance en utilisant le chemin par rapport au texte est malheureusement assez perceptible. Si votre toile fait une forme de panoramique animé ou de zoom, vous devez passer aux éléments de texte pur pendant l'animation et une fois statique, activez le rendu de chemin pour plus de précision.

La conversion de svg-fonts en chemin est très facile, c'est du texte en clair et en utilisant exactement le même format que l'élément path. (méfiez-vous des polices font-embedding-licences!) Gardez également la taille du fichier à l'esprit car vous ne pouvez pas utiliser les polices du système des utilisateurs,)