Save Windows Ink as transparent PNG image - missing highlighter strokes

Question

I'm trying to include Windows Ink in a UWP app, and started by adapting the Windows Ink tutorial app to save the drawn strokes as PNG image (instead of GIF / ISF).

So, the XAML view includes a Windows.UI.Xaml.Controls.InkToolbar and a Windows.UI.Xaml.Controls.InkCanvas, and I'm able to draw strokes on the Canvas and save it as an image file through the following code:

IReadOnlyList<InkStroke> currentStrokes = inkCanvas.InkPresenter.StrokeContainer.GetStrokes();
if (currentStrokes.Count > 0)
{
    StorageFile file;
    // Using a file picker to identify the target file -> omitted this part
    if (file != null)
    {
        CanvasDevice device = CanvasDevice.GetSharedDevice();
        CanvasRenderTarget renderTarget = new CanvasRenderTarget(device, (int)inkCanvas.ActualWidth, (int)inkCanvas.ActualHeight, 96);

        using (var ds = renderTarget.CreateDrawingSession())
        {
            ds.Clear(Colors.White);
            ds.DrawInk(currentStrokes);
        }
        using (var fileStream = await file.OpenAsync(FileAccessMode.ReadWrite))
            await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f);
    }
}

Everything works fine so far. Now, I'd like to save the image with transparent background, and changed the following line:

ds.Clear(Colors.Transparent);

Even in this case, the file is saved, the background is transparent, and ballpoint strokes as well as pencil strokes are correctly rendered - but the image result does not include any strokes drawn with the Highlighter tool.

Can somebody explain why these strokes are omitted in this case? Is it possible somehow to render Highlighter strokes over a transparent background?

Answer 1

The Problem is the highlight strokes are transparent. When you clear the Transparent color. The highlight strokes will be detected not easily. For you requirement,you can set new attributes that with out the attributes.DrawAsHighlighter for InkPresenter.

private void SetHighLight()
{
  InkDrawingAttributes drawingAttributes = 
inkCanvas.InkPresenter.CopyDefaultDrawingAttributes();
  InkDrawingAttributes attributes = new InkDrawingAttributes();
  attributes.PenTip = PenTipShape.Rectangle;
  attributes.Size = new Size(4, 10);
  attributes.Color = drawingAttributes.Color;
  inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(attributes);
}

Add a new layer before calling DrawInk and gave it an opacity. And made inkCanvas with 0.5 opacity specially for the highlighter, looking like you're using a highlighter.

private void GetCanvasRender(out CanvasRenderTarget renderTarget, float opacity)
{
    CanvasDevice device = CanvasDevice.GetSharedDevice();
    renderTarget = new CanvasRenderTarget(device, (int)ink.ActualWidth, (int)ink.ActualHeight, 96);
    using (var ds = renderTarget.CreateDrawingSession())
    {
        ds.Clear(Colors.Transparent);
        using (ds.CreateLayer(opacity))
        {
            ds.DrawInk(ink.InkPresenter.StrokeContainer.GetStrokes());
        }
    }
}