SilverlightDraw 1.0a - Analog Canvas from WinForms

Post from my blog .

2008 came and SL 2 Beta 1 came, it was a complete solution, without JS roots ... The first tests showed good performance and convenience, MS turned out to be a decent product. Although he had his drawbacks, he was impressed on sprite concepts. It was impossible to draw anything, Path is very slow, and Ellipse, Rectangle and Line have absolutely bad performance. For a long time I was looking for ways to draw with raster, not objects. Accidentally came across an article by Joe Stegman, Dynamic Image Generation in Silverlight . After research, it was noticed that SL performance is very dependent on memory allocation. After optimizing and minimizing memory allocation in the encoder, OneMem technology was created. Below are the results of the comparison of the two technologies.



Environment:



* Athlon 64 X2 4800+, Mem 2Gb.

* WinXP SP2, .Net1.1, .Net2.0, .Net3.5, Firefox 2.0.1.4.



* FPS - Frames Per Second (frames per second)



The tests consisted in a full fill of the area 400x400px in color, with a frequency of Interval. All measurements of the CPU load were carried out through the Task Manager, for the Firefox 2 application. The FPS was measured via the built-in SL counter, the maximum value is 62.

')

As can be seen from the table, the OneMem technology allowed us to increase performance by 8 times in CPU% and more than 3 times in FPS relative to the Original PNG Encoder.



Memory allocations were also minimized, which made it impossible to leak 640kb of memory per frame rendering (400x400), which, with Interval = 50, reduces the leakage of 12mb of memory.



A newer version of the Original PNG Encoder is currently available, and it may be faster.



After optimizing the Encoder, it was decided to make a complete SilverlightDraw solution, implementing the Graphics class in it with which it would be easy to export graphics work from .Net desktop programs to SL.



After finishing work on the Alpha version of SilverlightDraw, the following features were implemented:

Feature	Status
Clip	Yes
Transform	Move only
Drawpoint	Yes
Drawline	Yes, Bresenham algorithm
Pen	Color, Width (Only for rectilinear lines), DashStyle (Only for Width == 1)
Brush	SolidBrush only
Drawpolygon	Yes
Fillrectangle	Yes
Copybitmap	Support for various filters (Copy, AND, OR, etc.) You can create your own filter
Font	Downloading "fonts" from the server Font loading required before use.
Drawstring	Output only in horizontal direction
PNGDecoder	Convert PNG images to Graphics Only PNG32 (ARGB) format is supported.

Figure 1. Visualization of opportunities



In the process of implementing the Font manager, a PNGDecoder class was created that can convert a PNG (8bit per channel, ARGB - ONLY) picture to the Graphics class, which allows you to load and use pictures in the rasterization process.



Fonts are stored as two files:



* .png - a picture with a font

* .FontConfig - where settings, font information and character coordinates are stored



For the convenience of creating fonts, the SilverlightFontGenerator program has been created.



Which itself creates the files necessary for the "font".



To evaluate the performance of SilverlightDraw (OneMem), a test application was created that draws a specified number of lines (ItemCount) with an interval (Interval, ms) on an image of 400x400 size.



The speed of drawing lines with SilverlightDraw technology and drawing lines with the help of the Path object, the task of the last geometry (the Data field) are tested. All results are obtained without restarting the page.





As can be seen from the graphs with a large number of objects, Path dramatically increases the CPU utilization%, which leads to a catastrophic fall in FPS, and SilverlightDraw gradually decreases its performance with an increase in the number of lines. Most likely, a strong CPU load when displaying the Path is due to the fact that the SL2 engine uses Anti-aliasing filtering when displaying objects.



At the same time, it is necessary to take into account that SilverlightDraw allows you to draw each line in any color, unlike a Path object that can draw all lines with only one selected color.



Unfortunately, it was not possible to measure FPS on FireFox3, since the number of FPS was not displayed in the status bar, so all measurements were made on Internet Explorer 6.0.2900.2180.xpsp_sp2_qfe.070719-1309



Hardware, operating system and software remained the same, see the first test.



An additional reason for reducing Path performance is to use a XamlReader to set geometry:

 var sb = new StringBuilder ("<Path xmlns = \" http: //schemas.microsoft.com/client/2007 \ "Data = \" \ "");
 sb.Append (path_data) .Append ("\" /> ");
 Path path1 = (Path) XamlReader.Load (sb.ToString ());
 var o = path1.GetValue (System.Windows.Shapes.Path.DataProperty);
 path1.Data = null;
 path.SetValue (System.Windows.Shapes.Path.DataProperty, o); 

This is due to the fact that in Silverlight 2 Beta 2 it was not possible to directly assign a row with a geometry property to the Data property, as a result of which XamlReader is used.



In the future we plan to implement support for ellipses, fill an arbitrary area and produce a global fix for bugs.

Link to the demo .



PS: This is my first post.