CapDrive
Guide d’utilisation

Circle

Dessine un cercle ou un arc parfait dans la zone disponible, adapté à la progression circulaire et aux échelles métriques. Le diamètre prend la plus petite valeur de largeur et de centre. startAngle et sweepAngle contrôlent la plage d'affichage. Lorsque tout le cercle est fermé, l’arrière-plan peut être rempli.

Exemple

function main() {
  return (
    <Circle
      width={120}
      height={120}
      background="clear"
      stroke={$env.accent}
      lineWidth={8}
      startAngle={-90}
      sweepAngle={240}
      strokePosition="inside"
    />
  );
}

Utilisation

  • Circle inscrit un cercle centré sur le plus petit côté : 160×100 donne un diamètre de 100. startAngle/sweepAngle modifient le contour ; transform agit sur le résultat entier.
  • Angles en degrés : 0 à droite, 90 en bas, sweep positif horaire. startAngle modulo 360 ; sweepAngle limité à −360…360. 0 ne dessine rien, ±360 ferme un tour. wrap:360 appartient à startAngle, pas à sweepAngle.
  • Ellipse et Arc utilisent toute la largeur et hauteur ; elles sont égales pour un cercle. Un arc partiel reste ouvert sans rejoindre le centre. background remplit uniquement un tour complet fermé.

Propriétés

startAngle?number

Angle de départ en degrés, ramené modulo 360 à chaque échantillonnage.

Exemple0
sweepAngle?number

Balayage en degrés, limité à -360…360 à chaque échantillonnage. Les valeurs positives vont dans le sens horaire ; wrap est indisponible.

Exemple360
background?Paint

Remplissage d’un cercle ou d’une ellipse complets et fermés. Ignoré pour les arcs partiels.

ExempleHDR($env.dark ? "white" : "black")
stroke?Paint

Trait de couleur ou dégradé ; clear le masque.

Exemple"clear"
lineWidth?number

Épaisseur du trait en points ; 0 ne dessine aucun trait.

Exemple2
strokePosition?"inside" | "center" | "outside"

Position du trait par rapport au contour complet du cercle ou de l’ellipse. Par défaut : inside.

Exemple"inside"
lineCap?"round" | "butt" | "square"

Extrémité : butt coupe au point, square prolonge en carré, round arrondit.

Exemple"round"
dash?number[]

Longueurs alternées de traits et d’espaces en points ; tableau vide pour un trait continu.

Exemple[]
dashPhase?number

Décalage du motif de tirets en points.

Exemple0
Propriétés communes
width?number | "auto" | "fill"

Largeur en points, taille automatique ou remplissage du parent.

Exemple"fill"
height?number | "auto" | "fill"

Hauteur en points, taille automatique ou remplissage du parent.

Exemple"fill"
x?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
y?number

Décalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.

Exemple0
transform?ViewTransform

Transformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.

Exemple{rotation: 0}
opacity?number

Opacité globale du View : 0 transparent, 1 opaque.

Exemple1
clipped?boolean

Découpe les dessins dépassant les limites du View.

Exemplefalse
clip?"rectangle" | "ellipse"

Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.

Exemple"rectangle"
mask?View | null

View de masque alpha. Centrée sans modifier la disposition ; null désactive le masque.

Exemple<Circle width="fill" height="fill" background="white"/>
zIndex?number

Ordre entre éléments frères ; les valeurs élevées sont devant.

Exemple0
blur?number

Rayon du flou en points ; 0 le désactive.

Exemple4
innerShadow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

Exemple{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}
glow?DrawingEffect

Couleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.

Exemple{color: HDR("cyan"), radius: 8, opacity: 0.8}
shadowColor?Color

Couleur de l’ombre extérieure.

ExempleHDR("black")
shadowOpacity?number

Opacité de l’ombre de 0 à 1 ; 0 la masque.

Exemple0
shadowRadius?number

Rayon du flou de l’ombre extérieure, en points.

Exemple4
shadowX?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple0
shadowY?number

Décalage de l’ombre en points : x à droite, y en bas.

Exemple2
animations?CircleAnimation[]

Anime les changements de propriété. duration/delay en secondes ; from/to définissent les extrémités ; repeat/autoreverse la répétition, wrap la période.

Exemple[{property: "opacity", duration: 0.25, curve: "easeInOut"}]
key?string | number

Identifiant stable parmi les éléments frères.

Exemple pratique

function main() {
  return (
    <ZStack width={140} height={140}>
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke="#88888833"
        lineWidth={10}
      />
      <Circle
        width="fill"
        height="fill"
        background="clear"
        stroke={$env.accent}
        lineWidth={10}
        startAngle={-90}
        sweepAngle={270}
        lineCap="round"
      />
      <Text fontSize={36}>75%</Text>
    </ZStack>
  );
}

Animation

Animation

widthheightxyopacitybackgroundblurshadowColorshadowOpacityshadowRadiusshadowXshadowYdashPhasestrokelineWidthstartAnglesweepAngletransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

En cas d’omission

Le tableau décrit les omissions vérifiées dans l’implémentation. Les exemples de propriétés ne sont pas des valeurs par défaut. Pour un résultat fixe, passez une valeur explicite ; tailles et couleurs contextuelles ne sont pas constantes.

PropriétésEn cas d’omission
startAngle0
sweepAngle360
lineWidth2
strokePosition"inside"
backgroundHDR($env.dark ? 'white' : 'black')

Arc

Ellipse

Animation

Color / Gradient

RadialLayout

Précédent

Ellipse

Étape suivante

Sur cette page

ExempleUtilisationPropriétésExemple pratiqueAnimationEn cas d’omissionAPI associées