This component displays a Scalable Vector Graphics (SVG) drawing. |
|
This is what a vector drawing component can look like:
Common Properties
Width, Height, Bindings, Visible, Border
Custom Properties
Enable Interactions
When interactions are enabled it is possible to manipulate vector drawing in the widget window using the following keyboard/mouse shortcuts:
Shortcut |
Meaning |
Ctrl key + Mouse button 1 |
Magnify (zoom region) |
Shift key + Mouse button 2 |
Zoom |
Shift key + Mouse button 1 |
Pan |
Ctrl key + Mouse button 2 |
Rotate |
Ctrl key + Shift key + Mouse button 2 |
Reset transformations |
SVG FILE (Default Property)
SVG file to display.
Property name: drawing
Property type: Data Block
Flip Horizontal
Flips the drawing around horizontal axis.
Property name: flipHorizontal
Property type: Boolean
Flip Vertical
Flips the drawing around vertical axis.
Property name: flipVertical
Property type: Boolean
Scale
Scaling index. Value of 1.0 is used to disable scaling.
|
If scaled and rotated drawing doesn't fit the component's box, it will be cropped. |
Property name: scale
Property type: Float
Rotation
Scaling angle, in degrees.
|
If scaled and rotated drawing doesn't fit the component's box, it will be cropped. |
Property name: rotation
Property type: Float
Preserve Aspect Ratio
Enables/disables preserving the drawing's aspect ratio. If preserving is disabled, the drawing occupies the whole component's space.
Property name: preserveAspectRatio
Property type: Boolean
|
When preserving aspect ratio is disabled, Horizontal/Vertical Alignment properties are also disabled. |
|
Ignoring aspect ratio is useful when you need non-proportional scaling, for example when constructing pipelines consisting of different pipe segments. |
Horizontal Alignment
Defines the drawing horizontal alignment when the component's area is wider then the drawing: Left, Center, Right.
Property name: horizontalAlignment
Property type: String
Vertical Alignment
Defines the drawing vertical alignment when the component's area is higher then the drawing: Top, Center, Bottom.
Property name: verticalAlignment
Property type: String
Maximize
Enables automatic magnification of the drawing so that its margins (i.e. empty space around the image) are discarded.
|
When Maximize is checked, X/Y Margin Percent properties are enabled. Setting small X/Y margins can be used to prevent edges clipping when the drawing size is automatically detected. |
Property name: maximize
Property type: Boolean
X Margin Percent
X margin as a percentage of drawing width. Enabled when the Stretch To Fit is checked.
Property name: xMarginPercent
Property type: Float
Y Margin Percent
Y margin as a percentage of drawing height. Enabled when the Stretch To Fit is checked.
Property name: yMarginPercent
Property type: Float
Custom SVG Properties
SVG images included into some AggreGate distribution bundles are enhanced to support custom properties. These properties are defined as special extensions of SVG files. However, Vector Drawing component decodes these properties from SVG files and exposes them as "normal" component's properties, allow to edit them inside GUI Builder, manipulate them by widget bindings, and more.
The custom properties are visible in a separate SVG Properties group. The typical custom SVG properties are:
| • | Fill color (e.g. element colors) |
| • | Stroke width and color (e.g. outline strokes) |
| • | Rotation angle (e.g. gauge arrows) |
| • | Animation trigger (e.g. fan start/stop switches) |
| • | Element positions (e.g. tanks levels, damper positions) |
| • | And many more (pushbutton positions, etc.) |
Common Events
Hidden, Shown, Moved, Resized, Mouse Clicked, Mouse Pressed, Mouse Released, Mouse Entered, Mouse Exited, Mouse Moved, Mouse Wheel Moved, Key Typed, Key Pressed, Key Released, Focus Gained, Focus Lost