CubicBezierProps
interface CubicBezierProps 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.opacityp0​
p0?: SignalValuePossibleVector2number
p0X​
p0X?: SignalValuenumber
p0Y​
p0Y?: SignalValuenumber
p1​
p1?: SignalValuePossibleVector2number
p1X​
p1X?: SignalValuenumber
p1Y​
p1Y?: SignalValuenumber
p2​
p2?: SignalValuePossibleVector2number
p2X​
p2X?: SignalValuenumber
p2Y​
p2Y?: SignalValuenumber
p3​
p3?: SignalValuePossibleVector2number
p3X​
p3X?: SignalValuenumber
p3Y​
p3Y?: SignalValuenumber
padding​
Inherited from CurveProps.paddingpaddingBottom​
paddingBottom?: SignalValuenumber
CurveProps.paddingBottompaddingLeft​
paddingLeft?: SignalValuenumber
CurveProps.paddingLeftpaddingRight​
paddingRight?: SignalValuenumber
CurveProps.paddingRightpaddingTop​
paddingTop?: SignalValuenumber
CurveProps.paddingTopposition​
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.skewYspawner​
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