Vector Graphics with VG.net and Visual Studio Integration
Today we released Version 6.2 of the VG.net vector graphics system. Changes include:
- Visual Studio 2010 support.
- The new Center Selection button, in the Drawing Toobar, pans the designer surface to center the selected Elements.
- Double-clicking on a Group makes it the Active Group. When a Group is active, double clicking on the background deactivates the Active Group.
- You can now make a nested Group the Active Group. The Group can be nested to any depth. Formerly, you could only make a top-level Group the Active Group.
- Keyboard shortcuts for zooming and panning.
- Use the new PixelSnapMode property, in the RenderAppearance class, to increase the clarity of thin lines, or the edges of rectangles, by snapping points to pixel coordinates. PixelSnapMode values:
- Absolute: points are snapped to pixels by rounding absolute coordinates.
- VectorCenter: a new, unique type of snapping. The Element's Center is snapped to a pixel point. Vectors from the Center to each point are then snapped to a pixel boundary. By snapping vectors rather than points, a small Shape improves its clarity and symmetry.
- BoundsAbsolute: the upper left and lower right corner of the Element's Bounds are snapped by rounding their absolute coordinates. Interior points in a Polyline or Path are not snapped.
- Visual Basic versions of some samples.
- The ThemedRobot and ThemedRobotVB samples, in the Extras package, demonstrate how to use Groups, Rotation transformations, and TransformationReference settings to create a segmented robot arm.
- Bug fixes.
Below are screenshots illustrating PixelSnapMode for small Shapes. First we created Shapes, all the same dimensions, then we zoomed out so the Shapes were no longer naturally aligned on pixel coordinates. From the left to the right, the following PixelSnapMode values were used: None, Absolute, Vector Center. Blown-up versions of the same images are on the second row.
Notice how the VectorCenter PixelSnapMode keeps all small shapes at a consistent size, even though they are positioned at fractional pixel distances from one another. PixelSnapMode has no real benefit for Ellipses or Arcs; it is best for Shapes containing some straight lines. It is useful for larger Shapes as well. Below we show the effect of PixelSnapMode on larger Shapes. On the left is None, on the right is VectorCenter:
Version 5.1 of the VG.net vector graphics system is released. Click the image above to run the robot arm sample. The buttons at the top change the overall color of the application. This color change uses a new feature in VG.net called Themes.
A Theme is similar to a style sheet in html. A Theme collects common Style and ImageData objects in a single place, for reuse across multiple Pictures, or to swap a set of Styles as a batch. The robot arm sample contains three Themes that are dynamically swapped to change several Styles at the same time. When used across multiple Pictures, a Theme eliminates time wasted duplicating and synchronizing Styles. You can edit and preview Styles in a Theme as you would in any Picture.
Other changes in version 5.1 include:
- Fast Scrolling: by default, Canvas scrolling is hardware accelerated, as demonstrated in an earlier blog post.
- Serialization: save and restore objects to and from compact binary files or streams. You can serialize VG.net objects or your own classes and structures. This is useful for custom editors, storing objects in a database, or transferring objects across a network. You will find serialization related classes in the Prodige.Serialization namespace. Unlike the serialization support built into the .NET framework, the classes in Prodige.Serialization are designed to: minimize file size, maximize speed, operate without reflection or boxing of value types, and provide infinite upward compatiblity for serialized files.
- TranslucentForm Improvements: the TranslucentForm class, a window providing a complete vector graphics UI with per-pixel alpha transparency, is extensively reworked and many problems are eliminated.
- Source Code Samples: new samples in the standard and Extras package include a strip chart library, a SCADA simulation, a particle system, a Theme demonstration, a basic button library, and bitmap effects. Two of the these samples are described below.
- The VG.net Users Guide contains new sections describing Themes and Serialization.
- Bug fixes and smaller enhancements: please see the 5.1 Readme for more information.
A new strip chart component is provided in the strip chart sample in the Extras package. Click on the image above to run the sample. The strip chart is designed to minimize CPU usage, so you can use several on the same screen. You can pause the automatic chart scrolling. When paused, you can manually scroll the chart to any data sample. The chart saves data samples in a circular buffer, which you can set to any size needed. The chart also supports zooming in integer increments.
Click the image above or below to run the new particle system sample provided in the Extras package. The particle system creates and animates 10,000 particles. Originally written to illustrate the operation of an egg smashing machine, you may wish to use the particle system component to illustrate a mixing or painting operation. The particle system performs all rendering with managed code.
Steed.net is a new way of doing .net development in Visual Studio. You can create state machines in Visual Studio using a graphical designer. The graphical designer uses VG.net vector graphics. A list of features:
- Visual Studio integration
- Graphically create flow charts and state machines
- Your workflow (state machines) determine visualization and creation of controls
- Monitor and log object lifetimes in running applications
- Automatically generates documentation
- Maintains a strict separation between architecture and application code
- Simplifies debugging and error finding
Read more on the State Method web site.
Download the source code to learn how to centralize all your Styles into a single template Picture that overrides Styles recursively, starting at a top-level Picture and moving to sub Pictures.
In the future we will have a special class in VG.net you can derive from, a type of Picture, that you can drag and drop onto any Picture in order to reuse a central set of Styles. This sample code allows you to centralize Styles with released versions of VG.net, 2.7 or 2.8.
This sample also demonstrates how to create a vector graphics LED radio button, and how to use the TranslucentForm class.
If you are using a Lite version, change DisplayInTranslucentForm to DisplayInForm, and you can run the code.