Returns true
if this transform has no operations to perform.
Returns true
if this transformation has a scaling component.
Rotation component of the transform expressed as percent of 360 degrees (eg. 50 % = 180 degrees).
The order in which to apply transform component operations. Expressed as an array of operations where each operation is one of:
"O" - Offset (translate)
"R" - Rotate
"SC" - Scale
"SK" - Skew
The transformation scope affects which layer(s) of a layered icon or paths of a paths array are affected by this transform.
Valid string values for setting this property are one of: "previous layer", "all previous", "all following", "reset [following]"
Only relevant when using render or transformPaths methods. For transformPaths()
, only the first two scopes are relevant.
When reading the property it is always returned as a numeric enumeration type.
Optional
init: PartialDeep<Transformation>Clears the cached transform matrix. Typically the cache management is handled automatically when relevant properties are modified.
Returns the current transform operations as a DOMMatrix
which uses given txOrigin
as origin point for rotation and scaling,
and scales translations to txArea
size. The returned value may be a cached version if no properties have changed since the cache was created,
and txOrigin
and txArea
are the same as the cache'd version. Using this method with a new arguments will regenerate the matrix and update the cache.
Applies current transform matrix to the given canvas context using rect
coordinates for tx center origin and area.
Applies current transform matrix to the given paths
starting at fromIdx
and using rect.size
for relative scaling and translation.
The individual path bounds are used for computing center point for rotations and scaling.
If the scope
of this transform is TransformScope.PreviousOne
then only the last path in paths
array is tranformed, regardless of how many there are in total.
Applies a matrix transformation to a canvas context.
Transform operations are specified as individual steps (eg. rotate, translate) and then combined in the specified order into a DOMMatrix which can then be queried with toMatrix and getMatrix or applied to a context or a
Path2D
path in the render or transformPaths methods, respectively.The primary difference between this class and a regular
DOMMatrix
(or transforming a canvas directly) is that all the terms used inTransformation
are relative to a given size when queried or drawn. The values for all operations are specified as percentages, not literal pixels. The query and drawing methods all require a rectangle (or size and origin point) to scale the final matrix into.It employs a caching strategy to avoid re-computing the final matrix if input parameters and the drawing bounds do not change between calls to the
render()
,transformPaths()
orgetMatrix()
methods.