Maison >interface Web >tutoriel CSS >Comment créer un cercle avec des segments liés à l'aide d'équations trigonométriques et de chemins SVG ?

Comment créer un cercle avec des segments liés à l'aide d'équations trigonométriques et de chemins SVG ?

Patricia Arquette
Patricia Arquetteoriginal
2024-12-17 17:03:15332parcourir

How to Create a Circle with Linked Segments Using Trigonometric Equations and SVG Paths?

Créer un cercle avec des liens du côté de la frontière

Pour générer un cercle avec des sections distinctes, il est crucial d'identifier les points le long de la circonférence qui servent comme coordonnées dans les éléments de chemin SVG. L'utilisation d'équations trigonométriques simplifie la recherche de points sur un cercle, étant donné les angles impliqués.

Le calcul des coordonnées implique l'utilisation des équations suivantes :

  • Coordonnée X : rayon * Cos (angle) Point central X
  • Coordonnée Y : Rayon * Sin(Angle) Point central Y
  • Angle : Angle dans Degrés * Math.PI/180

Les angles utilisés dépendent du nombre de segments requis. Par exemple, pour créer un cercle avec six segments, chaque segment s'étend sur 60 degrés, couvrant de 0 à 60, 60 à 120, et ainsi de suite.

Exemples de calculs pour un cercle à six segments (rayon : 50, Point Centre : 55,55) :

Segment Angle (Degrees) Angle (Radians) From Point To Point
1 0 - 60 0 - π/3 (105,55) (80, 98.30)
2 60 - 120 π/3 - 2π/3 (80, 98.30) (30, 98.30)
3 120 - 180 2π/3 - π (30, 98.30) (5, 55)
4 180 - 240 π - 4π/3 (5, 55) (30, 11.69)
5 240 - 300 4π/3 - 5π/3 (30, 11.69) (80, 11.69)
6 300 - 360 5π/3 - 2π (80, 11.69) (105, 55)

Une fois ces points déterminés, construire un chemin SVG devient simple. Le chemin commence à partir du point central (55,55), s'étend jusqu'au point de départ et trace un arc jusqu'au point final.

Considérez l'exemple de chemin suivant pour le premier segment :

<path d='M55,55 L105,55 A50,50 0 0,1 80,98.30z' />
  • Notez la transition d'une ligne (L) à un arc (A) *.

Voici une démonstration visuelle d'un cercle à six segments :

[Image d'un cercle à six segments, chaque segment étant lié]

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn