CapDriveLine
Trace une ligne droite entre deux points finaux en coordonnées locales. Adapté aux lignes indicatrices, aux graduations et aux séparateurs, vous pouvez définir les styles de couleur, de largeur, de tiret et de point final.
Exemple
function main() {
return (
<Line
start={{ x: 0, y: 20 }}
end={{ x: 160, y: 60 }}
stroke={$env.accent}
lineWidth={4}
lineCap="round"
/>
);
}
Utilisation
- start/end sont des points locaux : origine en haut à gauche, x vers la droite, y vers le bas. Ils ne changent pas d’échelle avec width/height. Calculez-les pour un dessin adaptatif. Line n’a pas d’intérieur à remplir.
- x/y et transform s’appliquent après la disposition. Déplacer un enfant ne repousse pas ses voisins ; utilisez spacing ou Spacer. Rotation et échelle affectent le dessin complet.
Propriétés
start?ViewPointExtrémité en coordonnées locales, en points : x à droite, y en bas.
{x: 0, y: 0}end?ViewPointExtrémité en coordonnées locales, en points : x à droite, y en bas.
{x: 100, y: 80}stroke?PaintTrait de couleur ou dégradé ; clear le masque.
HDR($env.dark ? "white" : "black")lineWidth?numberÉpaisseur du trait en points ; 0 ne dessine aucun trait.
2lineCap?"round" | "butt" | "square"Extrémité : butt coupe au point, square prolonge en carré, round arrondit.
"round"dash?number[]Longueurs alternées de traits et d’espaces en points ; tableau vide pour un trait continu.
[]dashPhase?numberDécalage du motif de tirets en points.
0trimStart?numberIntervalle visible de trimStart à trimEnd dans 0–1. Circle/Ellipse/Arc utilisent des angles.
0trimEnd?numberIntervalle visible de trimStart à trimEnd dans 0–1. Circle/Ellipse/Arc utilisent des angles.
1Propriétés communes
width?number | "auto" | "fill"Largeur en points, taille automatique ou remplissage du parent.
"fill"height?number | "auto" | "fill"Hauteur en points, taille automatique ou remplissage du parent.
"fill"x?numberDécalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.
0y?numberDécalage visuel en points : x vers la droite, y vers le bas, sans modifier l’espace de mise en page.
0transform?ViewTransformTransformation globale sans changer la mise en page. Translation en points, rotation/inclinaison en degrés, échelle 1 inchangée, ancrages 0–1.
{rotation: 0}opacity?numberOpacité globale du View : 0 transparent, 1 opaque.
1clipped?booleanDécoupe les dessins dépassant les limites du View.
falseclip?"rectangle" | "ellipse"Forme de découpe rectangle ou ellipse ; Material accepte aussi false pour la désactiver.
"rectangle"mask?View | nullView de masque alpha. Centrée sans modifier la disposition ; null désactive le masque.
<Circle width="fill" height="fill" background="white"/>zIndex?numberOrdre entre éléments frères ; les valeurs élevées sont devant.
0blur?numberRayon du flou en points ; 0 le désactive.
4innerShadow?DrawingEffectCouleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectCouleur, opacité, rayon du flou et décalage x/y de l’effet ; distances en points.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorCouleur de l’ombre extérieure.
HDR("black")shadowOpacity?numberOpacité de l’ombre de 0 à 1 ; 0 la masque.
0shadowRadius?numberRayon du flou de l’ombre extérieure, en points.
4shadowX?numberDécalage de l’ombre en points : x à droite, y en bas.
0shadowY?numberDécalage de l’ombre en points : x à droite, y en bas.
2animations?Animation[]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.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberIdentifiant stable parmi les éléments frères.
Exemple pratique
function main() {
return (
<Line
width={$env.width}
height={40}
start={{ x: 0, y: 20 }}
end={{ x: $env.width, y: 20 }}
stroke={$env.accent}
lineWidth={3}
dash={[8, 4]}
dashPhase={0}
/>
);
}
Animation
widthheightxyopacityblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtrimStarttrimEnddashPhasestrokelineWidthtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYstart.xstart.yend.xend.yEn 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és | En cas d’omission |
|---|---|
lineWidth | 2 |
lineCap | "round" |
trimStart | 0 |
trimEnd | 1 |
dash | [] |
dashPhase | 0 |
stroke | HDR($env.dark ? 'white' : 'black') |