RectProps
interface RectProps extends CurveProps
Extended by
ImgPropsVideoPropsView2DProps
Properties
alignContent
alignContent?: SignalValueFlexContent
CurveProps.alignContentalignItems
alignItems?: SignalValueFlexItems
CurveProps.alignItemsalignSelf
alignSelf?: SignalValueFlexItems
CurveProps.alignSelfanchor
Inherited from CurveProps.anchoranchorX
anchorX?: SignalValuenumber
CurveProps.anchorXanchorY
anchorY?: SignalValuenumber
CurveProps.anchorYantialiased
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
basis?: SignalValueFlexBasis
CurveProps.basisbottom
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.
CurveProps.bottombottomLeft
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.
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 NodeProps.position property.
CurveProps.bottomRightbowing
bowing?: SignalValuenumber
Controls the curve deviation from a straight line.
A value of 0 will cause lines to be perfectly straight. Higher values introduce more curvature.
Inherited fromCurveProps.bowingcache
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
children?: SignalValueComponentChildren
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
columnGap?: SignalValueLength
CurveProps.columnGapcomposite
composite?: SignalValueboolean
CurveProps.compositecompositeOperation
compositeOperation?: SignalValueGlobalCompositeOperation
CurveProps.compositeOperationcornerSharpness
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
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
fill?: SignalValuePossibleCanvasStyle
CurveProps.fillfillShaders
fillShaders?: PossibleShaderConfig
CurveProps.fillShadersfilters
filters?: SignalValueFilter[]
CurveProps.filtersfontFamily
fontFamily?: SignalValuestring
CurveProps.fontFamilyfontSize
fontSize?: SignalValuenumber
CurveProps.fontSizefontStyle
fontStyle?: SignalValuestring
CurveProps.fontStylefontWeight
fontWeight?: SignalValuenumber
CurveProps.fontWeightgap
gap?: SignalValuePossibleVector2Length
CurveProps.gapgrow
grow?: SignalValuenumber
CurveProps.growheight
height?: SignalValueLength
CurveProps.heightjustifyContent
justifyContent?: SignalValueFlexContent
CurveProps.justifyContentkey
key?: string
CurveProps.keylayout
layout?: LayoutMode
CurveProps.layoutlayoutChildren
layoutChildren?: LayoutMode
Whether this node lays out its own children with flex. When null
(the default), falls back to layout.
CurveProps.layoutChildrenlayoutSelf
layoutSelf?: LayoutMode
Whether this node participates in its parent's flex layout. When
null (the default), falls back to layout.
CurveProps.layoutSelfleft
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.
CurveProps.leftletterSpacing
letterSpacing?: SignalValuenumber
CurveProps.letterSpacinglineCap
lineCap?: SignalValueCanvasLineCap
CurveProps.lineCaplineDash
lineDash?: SignalValuenumber[]
CurveProps.lineDashlineDashOffset
lineDashOffset?: SignalValuenumber
CurveProps.lineDashOffsetlineHeight
lineHeight?: SignalValueLength
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
maxHeight?: SignalValueLengthLimit
CurveProps.maxHeightmaxWidth
maxWidth?: SignalValueLengthLimit
CurveProps.maxWidthmiddle
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 anchor is not set, this will be the same as the
NodeProps.position.
CurveProps.middleminHeight
minHeight?: SignalValueLengthLimit
CurveProps.minHeightminWidth
minWidth?: SignalValueLengthLimit
CurveProps.minWidthopacity
opacity?: SignalValuenumber
CurveProps.opacitypadding
Inherited from CurveProps.paddingpaddingBottom
paddingBottom?: SignalValuenumber
CurveProps.paddingBottompaddingLeft
paddingLeft?: SignalValuenumber
CurveProps.paddingLeftpaddingRight
paddingRight?: SignalValuenumber
CurveProps.paddingRightpaddingTop
paddingTop?: SignalValuenumber
CurveProps.paddingTopposition
Inherited from CurveProps.positionradius
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
CurveProps.ratioref
ref?: ReferenceReceiverany
CurveProps.refright
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.
CurveProps.rightrotation
rotation?: SignalValuenumber
CurveProps.rotationrough
rough?: SignalValueboolean
Enable rough.js rendering.
Inherited fromCurveProps.roughroughDisableMultiStroke
roughDisableMultiStroke?: SignalValueboolean
Whether to disable multi-stroke rendering.
By default, Rough.js renders strokes with multiple lines for a more sketchy appearance. Set to true to use a single stroke.
Inherited fromCurveProps.roughDisableMultiStrokeroughDisableMultiStrokeFill
roughDisableMultiStrokeFill?: SignalValueboolean
Whether to disable multi-stroke fill.
By default, Rough.js renders fills with multiple passes. Set to true to use a single fill pass.
Inherited fromCurveProps.roughDisableMultiStrokeFillroughFillStyle
roughFillStyle?: SignalValueRoughFillStyle
Fill style for the shape.
Inherited fromCurveProps.roughFillStyleroughFillWeight
roughFillWeight?: SignalValuenumber
Thickness of the lines used for filling.
Only applicable for hachure, cross-hatch, and similar fill styles.
Inherited fromCurveProps.roughFillWeightroughHachureAngle
roughHachureAngle?: SignalValuenumber
Angle of the hachure lines in degrees.
Only applicable for hachure and cross-hatch fill styles.
Inherited fromCurveProps.roughHachureAngleroughHachureGap
roughHachureGap?: SignalValuenumber
Gap between hachure lines in pixels.
Only applicable for hachure, cross-hatch, and similar fill styles.
Inherited fromCurveProps.roughHachureGaproughness
roughness?: SignalValuenumber
Numerical value indicating how rough the drawing is.
A value of 0 will produce a smooth shape, while higher values introduce more irregularity. Typical range is 0-10.
Inherited fromCurveProps.roughnessroughSeed
roughSeed?: SignalValuenumber
Seed for the random number generator.
Using the same seed produces consistent results, which is useful for reproducible animations.
Inherited fromCurveProps.roughSeedrowGap
rowGap?: SignalValueLength
CurveProps.rowGapscale
Inherited from 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
size?: SignalValuePossibleVector2Length
CurveProps.sizeskew
Inherited from CurveProps.skewskewX
skewX?: SignalValuenumber
CurveProps.skewXskewY
skewY?: SignalValuenumber
CurveProps.skewYsmoothCorners
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.
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
stroke?: SignalValuePossibleCanvasStyle
CurveProps.strokestrokeFirst
strokeFirst?: SignalValueboolean
CurveProps.strokeFirststrokeShaders
strokeShaders?: PossibleShaderConfig
CurveProps.strokeShaderstextAlign
textAlign?: SignalValueTextAlign
CurveProps.textAligntextDirection
textDirection?: SignalValueCanvasDirection
CurveProps.textDirectiontextWrap
textWrap?: SignalValueTextWrap
CurveProps.textWraptop
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.
CurveProps.toptopLeft
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.
CurveProps.topLefttopRight
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.
CurveProps.topRighttranslate
Inherited from CurveProps.translatetranslateX
translateX?: SignalValuenumber
CurveProps.translateXtranslateY
translateY?: SignalValuenumber
CurveProps.translateYverticalAlign
verticalAlign?: SignalValueVerticalAlign
CurveProps.verticalAlignwidth
width?: SignalValueLength
CurveProps.widthwordBreak
wordBreak?: SignalValueWordBreak
CurveProps.wordBreakwrap
wrap?: SignalValueFlexWrap
CurveProps.wrapx
x?: SignalValuenumber
CurveProps.xy
y?: SignalValuenumber
CurveProps.yzIndex
zIndex?: SignalValuenumber
CurveProps.zIndex