Transforms

Transforms allow you to rotate, scale and offset your shapes and groups. In contrast with raster drawing apps, PaintCode lets you transform your drawings without losing any picture quality.

The transforms you apply to your shapes are turned into affine transforms in the generated code. Note that you can connect variables to transform attributes of your shapes. This is great for making parametric drawings that, for example, utilize rotation, such as circular progress indicators.

All the important transforms attributes are located inside the Transforms box in the Inspector. By default, this box is closed:

To access the transform attributes easily, open the transforms box by clicking on its header in the Inspector. After you do so, text-fields for specifying rotation, X offset, Y offset, Y scale and Y scale of you shape appear.

Perhaps most importantly, a new symbol also appears next to your shape in the canvas:

Transform Origin

This green symbol is called "Transform Origin", and is very important. It is the origin of all transforms you apply to your shape. This means that when you rotate your shape, it will rotate around this point. The same applies for scale and offset. The origin symbol is only visible when the Transforms box is open in the Inspector.

Rotation transform

When you hover the origin, a circular border appears. Rotate your shape by dragging this circular border (alternatively, you can also rotate a shape by holding down the COMMAND key and dragging one of its control points in the canvas, even when the transforms box is closed in the Inspector and the origin is not visible. In that case, the origin will automatically move to the center of the rotated shape).

By default, the origin is placed into the corner of your shape. On iOS, this is the top left corner by default. On macOS, it is usually the bottom left corner, but this may change if you are using flipped canvases.

You can, however, move the origin anywhere you want. To do that, simply drag the center of the origin.

When dragging the origin, you'll notice that it snaps to corners of your shape, its center, and also to transform origins of other shapes. To suppress this behavior, hold down the COMMAND key while dragging the origin. By default, the origin does not snap to point grid. You can force it to snap to the point grid by holding down the CONTROL key.

Offset transform

The offset transform allows you to offset the shape from its transform origin. The important thing to realize here is that the X and Y position attributes that you often use in the Inspector are not coordinates of the corner of your shape. In fact, these are the coordinates of the transform origin of your shape - this is illustrated with the red arrow in the picture below.

On the other hand, the offset transform (shown as blue arrow in the picture above) moves the shape from the transform origin.

Usually, the offset transform (blue arrow) of shape is zero, so coordinates of the corner of your shape and coordinates of its transform origin are one and the same. This is no longer true when you use non-zero offset transform.

Scale transform

The scale transform allows you to stretch your shape along its X and Y axis. In the example below, the blue rectangle has the same width and height as the grey rectangle, but the scale transform makes it a different size in the canvas.

Transforms Order

The transformations are applied in this order:

• Offset
• Rotation
• Scale

What actually is the X and Y Position of shape?

In the "Offset transform" section, we've explained that the X and Y position coordinates that you use most often in the Inspector to place your shapes on the Canvas are actually coordinates of the green symbol, the transform origin.

However, that is not the whole truth - the question remains, what are these position coordinates relative to? When you draw a shape onto your canvas, and place it on coordinates (X = 200, Y = 100), what do these numbers actually mean? Obviously, it means that the shape should be placed on point (200, 100) - but from where? Where is the "zero" point?

Luckily, in most cases, the situation is really simple - the X and Y coordinates are relative to the drawing origin of the entire canvas. On iOS, this is the top left corner of canvas, but you can move it if you wish.

However, the situation gets more complicated once you start using transformed groups. In the example below, we've placed 3 rectangles into a group. Then we've rotated the group using the Rotation transform.

Here's how it looks in the Shapes & Groups browser.

When you select a shape in the transformed group, you'll notice that its X and Y position coordinates are 0 and 103, respectively.

This is because the transform origin of the rotated group has become the origin of the coordinate system for its entire content. All transformed groups behave this way.

A group is considered transformed if any of these conditions is met:

• rotation is non-zero
• offset is non-zero
• scale X or scale Y is not equal to 1
• variable is attached to rotation, scale or offset transform of the group

In the picture above, you can see the origin of the current coordinate system indicated with the two orthogonal blue arrows. These represent the X and Y axes of the coordinate system.

In short, the X and Y position of a shape is defined in relation to the coordinate system in which the shape is placed. The origin of this coordinate system is defined by the closest transformed ancestor group, and if there is not transformed group among the shape's ancestors, the origin of the canvas is used.