SplineProps
interface SplineProps extends CurveProps
Properties
alignContent
Inherited from CurveProps.alignContentalignItems
Inherited from CurveProps.alignItemsalignSelf
Inherited from CurveProps.alignSelfantialiased
antialiased?: SignalValueboolean
CurveProps.antialiasedarrowSize
arrowSize?: SignalValuenumber
Controls the size of the end and start arrows.
To make the arrows visible make sure to enable startArrow and/or
endArrow.
CurveProps.arrowSizebasis
Inherited from CurveProps.basisbottom
bottom?: SignalValuePossibleVector2number
The position of the bottom edge of this node.
This shortcut property will set the node's position so that the bottom edge
ends up in the given place.
If present, overrides the position property.
CurveProps.bottombottomLeft
bottomLeft?: SignalValuePossibleVector2number
The position of the bottom left corner of this node.
This shortcut property will set the node's position so that the bottom left
corner ends up in the given place.
If present, overrides the position property.
CurveProps.bottomLeftbottomRight
The position of the bottom right corner of this node.
This shortcut property will set the node's position so that the bottom
right corner ends up in the given place.
If present, overrides the position property.
CurveProps.bottomRightcache
cache?: SignalValueboolean
CurveProps.cachecachePadding
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
CurveProps.cachePaddingcachePaddingBottom
cachePaddingBottom?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
CurveProps.cachePaddingBottomcachePaddingLeft
cachePaddingLeft?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
CurveProps.cachePaddingLeftcachePaddingRight
cachePaddingRight?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
CurveProps.cachePaddingRightcachePaddingTop
cachePaddingTop?: SignalValuenumber
Controls the padding of the cached canvas used by this node.
By default, the size of the cache is determined based on the bounding box
of the node and its children. That includes effects such as stroke or
shadow. This property can be used to expand the cache area further.
Usually used to account for custom effects created by shaders.
CurveProps.cachePaddingTopchildren
Inherited from CurveProps.childrenclip
clip?: SignalValueboolean
CurveProps.clipclosed
closed?: SignalValueboolean
Whether the curve should be closed.
Closed curves have their start and end points connected.
Inherited fromCurveProps.closedcolumnGap
Inherited from CurveProps.columnGapcomposite
composite?: SignalValueboolean
CurveProps.compositecompositeOperation
compositeOperation?: SignalValueGlobalCompositeOperation
CurveProps.compositeOperationdirection
Inherited from CurveProps.directionend
end?: SignalValuenumber
A percentage from the start after which the curve should be clipped.
The portion of the curve that comes after the given percentage will be made invisible.
This property is usefully for animating the curve appearing on the screen.
The value of 0 means the very start of the curve (accounting for the
startOffset) while 1 means the very end (accounting for the
endOffset).
CurveProps.endendArrow
endArrow?: SignalValueboolean
Whether to display an arrow at the end of the visible curve.
Use arrowSize to control the size of the arrow.
CurveProps.endArrowendOffset
endOffset?: SignalValuenumber
The offset in pixels from the end of the curve.
This property lets you specify where along the defined curve the actual
visible portion ends. For example, setting it to 20 will make the last
20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance.
If you want to animate the curve appearing on the screen, use end
instead.
CurveProps.endOffsetfill
Inherited from CurveProps.fillfilters
Inherited from CurveProps.filtersfontFamily
fontFamily?: SignalValuestring
CurveProps.fontFamilyfontSize
fontSize?: SignalValuenumber
CurveProps.fontSizefontStyle
fontStyle?: SignalValuestring
CurveProps.fontStylefontWeight
fontWeight?: SignalValuenumber
CurveProps.fontWeightgap
Inherited from CurveProps.gapgrow
grow?: SignalValuenumber
CurveProps.growheight
Inherited from CurveProps.heightjustifyContent
Inherited from CurveProps.justifyContentkey
key?: string
CurveProps.keylayout
Inherited from CurveProps.layoutleft
left?: SignalValuePossibleVector2number
The position of the left edge of this node.
This shortcut property will set the node's position so that the left edge
ends up in the given place.
If present, overrides the position property.
CurveProps.leftletterSpacing
letterSpacing?: SignalValuenumber
CurveProps.letterSpacinglineCap
lineCap?: SignalValueCanvasLineCap
CurveProps.lineCaplineDash
lineDash?: SignalValuenumber[]
CurveProps.lineDashlineDashOffset
lineDashOffset?: SignalValuenumber
CurveProps.lineDashOffsetlineHeight
Inherited from CurveProps.lineHeightlineJoin
lineJoin?: SignalValueCanvasLineJoin
CurveProps.lineJoinlineWidth
lineWidth?: SignalValuenumber
CurveProps.lineWidthmargin
Inherited from CurveProps.marginmarginBottom
marginBottom?: SignalValuenumber
CurveProps.marginBottommarginLeft
marginLeft?: SignalValuenumber
CurveProps.marginLeftmarginRight
marginRight?: SignalValuenumber
CurveProps.marginRightmarginTop
marginTop?: SignalValuenumber
CurveProps.marginTopmaxHeight
Inherited from CurveProps.maxHeightmaxWidth
Inherited from CurveProps.maxWidthmiddle
middle?: SignalValuePossibleVector2number
The position of the center of this node.
This shortcut property will set the node's position so that the center ends
up in the given place.
If present, overrides the position property.
When offset is not set, this will be the same as the
position.
CurveProps.middleminHeight
Inherited from CurveProps.minHeightminWidth
Inherited from CurveProps.minWidthoffset
offset?: SignalValuePossibleVector2number
CurveProps.offsetoffsetX
offsetX?: SignalValuenumber
CurveProps.offsetXoffsetY
offsetY?: SignalValuenumber
CurveProps.offsetYopacity
opacity?: SignalValuenumber
CurveProps.opacitypadding
Inherited from CurveProps.paddingpaddingBottom
paddingBottom?: SignalValuenumber
CurveProps.paddingBottompaddingLeft
paddingLeft?: SignalValuenumber
CurveProps.paddingLeftpaddingRight
paddingRight?: SignalValuenumber
CurveProps.paddingRightpaddingTop
paddingTop?: SignalValuenumber
CurveProps.paddingToppoints
points?: SignalValueSignalValuePossibleVector2number[]
The knots of the spline as an array of knots with auto-calculated handles.
You can control the smoothness of the resulting curve
via the smoothness property.
position
position?: SignalValuePossibleVector2number
CurveProps.positionratio
ratio?: SignalValuenumber
CurveProps.ratioref
ref?: ReferenceReceiverany
CurveProps.refright
right?: SignalValuePossibleVector2number
The position of the right edge of this node.
This shortcut property will set the node's position so that the right edge
ends up in the given place.
If present, overrides the position property.
CurveProps.rightrotation
rotation?: SignalValuenumber
CurveProps.rotationrowGap
Inherited from CurveProps.rowGapscale
scale?: SignalValuePossibleVector2number
CurveProps.scalescaleX
scaleX?: SignalValuenumber
CurveProps.scaleXscaleY
scaleY?: SignalValuenumber
CurveProps.scaleYshaders
shaders?: PossibleShaderConfig
CurveProps.shadersshadowBlur
shadowBlur?: SignalValuenumber
CurveProps.shadowBlurshadowColor
Inherited from CurveProps.shadowColorshadowOffset
Inherited from CurveProps.shadowOffsetshadowOffsetX
shadowOffsetX?: SignalValuenumber
CurveProps.shadowOffsetXshadowOffsetY
shadowOffsetY?: SignalValuenumber
CurveProps.shadowOffsetYshrink
shrink?: SignalValuenumber
CurveProps.shrinksize
Inherited from CurveProps.sizeskew
skew?: SignalValuePossibleVector2number
CurveProps.skewskewX
skewX?: SignalValuenumber
CurveProps.skewXskewY
skewY?: SignalValuenumber
CurveProps.skewYsmoothness
smoothness?: SignalValuenumber
The smoothness of the spline when using auto-calculated handles.
This property is only applied to knots that don't use explicit handles.
spawner
Deprecated
Use children instead.
CurveProps.spawnerstart
start?: SignalValuenumber
A percentage from the start before which the curve should be clipped.
The portion of the curve that comes before the given percentage will be made invisible.
This property is usefully for animating the curve appearing on the screen.
The value of 0 means the very start of the curve (accounting for the
startOffset) while 1 means the very end (accounting for the
endOffset).
CurveProps.startstartArrow
startArrow?: SignalValueboolean
Whether to display an arrow at the start of the visible curve.
Use arrowSize to control the size of the arrow.
CurveProps.startArrowstartOffset
startOffset?: SignalValuenumber
The offset in pixels from the start of the curve.
This property lets you specify where along the defined curve the actual
visible portion starts. For example, setting it to 20 will make the first
20 pixels of the curve invisible.
This property is useful for trimming the curve using a fixed distance.
If you want to animate the curve appearing on the screen, use start
instead.
CurveProps.startOffsetstroke
Inherited from CurveProps.strokestrokeFirst
strokeFirst?: SignalValueboolean
CurveProps.strokeFirsttagName
tagName?: keyof HTMLElementTagNameMap
CurveProps.tagNametextAlign
textAlign?: SignalValueCanvasTextAlign
CurveProps.textAligntextDirection
textDirection?: SignalValueCanvasDirection
CurveProps.textDirectiontextWrap
Inherited from CurveProps.textWraptop
top?: SignalValuePossibleVector2number
The position of the top edge of this node.
This shortcut property will set the node's position so that the top edge
ends up in the given place.
If present, overrides the position property.
CurveProps.toptopLeft
topLeft?: SignalValuePossibleVector2number
The position of the top left corner of this node.
This shortcut property will set the node's position so that the top left
corner ends up in the given place.
If present, overrides the position property.
CurveProps.topLefttopRight
topRight?: SignalValuePossibleVector2number
The position of the top right corner of this node.
This shortcut property will set the node's position so that the top right
corner ends up in the given place.
If present, overrides the position property.
CurveProps.topRightwidth
Inherited from CurveProps.widthwrap
Inherited from CurveProps.wrapx
x?: SignalValuenumber
CurveProps.xy
y?: SignalValuenumber
CurveProps.yzIndex
zIndex?: SignalValuenumber
CurveProps.zIndex