Skip to main content

CircleProps

interface CircleProps extends CurveProps

Properties

alignContent

Inherited from CurveProps.alignContent

alignItems

Inherited from CurveProps.alignItems

alignSelf

Inherited from CurveProps.alignSelf

antialiased

Inherited from CurveProps.antialiased

arrowSize

Controls the size of the end and start arrows.

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

Inherited from CurveProps.arrowSize

basis

Inherited from CurveProps.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 CurveProps.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 CurveProps.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 CurveProps.bottomRight

cache

Inherited from CurveProps.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 CurveProps.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 CurveProps.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 CurveProps.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 CurveProps.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 CurveProps.cachePaddingTop

children

Inherited from CurveProps.children

clip

clip?: SignalValueboolean
Inherited from CurveProps.clip

closed

Whether the path of this circle should be closed.

When set to true, the path of this circle will start and end at the center. This can be used to fine-tune how sectors are rendered.


columnGap

Inherited from CurveProps.columnGap

composite

Inherited from CurveProps.composite

compositeOperation

compositeOperation?: SignalValueGlobalCompositeOperation
Inherited from CurveProps.compositeOperation

counterclockwise

Whether the circle sector should be drawn counterclockwise.

By default, the circle begins at startAngle and is drawn clockwise until reaching endAngle. Setting this property to true will reverse this direction.


direction

Inherited from CurveProps.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).

Inherited from CurveProps.end

endAngle

The ending angle in degrees for the circle sector.

This property can be used together with endAngle to turn this circle into a sector (when using fill) or an arc (when using stroke).


endArrow

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

Use arrowSize to control the size of the arrow.

Inherited from CurveProps.endArrow

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.

Inherited from CurveProps.endOffset

fill

Inherited from CurveProps.fill

filters

Inherited from CurveProps.filters

fontFamily

Inherited from CurveProps.fontFamily

fontSize

Inherited from CurveProps.fontSize

fontStyle

Inherited from CurveProps.fontStyle

fontWeight

Inherited from CurveProps.fontWeight

gap

Inherited from CurveProps.gap

grow

Inherited from CurveProps.grow

height

Inherited from CurveProps.height

justifyContent

Inherited from CurveProps.justifyContent

key

key?: string
Inherited from CurveProps.key

layout

Inherited from CurveProps.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 CurveProps.left

letterSpacing

Inherited from CurveProps.letterSpacing

lineCap

lineCap?: SignalValueCanvasLineCap
Inherited from CurveProps.lineCap

lineDash

Inherited from CurveProps.lineDash

lineDashOffset

Inherited from CurveProps.lineDashOffset

lineHeight

Inherited from CurveProps.lineHeight

lineJoin

lineJoin?: SignalValueCanvasLineJoin
Inherited from CurveProps.lineJoin

lineWidth

Inherited from CurveProps.lineWidth

margin

Inherited from CurveProps.margin

marginBottom

Inherited from CurveProps.marginBottom

marginLeft

Inherited from CurveProps.marginLeft

marginRight

Inherited from CurveProps.marginRight

marginTop

Inherited from CurveProps.marginTop

maxHeight

Inherited from CurveProps.maxHeight

maxWidth

Inherited from CurveProps.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 CurveProps.middle

minHeight

Inherited from CurveProps.minHeight

minWidth

Inherited from CurveProps.minWidth

offset

Inherited from CurveProps.offset

offsetX

Inherited from CurveProps.offsetX

offsetY

Inherited from CurveProps.offsetY

opacity

Inherited from CurveProps.opacity

padding

Inherited from CurveProps.padding

paddingBottom

Inherited from CurveProps.paddingBottom

paddingLeft

Inherited from CurveProps.paddingLeft

paddingRight

Inherited from CurveProps.paddingRight

paddingTop

Inherited from CurveProps.paddingTop

position

Inherited from CurveProps.position

ratio

Inherited from CurveProps.ratio

ref

Inherited from CurveProps.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 CurveProps.right

rotation

Inherited from CurveProps.rotation

rowGap

Inherited from CurveProps.rowGap

scale

Inherited from CurveProps.scale

scaleX

Inherited from CurveProps.scaleX

scaleY

Inherited from CurveProps.scaleY

shaders

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

shadowBlur

Inherited from CurveProps.shadowBlur

shadowColor

Inherited from CurveProps.shadowColor

shadowOffset

Inherited from CurveProps.shadowOffset

shadowOffsetX

Inherited from CurveProps.shadowOffsetX

shadowOffsetY

Inherited from CurveProps.shadowOffsetY

shrink

Inherited from CurveProps.shrink

size

Inherited from CurveProps.size

skew

Inherited from CurveProps.skew

skewX

Inherited from CurveProps.skewX

skewY

Inherited from CurveProps.skewY

spawner

Deprecated

Use children instead.

Inherited from CurveProps.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).

Inherited from CurveProps.start

startAngle

The starting angle in degrees for the circle sector.

This property can be used together with startAngle to turn this circle into a sector (when using fill) or an arc (when using stroke).


startArrow

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

Use arrowSize to control the size of the arrow.

Inherited from CurveProps.startArrow

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.

Inherited from CurveProps.startOffset

stroke

Inherited from CurveProps.stroke

strokeFirst

Inherited from CurveProps.strokeFirst

tagName

tagName?: keyof HTMLElementTagNameMap
Inherited from CurveProps.tagName

textAlign

textAlign?: SignalValueCanvasTextAlign
Inherited from CurveProps.textAlign

textDirection

textDirection?: SignalValueCanvasDirection
Inherited from CurveProps.textDirection

textWrap

Inherited from CurveProps.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 CurveProps.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 CurveProps.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 CurveProps.topRight

width

Inherited from CurveProps.width

wrap

Inherited from CurveProps.wrap

x

x?: SignalValuenumber
Inherited from CurveProps.x

y

y?: SignalValuenumber
Inherited from CurveProps.y

zIndex

Inherited from CurveProps.zIndex