radii
value is like css border-radius, an array of 1-4 "point-like" objects ({x,y}
) starting at top left corner, etc.
Empty array for no radius. Values can be in either percent of overall size (like CSS border-radius %) or in absolute pixels,
depending on the radiusIsRelative property. Radius values cannot be negative.
See radii
param at https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/roundRect#syntax
The radii can be set using an array of 1-4 numbers or PointType
{x,y}
objects, or a single numeric value (for all 4 corners).
Alignment value as two string values, first for vertical and second for horizontal. Eg. "top left" or "center middle". Setting the property can be done with either a single direction or both (separated by space or comma) in either order.
Horizontal alignment value as string. One of: 'left', 'center', 'right'
Vertical alignment value as string. One of: 'top', 'middle', 'bottom'
Returns true if there is nothing to draw: there is no fill and stroke width is zero
Optional
init: StyledRectangleInitClears the generated & cached Path2D object (if any). Some Path
subclasses my not use the cache.
Typically the cache management is handled automatically when relevant properties are modified.
Sets element width and height property values with optional unit type specifier to use for both dimensions.
If unit
is undefined then the current unit types for each dimension remain unchanged.
Optional
unit: stringOptional
unitY: stringReturns actual pixel width of this element, either scaled to viewWidth
if width unit is %
or actual width value if it is in pixels already. If this element's width value is zero then return viewWidth
.
Returns actual pixel height of this element, either scaled to viewHeight
if height unit is %
or actual height value if it is in pixels already. If this element's height value is zero then return viewHeight
.
Returns actual pixel width and height of this element, potentially scaled to viewSize
.
See actualWidth and actualHeight for details on returned values.
Draws the rectangle with all styling and positioning options applied onto ctx
using rect
dimensions for scaling and alignment.
Static
cleanValidates the value types in given array and that none of the values are < 0
;
Turns all single numeric values into {x,y}
PointType objects. Modifies the input array if needed.
Any array members which are neither numeric nor {x,y}
objects are replaced with a zero value.
Boolean operation to perform with previous path, if any.
May be used by subclasses in their IPathProducer#getPath
method to automatically combine with other paths.
true
if radius values in radii
array are given in percentages, or false
if they represent absolute pixels. Default is true
.
A zero width/height (default) indicates to draw into the full available image area (eg. passed to render()
in rect
argument). Negative values are not allowed.
How to align within drawing area if/when width
/height
doesn't fill it completely.
Extra position offset to apply after alignment. Expressed as a percentage of overall drawing area size.
Fill and stroke style to apply when drawing this element.
Whether to adjust (reduce) the overall drawing area size to account for shadow offset/blur.
Draws a rectangle shape on a canvas context with optional radii applied to any/all of the 4 corners (like CSS). The shape can be fully styled with the embedded
DrawingStyle
property.