I have an application that generate graphs from some input files. The user has the option to generate an image from these graphs. The graph is created using an external library that draws into a custom visual object (inherits from Canvas).

The Functionality

I created a custom functionality to create the image out of this canvas and it has worked well so far. The problem I'm having is related to its performance when the need to generate an image out of VERY large graph.

The images generated by this functionality has always been big, to be able to generate these large images I generate smaller "chunks" (configurable, but currently at 2000x2000px, larger chunks can lose quality and smaller is slower). After these "chunks" are created I merge them using another external library (this last works fine and it is really fast, the issue does not lie here).

The Issue

The problem is happening that the larger the original visual is, each chunk rendering takes longer.

The problem is that the larger the image is, each "chunk" rendering takes longer. I'll post the code here later, but I've noticed that the "RenderTargetBitmap.Render()" method when using my "DrawingVisual" (with the chunk information). As an example, this method call takes 400ms+ on my local tests where the Canvas is 74052.75px x 1119.4px; the total image creation time takes about 20 secs.

This would not be that bad, but there was a requirement where a large (MUCH larger) image has to be created and each chunk is taking 5 minutes to generate, so my estimation is that it would take about 60 days.

The Code

This is the code I'm using at each "chunk" loop. The code is modified to remove some cancellation token and progress report calls. I also added a comment to highlight the call that takes 400+ms.

for (int i = 0; i < rowCount; i++)

 for (int j = 0; j < colCount; j++)
 
 int row = i, col = j; //this is done because task start could have a modified value on call
 Rect rect = new Rect(
 col * maxWidth,
 row * maxHeight,
 col + 1 < colCount ? maxWidth :
 surfaceWidth - (colCount - 1) * maxWidth,
 row + 1 < rowCount ? maxHeight :
 surfaceHeight - (rowCount - 1) * maxHeight);

 DrawingVisual visual = new DrawingVisual();

 using (var dc = visual.RenderOpen())
 
 VisualBrush brush = new VisualBrush(element)
 
 Viewbox = rect,
 ViewboxUnits = BrushMappingMode.Absolute,
 Stretch = Stretch.None
 ;
 dc.DrawRectangle(brush,
 null,
 new Rect(0, 0, rect.Width, rect.Height));
 

 RenderTargetBitmap bitmap = new RenderTargetBitmap(

 (int)(rect.Width * (imgdpi / DEFAULT_DPI)),
 (int)(rect.Height * (imgdpi / DEFAULT_DPI)),
 imgdpi,
 imgdpi,
 PixelFormat);

 //***********************//
 //THIS IS THE CALL THAT TAKES 400+ms
 //***********************//
 bitmap.Render(visual);


 PngBitmapEncoder encoder = new PngBitmapEncoder();
 encoder.Frames.Add(BitmapFrame.Create(bitmap));

 MemoryStream ms = new MemoryStream();
 encoder.Save(ms);

 //... Some additional code to work with the chunk asynchronously
 

Things I've tried

I've tried several things:

1. Calling Dispatcher.DisableProcessing: I was thinking that it could have been that the UI kept trying to update the surface while processing the chunks (althought my understanding that if it has not been modified it shouldn't be much of a problem). But this did not change the processing time.


2. While creating the VisualBrush object to assign to it smaller Viewports (chunk size or bigger). The time actually increased.


3. Adding CacheMode to the Canvas: The time actually increased and the image looked low resolution.


4. Some additional desperate measures that made no sense haha.

Additional Information

Since I'm not completely sure how this Render functionality works internally (And I have searched for information on these, but what I've found is superficial at best) I'm not sure if the cause is the large surface or the number of controls in the surface (or a combination of both). So here is some additional information on the test case that is taking 400ms per render:

• Surface Size is: 74052.75px x 1119.4px.


• N. of Graph's Nodes: 1977.


• N. of Connectors (Arrows): 2052.


• Each Control visual is defined in the XAML using resources.


• Each Graph Node is a Filled Rectangle with a Textblock at its center.


• Each Connector is a straight line with a triangle at one of its edges.

Also, since the very large image generation is not something that will happen that often, and not to a regular user. I would not mind if the solution provided sacrifices UI responsiveness.

Notes added to clarify some concerns in the comments section

• The graph is shown on screen to the user, this can be manipulated by it.


• The "Store as Image" functionality is just an additional optional functionality to save the graph as an Image file. (This works under normal load, the speed issue happens with an unnusually large graph).

I'd appreciate any help you could provide.

Thanks!