Using the Symbol Editor > Using More Features of the Symbol Editor > Additional Transformation Techniques > Rotating an Object

Rotation is when an object turns clockwise or anti-clockwise on an axis you define. Like changes to the size or position of an object, the degree of rotation is set in the following ways:

Using rotation, you can create an alternative graphic representation for real time change.

The axis on which an object rotates is chosen by setting the Center field in the Styling Customizer. Figure 2.7 shows the different axis points that can be defined on an object.

images/diasym_align.png

Figure 2.7 Rotation Axis Points for a Symbol Object

Note
The axis is set on an object´s bounding box. That is, the smallest rectangle containing all parts of an object.

Setting the Angle field in the Styling Customizer to a positive value rotates the object clockwise, a negative value rotates anti-clockwise.

You will now see how to create a rotating object in an imported SVG image. To do this:

  1. In the Symbol Editor, create a new symbol. For more information, see Making a New Symbol.
  2. Navigate to the following directory:
  3. <installdir>/jviews-diagrammer81/bin/symboleditor/data/examples
  4. Import bamdial.svg. The SVG image creates an object SVG. For more information, see Importing a Vector Graphic.
  5. Delete the Text and Shape Objects. SVG is now the base object.
  6. Create a float parameter called progress. For more information, see Creating a New Parameter.
  7. Ungroup SVG. For more information see Converting SVG Images to Symbols.
  8. In the Symbol Outline pane, select the pointer object (General Path 6) and rename it pointer. See Figure 2.8 to see the pointer object.
  9. Select the Transform tab in the Styling Customizer.
  10. Click the Bind button next to the Angle field.
  11. Set the Parameter field to progress.
  12. Enable Compute the transformation according to the following min/max values.
  13. Set the following values:
  14. Click OK.
  15. Set the Center field to BottomRight.
  16. Save this symbol as gauge in a gauges category in the bampalette. For more information, see Saving a Symbol.

Test your symbol, you will see that the pointer rotates in function of changes in the value of progress.

images/diasym_gague.png

Figure 2.8 The Gauge Symbol