View2DProps

interface View2DProps extends RectProps

Properties​

alignContent​

alignContent?: SignalValueFlexContent

alignItems​

alignItems?: SignalValueFlexItems

alignSelf​

alignSelf?: SignalValueFlexItems

antialiased​

antialiased?: SignalValueboolean

arrowSize​

arrowSize?: SignalValuenumber

Controls the size of the end and start arrows.

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

assetHash​

assetHash: string

basis​

basis?: SignalValueFlexBasis

bottom​

bottom?: SignalValuePossibleVector2

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 NodeProps.position property.

bottomLeft​

bottomLeft?: SignalValuePossibleVector2

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 NodeProps.position property.

bottomRight​

bottomRight?: SignalValuePossibleVector2

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 NodeProps.position property.

cache​

cache?: SignalValueboolean

cachePadding​

cachePadding?: SignalValuePossibleSpacing

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.

cachePaddingBottom​

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.

cachePaddingLeft​

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.

cachePaddingRight​

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.

cachePaddingTop​

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.

children​

children?: SignalValueComponentChildren

clip​

clip?: SignalValueboolean

closed​

closed?: SignalValueboolean

Whether the curve should be closed.

Closed curves have their start and end points connected.

columnGap​

columnGap?: SignalValueLength

composite​

composite?: SignalValueboolean

compositeOperation​

compositeOperation?: SignalValueGlobalCompositeOperation

cornerSharpness​

cornerSharpness?: SignalValuenumber

Controls the sharpness of smoothCorners.

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

Requires smoothCorners to be enabled to have any effect. By default, corner sharpness is set to 0.6 which represents a smooth, circle-like rounding. At 0 the edges are squared off.

direction​

direction?: SignalValueFlexDirection

end​

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

endArrow​

endArrow?: SignalValueboolean

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

Use arrowSize to control the size of the arrow.

endOffset​

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.

fill​

fill?: SignalValuePossibleCanvasStyle

filters​

filters?: SignalValueFilter[]

fontFamily​

fontFamily?: SignalValuestring

fontSize​

fontSize?: SignalValuenumber

fontStyle​

fontStyle?: SignalValuestring

fontWeight​

fontWeight?: SignalValuenumber

gap​

gap?: SignalValuePossibleVector2Length

grow​

grow?: SignalValuenumber

height​

height?: SignalValueLength

justifyContent​

justifyContent?: SignalValueFlexContent

key​

key?: string

layout​

layout?: LayoutMode

left​

left?: SignalValuePossibleVector2

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 NodeProps.position property.

letterSpacing​

letterSpacing?: SignalValuenumber

lineCap​

lineCap?: SignalValueCanvasLineCap

lineDash​

lineDash?: SignalValuenumber[]

lineDashOffset​

lineDashOffset?: SignalValuenumber

lineHeight​

lineHeight?: SignalValueLength

lineJoin​

lineJoin?: SignalValueCanvasLineJoin

lineWidth​

lineWidth?: SignalValuenumber

margin​

margin?: SignalValuePossibleSpacing

marginBottom​

marginBottom?: SignalValuenumber

marginLeft​

marginLeft?: SignalValuenumber

marginRight​

marginRight?: SignalValuenumber

marginTop​

marginTop?: SignalValuenumber

maxHeight​

maxHeight?: SignalValueLengthLimit

maxWidth​

maxWidth?: SignalValueLengthLimit

middle​

middle?: SignalValuePossibleVector2

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 NodeProps.position property. When offset is not set, this will be the same as the NodeProps.position.

minHeight​

minHeight?: SignalValueLengthLimit

minWidth​

minWidth?: SignalValueLengthLimit

offset​

offset?: SignalValuePossibleVector2

offsetX​

offsetX?: SignalValuenumber

offsetY​

offsetY?: SignalValuenumber

opacity​

opacity?: SignalValuenumber

padding​

padding?: SignalValuePossibleSpacing

paddingBottom​

paddingBottom?: SignalValuenumber

paddingLeft​

paddingLeft?: SignalValuenumber

paddingRight​

paddingRight?: SignalValuenumber

paddingTop​

paddingTop?: SignalValuenumber

position​

position?: SignalValuePossibleVector2

radius​

radius?: SignalValuePossibleSpacing

Rounds the corners of this rectangle.

The value represents the radius of the quarter circle that is used to round the corners. If the value is a number, the same radius is used for all corners. Passing an array of two to four numbers will set individual radii for each corner. Individual radii correspond to different corners depending on the number of values passed:

// top-left-and-bottom-right | top-right-and-bottom-left
[10, 30]
// top-left | top-right-and-bottom-left | bottom-right
[10, 20, 30]
// top-left | top-right | bottom-right | bottom-left
[10, 20, 30, 40]

ratio​

ratio?: SignalValuenumber

ref​

ref?: ReferenceReceiverany

right​

right?: SignalValuePossibleVector2

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 NodeProps.position property.

rotation​

rotation?: SignalValuenumber

rowGap​

rowGap?: SignalValueLength

scale​

scale?: SignalValuePossibleVector2

scaleX​

scaleX?: SignalValuenumber

scaleY​

scaleY?: SignalValuenumber

shaders​

shaders?: PossibleShaderConfig

shadowBlur​

shadowBlur?: SignalValuenumber

shadowColor​

shadowColor?: SignalValuePossibleColor

shadowOffset​

shadowOffset?: SignalValuePossibleVector2

shadowOffsetX​

shadowOffsetX?: SignalValuenumber

shadowOffsetY​

shadowOffsetY?: SignalValuenumber

shrink​

shrink?: SignalValuenumber

size​

size?: SignalValuePossibleVector2Length

skew​

skew?: SignalValuePossibleVector2

skewX​

skewX?: SignalValuenumber

skewY​

skewY?: SignalValuenumber

smoothCorners​

smoothCorners?: SignalValueboolean

Enables corner smoothing.

This property only affects the way rounded corners are drawn. To control the corner radius use the radius property.

When enabled, rounded corners are drawn continuously using Bézier curves rather than quarter circles. The sharpness of the curve can be controlled with cornerSharpness.

You can read more about corner smoothing in this article by Nick Lawrence.

spawner​

spawner?: SignalValueComponentChildren

Deprecated

Use children instead.

start​

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

startArrow​

startArrow?: SignalValueboolean

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

Use arrowSize to control the size of the arrow.

startOffset​

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.

stroke​

stroke?: SignalValuePossibleCanvasStyle

strokeFirst​

strokeFirst?: SignalValueboolean

tagName​

tagName?: unknown

textAlign​

textAlign?: SignalValueCanvasTextAlign

textDirection​

textDirection?: SignalValueCanvasDirection

textWrap​

textWrap?: SignalValueTextWrap

top​

top?: SignalValuePossibleVector2

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 NodeProps.position property.

topLeft​

topLeft?: SignalValuePossibleVector2

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 NodeProps.position property.

topRight​

topRight?: SignalValuePossibleVector2

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 NodeProps.position property.

width​

width?: SignalValueLength

wrap​

wrap?: SignalValueFlexWrap

x​

x?: SignalValuenumber

y​

y?: SignalValuenumber

zIndex​

zIndex?: SignalValuenumber