Transform Tab How-To

Transform Tab

NOTE: Any CGK visual component that supports transformation will have the above GUI Painter Tool tab. If you navigate to this tab and all the controls are disabled, then your component does not have a Transform Layout. This option can usually be found on either the Basic or Details tab of the GUI Painter Tools window when your CGK component is selected from the component tree.

Anchor Points Group

These radio buttons and input fields are used to define a component’s rotation anchor. The default is always Center when selecting the Layout For Full Transform option for a component. The other choices are:

• Top Left
• Center Left
• Bottom Left
• Center Top
• Center Bottom
• Top Right
• Center Right
• Bottom Right
• Arbitrary
  • Use X and Y input fields to define this point.

The anchor point is always represented by a cross-hair symbol.

Cross-hair "About Center" Marker

To see this cross-hair symbol, the Rotation Mode Tracker needs to be active. You can activate it by one of the following two methods:

1) Press the Tracker button that is part of the Rotation group.

2) With the canvas window as the active window, and your component selected in the component tree, press Alt-r or Alt-R.

NOTE: The Tracker button that belongs to the Anchor Points group is purposely disabled. A future version of the CGK will provide an About Point Tracker that allows the user to use their mouse to define the about point.

Rotation Group
Use the Angle (degrees) field to enter the component’s rotation value.

• You can also set the rotation angle using the mouse.
• Follow the same two steps above to activate the rotation mode tracker.
• Click and hold any of the white circular handles while moving your mouse.
• After you release the mouse, the rotation angle will be captured in the Angle (degrees) field.

Component Scale Group
Use the X or Y fields to enter the component’s scale value.

NOTE: The Tracker button that belongs to the Component Scale group is purposely disabled. A future version of the CGK will provide a Scale Tracker that allows the user to use their mouse to define the scale value.

Clipping Margins Group
When a component’s Layout For Full Transform option is enabled, it will initially report its bounds as the smallest area needed to make a complete 360 degree rotation around its Anchor Point and NOT clip its display. During component editing, this area is visually represented by a dashed line box surrounding the component. Since the initial clipping bounds may not be desirable in all situations (e.g. your rotating the component at runtime), the user can override the clipping bounds via individual clipping margins.

In the following example, a CairoVisualRegion has its anchor point set to Center Right. You can see from the dashed line box that the initial bounding area overlaps with Button 1 and Button 2.

CairoVisualRegion bounding area

If the CairoVisualRegion was rotated during runtime, it would overlap  the buttons as shown below.

CairoVisualRegion overlapping buttons

Using margins, the user can define their own clipping region while still maintaining the original rotation anchor point.

Modified margins change the clipping region

There are two ways to modify the margin values:

1) Through direct entry using the Left, Top, Right or Bottom fields.

2) Using the mouse.

You can activate the mouse tracker by one of the following methods:

- Press the Tracker button that belongs to the Clipping Margins group.

or

- With the canvas window as the active window, and your component selected in the component tree, press Alt-t or Alt-T.