Positioning
Motion Canvas uses a Cartesian coordinate system. Its origin is located in thecenter of the scene, with the x-axis going to the right and the y-axis goingdown.
Transform
All nodes are positioned relatively to their parents. This means that anytransformations applied to the parent are also applied to its children. Thetransform of each node consists of the following properties:
Node.position
readonly
public
position
:
Vector2Signal
Node
Represents the position of this node in local space of its parent.
Examples
Node.scale
readonly
public
scale
:
Vector2Signal
Node
Represents the scale of this node in local space of its parent.
Examples
Node.rotation
readonly
public
rotation
:
SimpleSignal
number
Node
Represents the rotation (in degrees) of this node relative to its parent.
Absolute transform
Each of the basic transform properties has a dedicated helper method thatoperates in world space.
This can be helpful, for instance, when we need to match the transforms of twonodes located within different parents. Consider the following example:
const
circleA
=
createRef
<
Node
>
(
)
;
const
circleB
=
createRef
<
Node
>
(
)
;
view
.
add
(
<
>
<
Node
position
=
{
[
200
,
100
]
}
>
<
Circle
position
=
{
[
0
,
100
]
}
ref
=
{
circleA
}
width
=
{
20
}
height
=
{
20
}
fill
=
{
'white'
}
/>
Node
>
<
Circle
ref
=
{
circleB
}
width
=
{
10
}
height
=
{
10
}
fill
=
{
'red'
}
/>
>
,
)
;
circleB
(
)
.
absolutePosition
(
circleA
(
)
.
absolutePosition
(
)
)
;
We access the absolute position (position in world space) of
circleA
andassign it as the absolute position of
circleB
. This will move the
circleB
right on top of
circleA
.
Note that we still need to set the
absolutePosition
of
circleB
and not justthe
position
. It may seem redundant since
circleB
is a direct child of thescene view. But the local space of the scene view is
not
the same as theworld space.
All available world-space properties are listed below:
Node.absolutePosition
readonly
public
absolutePosition
:
SimpleVector2Signal
Node
A helper signal for operating on the position in world space.
Retrieving the position using this signal returns the position in worldspace. Similarly, setting the position using this signal transforms thenew value to local space.
If the new value is a function, the position of this node will becontinuously updated to always match the position returned by the function.This can be useful to "pin" the node in a specific place or to make itfollow another node's position.
Unlike
position
, this signal is not compound - it doesn't containseparate signals for the
x
and
y
components.
Node.absoluteScale
readonly
public
absoluteScale
:
SimpleVector2Signal
Node
A helper signal for operating on the scale in world space.
Retrieving the scale using this signal returns the scale in world space.Similarly, setting the scale using this signal transforms the new value tolocal space.
If the new value is a function, the scale of this node will be continuouslyupdated to always match the position returned by the function.
Unlike
scale
, this signal is not compound - it doesn't containseparate signals for the
x
and
y
components.
Node.absoluteRotation
readonly
public
absoluteRotation
:
SimpleSignal
number
Node
A helper signal for operating on the rotation in world space.
Retrieving the rotation using this signal returns the rotation in worldspace. Similarly, setting the rotation using this signal transforms thenew value to local space.
If the new value is a function, the rotation of this node will becontinuously updated to always match the rotation returned by the function.
Matrices
For more advanced uses, nodes expose all the matrices necessary to map vectorsfrom one space to another. For example, the helper properties described abovecould be reimplemented using the
worldToParent
and
localToWorld
matrices:
// getting the absolute position:
node
.
absolutePosition
(
)
;
// same as:
Vector2
.
zero
.
transformAsPoint
(
node
.
localToWorld
(
)
)
;
// setting the absolute position:
node
.
absolutePosition
(
vector
)
;
// same as:
node
.
position
(
vector
.
transformAsPoint
(
node
.
worldToParent
(
)
)
)
;
The available matrices include:
Node.localToWorld
public
localToWorld
():
DOMMatrix
Get the local-to-world matrix for this node.
This matrix transforms vectors from local space of this node to worldspace.
Examples
Node.worldToLocal
public
worldToLocal
():
DOMMatrix
Get the world-to-local matrix for this node.
This matrix transforms vectors from world space to local space of thisnode.
Examples
Node.localToParent
public
localToParent
():
DOMMatrix
Get the local-to-parent matrix for this node.
This matrix transforms vectors from local space of this node to local spaceof this node's parent.
Node.worldToParent
public
worldToParent
():
DOMMatrix
Get the world-to-parent matrix for this node.
This matrix transforms vectors from world space to local space of thisnode's parent.