Skip to main content

PolygonProps

interface PolygonProps 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 curve should be closed.

Closed curves have their start and end points connected.

Inherited from CurveProps.closed

columnGap​

Inherited from CurveProps.columnGap

composite​

Inherited from CurveProps.composite

compositeOperation​

compositeOperation?: SignalValueGlobalCompositeOperation
Inherited from CurveProps.compositeOperation

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

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

radius​

The radius of the polygon's corners.


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

sides​

The number of sides of the polygon.

For example, a value of 6 creates a hexagon.


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

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