Draws a spline's path as a ribbon of a given width in a material — the way to render a curve as a visible stroke, and to animate a line drawing itself on.
Declarative element:
<sk-stroke-paint>
Not on the sk.* global — construct via the declarative element or a module import.
This is the stroke member of the Paint family: like every paint it
applies a material to one part of a node's geometry; here that part is a
spline's path, drawn as a line-strip ribbon. A single spline can carry several
stroke paints, so a thin line can underlay a thicker animated one.
Key attributes. material (inherited from Paint) is the stroke's
color. width is the ribbon width (animatable); width-space chooses its unit
— screen (the default) keeps the width constant in pixels regardless of
distance, while world measures it in world units so the stroke thins with
perspective. pen-down and pen-up are the normalized arc-length start and end
of the visible portion of the stroke (0 = path start, 1 = path end, both
animatable and wrapping modularly): sweeping them draws a pulse along the curve
or animates the whole line drawing itself on. line-cap shapes the stroke ends
(round, butt, …).
Related. It strokes a sk-spline (whose shape comes from a
spline-source). Its sibling paints cover the other parts of a node's geometry:
sk-surface-paint (filled faces) and sk-edge-paint (mesh edges).
The material it applies is a sk-plain-material.
constructor(config?: { width?: number; penDown?: number; penUp?: number; widthSpace?: WidthSpace; lineCap?: LineCap; lineJoin?: LineJoin; miterLimit?: number; widthProfile?: WidthProfileDescriptor; widthProfilePrecision?: number; debugEdges?: boolean; debugEdgeColor?: ColorInput; debugColor?: DebugColorMode })Inherited from: Paint, SkenraAnimatable
— see those pages for inherited members.
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
widthanimatable |
number |
1.0 |
Gets the line width, returning animated value if animating. | StrokePaint |
penDownanimatable |
number |
0 |
Gets the normalized arc-length position where the visible stroke begins, | StrokePaint |
penUpanimatable |
number |
1 |
Gets the normalized arc-length position where the visible stroke ends, | StrokePaint |
widthSpaceanimatable |
WidthSpace |
"screen" |
Gets the width space mode. | StrokePaint |
lineCapanimatable |
LineCap |
"butt" |
Gets the line cap style. | StrokePaint |
lineJoinanimatable |
LineJoin |
"miter" |
Gets the line join style. | StrokePaint |
miterLimit |
number |
4 |
Gets the miter limit ratio. | StrokePaint |
widthProfileanimatable |
WidthProfileDescriptor |
— | Gets the linearized width profile, returning animated value if animating. | StrokePaint |
widthProfilePrecision |
number |
— | Gets the number of linearized samples for width profiles. | StrokePaint |
debugEdgesconfig-only |
boolean |
— | Whether to render debug edges showing the quad boundaries of each segment. | StrokePaintOptions |
debugEdgeColorconfig-only |
ColorInput |
— | Color for debug edges. | StrokePaintOptions |
debugColorconfig-only |
DebugColorMode |
— | Debug color visualization mode. | StrokePaintOptions |
| Property | Type | Default | Description | Declared by |
|---|---|---|---|---|
baseWidthread-only |
number |
— | Gets the base (non-animated) width value. | StrokePaint |
basePenDownread-only |
number |
— | Gets the base (non-animated) penDown value. | StrokePaint |
basePenUpread-only |
number |
— | Gets the base (non-animated) penUp value. | StrokePaint |
baseWidthProfileread-only |
SampledCurve |
— | Gets the base (non-animated) width profile value. | StrokePaint |
materialanimatable |
Material |
— | Gets the material this paint applies. | Paint |
noderead-only |
SceneNode |
— | Gets the node this paint is applied to. | Paint |
paintTargetread-only |
PaintTarget |
— | Gets the paint target. | Paint |
show |
boolean |
true |
Gets whether this paint is visible. | Paint |
sceneread-only |
any |
— | Gets the Scene this animatable belongs to, if any. | SkenraAnimatable |
animationsread-only |
SkenraAnimation[] |
— | Public getter for the animations affecting this target. | SkenraAnimatable |
| Method | Description | Declared by |
|---|---|---|
animate(firstArg: any, secondArg?: number | KeyframeAnimationOptions | globalThis.KeyframeAnimationOptions): SkenraAnimation & Animation |
Creates an animation, linearizing any WidthProfileDescriptor keyframe | StrokePaint |
removeAnimation(animation: SkenraAnimation): boolean |
Removes a specific animation from this object. | SkenraAnimatable |
constrain(type: K, config: ConstraintConfigMap[K]): ConstraintReturnMap[K] |
Creates a constraint on this Animatable using a fluent API. | SkenraAnimatable |
// Create a stroke paint
const strokePaint = spline.addMaterialPaint(material, 'stroke', {
width: 2.0
});
// Animate the width
strokePaint.animate([
{ offset: 0, width: 1.0 },
{ offset: 1, width: 5.0 }
], { duration: 1000 });Used in guides: Scene basics