Image Rotation

Rotate At Center

Storyboard image render extensions have an option to facilitate the rotation of an image at the center of the image. For images that are not scaled, this option behaves exactly as one might expect it would and as the rotation property is changed the image rotates accordingly.

When an image is scaled and there is need to rotate it the rotate at center provides an automatic scaling facility that may not be what you are expecting. In these situations the selection of rotating at center or selecting a custom rotation co-ordinate and making it the center of the image will provide different results.

In all situations, the option to rotate at center works best with the image render extension alignment configured center-center as such:


The rotate at center option uses a specific transformation path that will scale the image to fit the original size of the render extension after the rotation has taken place, this means that as it is rotated, it will be scaled to fit into its original bounds.


Rotate At Custom Point

The option to use custom rotation points works well with scaled images. The image will be scaled to fit its render extension bounds before being rotated and the image rotation will be performed without modifying the size of the image on screen.

In order to see the visual representation of the custom rotation point in Storyboard Designer, a render extension must have 'Rotate around center of control' disabled and must either have a non-zero rotation angle or must have a variable bound to the rotation property of the render extension. Hovering the mouse cursor over the crosshair will display the name of the render extension and the position of the rotation center point. Changes made to the rotation center x and y in the Properties View will be reflected by the crosshair in the editor.


Clicking on a control with a visible center rotation point crosshair will enter the control into direct edit mode. Upon entering this mode, the center rotation point crosshair will change to indicate that it is in direct edit mode and the mouse cursor will change to indicate that the point can be dragged. Direct edit mode allows you to drag the center rotation point crosshair within the bounds of the control, the center rotation x and y properties will be updated to reflect changes to the crosshair position. When multiple image render extensions which are rotated at custom points exist on the same control, only the topmost render extension's crosshair will become active in direct edit mode.


When images are rotated dynamically at runtime, there is rarely a one-to-one correspondence between the original source pixels and the destination pixels so some level of interpolation, or mapping, is going to occur. There are many different algorithms for this interpolation each of which trades visual image quality for the cost of the computation to perform the interpolation. This trade off can be adjusted globally by configuring the quality render manager option for sbengine, with Storyboard defaulting to a higher visual quality mid-CPU cost option. On OpenGL based rendering platforms, another option that can have an equally significant impact on the visual quality of rotated images is the multisample render manager option which controls how the edges of image textures are blended with one another. Higher multisampling means smoother edges and lower multisampling results in more jagged edges.

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request



Article is closed for comments.