Shape Transformations

From Emitrom

Jump to: navigation, search

Back to Index

The following attributes of IPrimitive nodes (i.e. Groups and Shapes) affect the shape and size of a node: x, y, rotation, scale, shear, offset and transform.

At first glance, it may seem overly complicated and some attributes seem unnecessary, but there is a reason why we did it this way.

We basically support two models, the simple model and the advanced model. In both models, the combination of attributes ultimately results in a single affine transformation, which is a combination of translations (i.e. offsets), rotations, scaling, reflections and shears.

In the simple model, the following attributes apply: x, y, rotation, scale, shear and offset (transform must be null). And in the advanced model only these attributes apply: x, y and transform (see Transform class.) When a transform is specified (i.e. not null), we switch to the advanced model and ignore rotation, scale, shear and offset. The simple model should suffice in most cases. Only when you want to manipulate the transform directly would you use the advanced model.

In the simple model, we apply the attributes in the following order:

  1. x, y - moves the node within the parent context
  2. rotation - rotates the node around its (x,y) position
  3. scale - scales the node about the (x,y) position. Different scale factors can be provided for the X and Y directions. Negative scale factors can be used to mirror (a.k.a reflect) a node.
  4. shear - shears the node about the (x,y) position. Different shear factors can be provided for the X and Y directions.
  5. offset - moves the node by a second offset (dx,dy)

In the advanced mode, we first apply the (x,y) offset, followed by the transform.

Note that strictly speaking we didn't need the x and y attributes in the advanced model, and could have used just a transform, but we found it easier to separate out the x and y attributes for certain use cases. We also didn't really need the offset in the simple model, but it allows us to easily rotate/scale or shear the node about an arbitrary point.

Note also that the strokeWidth and shadow attributes also technically affect the size of the shape that is drawn, but we're just trying to explain the transformation-related attributes here.

Hand-point.png Transform 3 Points Demo Hand-point.png Transform Hand-point.png Basic Node Attributes Hand-point.png Shape Specific Attributes

Viewport Transform

The Transform of the Viewport determines which Nodes (on "zoomable" Layers) are visible and at what scale. The zoom Mediators and pan Mediators all modify the Viewport's transform attribute.

To receive event notifications when a Viewport's transform attribute changes, register a ViewportTransformChangedHandler. See Mediators for more info.

Personal tools