Skip to main content

CurveProps

interface CurveProps extends ShapeProps

Extended by

Properties

alignContent

Inherited from ShapeProps.alignContent

alignItems

Inherited from ShapeProps.alignItems

alignSelf

Inherited from ShapeProps.alignSelf

antialiased

Inherited from ShapeProps.antialiased

arrowSize

Controls the size of the end and start arrows.

To make the arrows visible make sure to enable startArrow and/or endArrow.


basis

Inherited from ShapeProps.basis

bottom

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.

Inherited from ShapeProps.bottom

bottomLeft

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.

Inherited from ShapeProps.bottomLeft

bottomRight

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.

Inherited from ShapeProps.bottomRight

cache

Inherited from ShapeProps.cache

cachePadding

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.

Inherited from ShapeProps.cachePadding

cachePaddingBottom

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.

Inherited from ShapeProps.cachePaddingBottom

cachePaddingLeft

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.

Inherited from ShapeProps.cachePaddingLeft

cachePaddingRight

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.

Inherited from ShapeProps.cachePaddingRight

cachePaddingTop

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.

Inherited from ShapeProps.cachePaddingTop

children

Inherited from ShapeProps.children

clip

clip?: SignalValueboolean
Inherited from ShapeProps.clip

closed

Whether the curve should be closed.

Closed curves have their start and end points connected.


columnGap

Inherited from ShapeProps.columnGap

composite

Inherited from ShapeProps.composite

compositeOperation

compositeOperation?: SignalValueGlobalCompositeOperation
Inherited from ShapeProps.compositeOperation

direction

Inherited from ShapeProps.direction

end

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).


endArrow

Whether to display an arrow at the end of the visible curve.

Use arrowSize to control the size of the arrow.


endOffset

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.


fill

Inherited from ShapeProps.fill

filters

Inherited from ShapeProps.filters

fontFamily

Inherited from ShapeProps.fontFamily

fontSize

Inherited from ShapeProps.fontSize

fontStyle

Inherited from ShapeProps.fontStyle

fontWeight

Inherited from ShapeProps.fontWeight

gap

Inherited from ShapeProps.gap

grow

Inherited from ShapeProps.grow

height

Inherited from ShapeProps.height

justifyContent

Inherited from ShapeProps.justifyContent

key

key?: string
Inherited from ShapeProps.key

layout

Inherited from ShapeProps.layout

left

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.

Inherited from ShapeProps.left

letterSpacing

Inherited from ShapeProps.letterSpacing

lineCap

lineCap?: SignalValueCanvasLineCap
Inherited from ShapeProps.lineCap

lineDash

Inherited from ShapeProps.lineDash

lineDashOffset

Inherited from ShapeProps.lineDashOffset

lineHeight

Inherited from ShapeProps.lineHeight

lineJoin

lineJoin?: SignalValueCanvasLineJoin
Inherited from ShapeProps.lineJoin

lineWidth

Inherited from ShapeProps.lineWidth

margin

Inherited from ShapeProps.margin

marginBottom

Inherited from ShapeProps.marginBottom

marginLeft

Inherited from ShapeProps.marginLeft

marginRight

Inherited from ShapeProps.marginRight

marginTop

Inherited from ShapeProps.marginTop

maxHeight

Inherited from ShapeProps.maxHeight

maxWidth

Inherited from ShapeProps.maxWidth

middle

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.

Inherited from ShapeProps.middle

minHeight

Inherited from ShapeProps.minHeight

minWidth

Inherited from ShapeProps.minWidth

offset

Inherited from ShapeProps.offset

offsetX

Inherited from ShapeProps.offsetX

offsetY

Inherited from ShapeProps.offsetY

opacity

Inherited from ShapeProps.opacity

padding

Inherited from ShapeProps.padding

paddingBottom

Inherited from ShapeProps.paddingBottom

paddingLeft

Inherited from ShapeProps.paddingLeft

paddingRight

Inherited from ShapeProps.paddingRight

paddingTop

Inherited from ShapeProps.paddingTop

position

Inherited from ShapeProps.position

ratio

Inherited from ShapeProps.ratio

ref

Inherited from ShapeProps.ref

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.

Inherited from ShapeProps.right

rotation

Inherited from ShapeProps.rotation

rowGap

Inherited from ShapeProps.rowGap

scale

Inherited from ShapeProps.scale

scaleX

Inherited from ShapeProps.scaleX

scaleY

Inherited from ShapeProps.scaleY

shaders

shaders?: PossibleShaderConfig
Experimental
This is an experimental feature. The behavior and API may change drastically between minor releases.
Inherited from ShapeProps.shaders

shadowBlur

Inherited from ShapeProps.shadowBlur

shadowColor

Inherited from ShapeProps.shadowColor

shadowOffset

Inherited from ShapeProps.shadowOffset

shadowOffsetX

Inherited from ShapeProps.shadowOffsetX

shadowOffsetY

Inherited from ShapeProps.shadowOffsetY

shrink

Inherited from ShapeProps.shrink

size

Inherited from ShapeProps.size

skew

Inherited from ShapeProps.skew

skewX

Inherited from ShapeProps.skewX

skewY

Inherited from ShapeProps.skewY

spawner

Deprecated

Use children instead.

Inherited from ShapeProps.spawner

start

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).


startArrow

Whether to display an arrow at the start of the visible curve.

Use arrowSize to control the size of the arrow.


startOffset

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.


stroke

Inherited from ShapeProps.stroke

strokeFirst

Inherited from ShapeProps.strokeFirst

tagName

tagName?: keyof HTMLElementTagNameMap
Inherited from ShapeProps.tagName

textAlign

textAlign?: SignalValueCanvasTextAlign
Inherited from ShapeProps.textAlign

textDirection

textDirection?: SignalValueCanvasDirection
Inherited from ShapeProps.textDirection

textWrap

Inherited from ShapeProps.textWrap

top

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.

Inherited from ShapeProps.top

topLeft

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.

Inherited from ShapeProps.topLeft

topRight

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.

Inherited from ShapeProps.topRight

width

Inherited from ShapeProps.width

wrap

Inherited from ShapeProps.wrap

x

x?: SignalValuenumber
Inherited from ShapeProps.x

y

y?: SignalValuenumber
Inherited from ShapeProps.y

zIndex

Inherited from ShapeProps.zIndex