Comment implémenter la transformation du système de coordonnées en svg (avec code)

Cet article vous présente un résumé des différentes méthodes d'utilisation de svg dans React (avec du code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Conversion du système de coordonnées cartésiennes

S'il existe d'autres systèmes transférant des données vers SVG, vous devrez peut-être faire face à l'utilisation de coordonnées cartésiennes représente des graphiques vectoriels de données. Le point (0, 0) est situé dans le coin inférieur gauche du canevas et la coordonnée y augmente vers le haut. L'axe y est "opposé" à la convention par défaut de SVG, les coordonnées doivent donc être recalculées.

L'exemple suivant :

<svg width="200px" height="200px" viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
 <g transform="translate(0, 100) scale(1, -1)">
    <line x1="0" y1="0" x2="100" y2="0" style="stroke: black" />
    <line x1="0" y1="0" x2="0" y2="100" style="stroke: black" />
    
    <polygin points="40 40, 100 40, 70 70, 40 70" style="fill: grey; stroke: black" />
  </g>
<svg>

Transformation SVG

traduire(x, y ) : Déplacez le système de coordonnées utilisateur en fonction des valeurs x et y spécifiées​​
scale(xFactor, yFactor) : Multipliez tous les systèmes de coordonnées utilisateur à l'aide des xFactor et yFactor spécifiés. La valeur de l'échelle peut être une valeur décimale ou négative
scale(factor) : Identique à scale(xFactor, yFactor)
rotate(angle) : Faites pivoter les coordonnées de l'utilisateur en fonction de l'angle spécifié. Le centre de rotation est l'origine (0, 0). Dans le système de coordonnées par défaut, l'angle de rotation augmente dans le sens des aiguilles d'une montre et l'angle de la ligne horizontale est de 0 degré
rotate(angle, centerX, centerY) : faites pivoter les coordonnées de l'utilisateur en fonction de l'ange spécifié. Le centre de rotation est spécifié par centerX et centerY
skewX(angle) : incline toutes les coordonnées x en fonction de l'angle spécifié. Visuellement, cela fait apparaître la ligne verticale selon un angle
skewY(angle) : incline toutes les coordonnées y en fonction de l'angle spécifié. Visuellement parlant, cela fera apparaître la ligne horizontale sous un angle

Articles connexes recommandés :

Le rôle du chemin SVG : Comment utiliser le chemin SVG dans le développement Web

Résumé des différentes méthodes d'utilisation de svg dans React (avec code)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!