ShapePaint — Kuito Dokumentation

Verwendung

Share stroke styling between shapes.

tsx

// Share stroke styling between shapes.
import { Circle, Drawing, Path, type ShapePaint } from 'kuito';

// The app's icon strokes, shared by every shape that draws one.
const iconStroke: ShapePaint = {
  fill: 'none',
  stroke: '#1c1c1e',
  strokeWidth: 2,
  strokeLinecap: 'round',
  strokeLinejoin: 'round',
};

<Drawing label="Search" viewBox={[0, 0, 24, 24]} width={24} height={24}>
  <Circle cx={11} cy={11} r={7} {...iconStroke} />
  <Path d="M16 16l5 5" {...iconStroke} />
</Drawing>;

Typdeklaration

export interface ShapePaint {
  /** A hex color, or `none`; black by default. */
  fill?: string;
  fillRule?: FillRule;
  /** A hex color, or `none`, the default. */
  stroke?: string;
  /** In user units; 1 by default. */
  strokeWidth?: number;
  strokeLinecap?: StrokeLinecap;
  strokeLinejoin?: StrokeLinejoin;
  strokeMiterlimit?: number;
  /** Dash and gap lengths in user units, repeated. */
  strokeDasharray?: readonly number[];
  strokeDashoffset?: number;
  /** Multiplies with its Groups' opacity. */
  opacity?: number;
  /** In user units, then `rotate` in degrees and `scale`, about the origin. */
  translateX?: number;
  translateY?: number;
  scale?: number;
  rotate?: number;
}

Mitglieder 14

Name	Typ	Erforderlich	Beschreibung
`fill`	`string`	Nein	A hex color, or `none`; black by default.
`fillRule`	`FillRule`	Nein	—
`stroke`	`string`	Nein	A hex color, or `none`, the default.
`strokeWidth`	`number`	Nein	In user units; 1 by default.
`strokeLinecap`	`StrokeLinecap`	Nein	—
`strokeLinejoin`	`StrokeLinejoin`	Nein	—
`strokeMiterlimit`	`number`	Nein	—
`strokeDasharray`	`readonly number[]`	Nein	Dash and gap lengths in user units, repeated.
`strokeDashoffset`	`number`	Nein	—
`opacity`	`number`	Nein	Multiplies with its Groups' opacity.
`translateX`	`number`	Nein	In user units, then `rotate` in degrees and `scale`, about the origin.
`translateY`	`number`	Nein	—
`scale`	`number`	Nein	—
`rotate`	`number`	Nein	—

Generiert aus den öffentlichen TypeScript-Deklarationen: Signaturen, Props und Standardwerte stammen aus der geprüften Quelle, Beschreibungen aus deren JSDoc. Kein Standardwert ist erfunden.