question

DaljitSingh-1549 avatar image
1 Vote"
DaljitSingh-1549 asked ·

CanvasRenderTarget poor rendering quality when drawing ink

I have a ScrollViewer which contains a CanvasVirtualControl. My app does the following:

  1. Use an InkCanvas to draw wet ink

  2. Custom dry the ink and render it offscreen on a CanvasRenderTarget

  3. Then draw the appropriate portion the target onto a CanvasVirtualControl

  4. When user pinch zoom, the entire canvas is invalidated, then the DpiScale of the canvas is changed and a new render target is created with the new dpi. Then finally the entire canvas is repainted.

This works ok, but the problem occurs in the fourth step. When I scale the canvas and then invalidate the entire canvas to redraw it again, the rendering quality of the ink strokes is incredibly poor. I notice that if I draw a new ink stroke at a certain zoom level (with appropriate dpi) then the new ink stroke is rendered perfectly fine, but the old ink strokes are rendered poorly. This is the code that gets called in step 4:

private void canvasControl_RegionsInvalidated(Microsoft.Graphics.Canvas.UI.Xaml.CanvasVirtualControl sender, Microsoft.Graphics.Canvas.UI.Xaml.CanvasRegionsInvalidatedEventArgs args)
        {
            bool createRenderTarget = (this.renderTarget == null);

            if (createRenderTarget)
            {
                this.renderTarget = new CanvasRenderTarget(
                this.canvasControl, // the canvasControl has new dpi now
                this.canvasControl.Size);
            }
            foreach (var region in args.InvalidatedRegions)
            {
                using (var renderSession = renderTarget.CreateDrawingSession())
                {
                    if (createRenderTarget)
                    {
                        // have to clear out the render target on first use.
                        renderSession.Clear(Windows.UI.Colors.Transparent);
                    }
                    Debug.WriteLine(updateStrokes.Count);
                    renderSession.DrawInk(updateStrokes);
                }
                using (var ds = sender.CreateDrawingSession(region))
                {
                    float opacity = 1.0F;
                    ds.DrawImage(renderTarget, region, region, opacity, CanvasImageInterpolation.HighQualityCubic);
                }
            }
        }

Here is a picture of what I am seeing (the canvas has been zoomed and a new ink stroke is drawn), I noticed that the rendering quality decreases when the user scales down the canvas (and then scale up). Annotation 2020-01-20 004752

uwp
· 3
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Do you mean when you scale the canvas and redraw it, the rendering quality of the ink strokes are worse than the old ink strokes except at a certain zoom level? And just scale down the canvas and scale up, the quality also decreases? Can you please provide a simple sample that can be reproduced for us to test?

0 Votes 0 · ·

Hi I found the solution to the problem. It turns out that I was mistakenly draw my strokes each time without first clearing my "wet strokes container". So basically but what happening was that I was drawing the strokes multiple times and obviously the antialiasing suffered from it.

I am not sure how to close this question, so please if could you mark this as solved (or tell me how to do this).

0 Votes 0 · ·

Hi, glad you solved it. You can post an answer directly and mark it yourself.

0 Votes 0 · ·

1 Answer

DaljitSingh-1549 avatar image
0 Votes"
DaljitSingh-1549 answered ·

It turns out that I was mistakenly draw my strokes each time without first clearing my "wet strokes container". So basically but what happening was that I was drawing the strokes multiple times and obviously the antialiasing suffered from it. If the strokes are drawn once, there is no problem.

· Share
10 |1000 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.