win2D uwp won't save a highlight stroke in an inkcanvas

Question

I'm desperately trying to save a highlight stroke as a png. I'm using win2d for UWP to make this work. It works well for strokes with 100% opacity, but when I set DrawAsHighlighter = true;, the saved png is empty, fully transparent.

Here's my code :

    private void SetHighLight()
    {
        InkDrawingAttributes attributes = new InkDrawingAttributes();
        attributes.DrawAsHighlighter = true;
        attributes.PenTip = PenTipShape.Rectangle;
        attributes.Size = new Size(4, 10);
        attributes.Color = currentColor;
        SetAttribute(attributes);
    }

    private void GetCanvasRender(out CanvasRenderTarget renderTarget)
    {
        CanvasDevice device = CanvasDevice.GetSharedDevice();
        renderTarget = new CanvasRenderTarget(device, (int)ink.ActualWidth, (int)ink.ActualHeight, 96);
        using (var ds = renderTarget.CreateDrawingSession())
        {
            ds.Clear(Colors.Transparent); //I already tried to delete this but it doesn't change anything
            ds.DrawInk(ink.InkPresenter.StrokeContainer.GetStrokes());
        }
    }

    private async void SavePicture()
    {
        CanvasRenderTarget renderTarget;
        Image img = new Image();

        GetCanvasRender(out renderTarget);
        StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
        StorageFile noteFile = await storageFolder.CreateFileAsync(i.ToString() + ".png", CreationCollisionOption.ReplaceExisting);
        using (var fileStream = await noteFile.OpenAsync(FileAccessMode.ReadWrite))
            await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f);
        img.Source = new BitmapImage(new Uri(storageFolder.Path + "/" + i++ + ".png"));
        img.VerticalAlignment = VerticalAlignment.Stretch;
        ContainerCanvas.Children.Add(img);
        Canvas.SetTop(img, ScrollViewerContainer.VerticalOffset);
        Canvas.SetZIndex(img, 5);
    }

I've read it might be because of the highlight not being present in the visual tree but I'm really not sure about it.

By the way when I try to change the opacity of a color(attributes.Color = Color.FromArgb(128, 255, 0, 0)), the inkcanvas doesn't apply the alpha, why ? Am I missing something ?

score 2 · Answer 1 · answered Apr 08 '16 at 20:43

You can't save DrawAsHighlighter ink to a bitmap format like .png - that's just fundamentally not a meaningful operation to be attempting.

Regular non-highlighter ink is drawn using standard alpha blending, so it is reasonable to write just these ink shapes into a bitmap format. You can later blend that bitmap over some other background image, and get the same result as if the ink had been drawn directly over that background.

For highlighter ink, however, the "blend over background" is a more complex operation, not just standard sourceover blending. So there is no such thing as a bitmap image that contains just this ink - you also have to provide a background in order for the appropriate blend to be carried out.

You have three options here:

Don't use highligher ink mode.
Instead of saving out your ink as a bitmap image, save the original ink stroke data, and use inking APIs to later blend these strokes directly to their final location.
Include the background as well as the ink strokes in the same bitmap.

SebastianR · Answer 2 · 2016-05-23T13:44:25.580

0

Try clearing the background of the canvas with:

ds.Clear(Colors.White);

The highlighter isn't visible on transparent backgrounds as it seems to multiply its value with the background color.

edited May 23 '16 at 13:44

answered Apr 04 '16 at 08:25

SebastianR

1,683
2
17
33

Hello, Thanks for your answer, but I need the background to be transparent. Plus, with white background, you can't see the opacity anymore :'( – Kinemu Apr 04 '16 at 09:21
Maybe you can receive the non transparent image, then you remove each pixel that are completely white, and then you replace every non-transparent pixel of the canvas with the color you want (non opaque color) – Dean Apr 04 '16 at 13:32
@Dean The problem with this could be that due to line smoothing you get white artifacts around a stroke when a picture like this is rendered on a non-white background. Kinemu, I don't think you can use the highlighter then. You probably have to create a custom brush for normal drawing or manage the drawing of the corresponding ink with Win2D yourself. – SebastianR Apr 04 '16 at 15:19

score 0 · Accepted Answer · answered May 30 '16 at 15:16

I finally figured out how to make it work. I simply added a new layer before calling DrawInk and gave it an opacity, and got rid of the attributes.DrawAsHighlighter = true;. Instead, I've made 1 inkCanvas with 0.5 opacity specially for the highlighter, looking like you're using a highlighter.

Here's the code :

private void SetHighLight()
{
    InkDrawingAttributes attributes = new InkDrawingAttributes();
    attributes.PenTip = PenTipShape.Rectangle;
    attributes.Size = new Size(4, 10);
    attributes.Color = currentColor;
    SetAttribute(attributes);
}

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());
        }
    }
}

private async void SavePicture(float opacity)
{
    CanvasRenderTarget renderTarget;
    Image img = new Image();

    GetCanvasRender(out renderTarget, opacity);
    StorageFolder storageFolder = ApplicationData.Current.LocalFolder;
    StorageFile noteFile = await storageFolder.CreateFileAsync(i.ToString() + ".png", CreationCollisionOption.ReplaceExisting);
    using (var fileStream = await noteFile.OpenAsync(FileAccessMode.ReadWrite))
        await renderTarget.SaveAsync(fileStream, CanvasBitmapFileFormat.Png, 1f);
    img.Source = new BitmapImage(new Uri(storageFolder.Path + "/" + i++ + ".png"));
    img.VerticalAlignment = VerticalAlignment.Stretch;
    ContainerCanvas.Children.Add(img);
    Canvas.SetTop(img, ScrollViewerContainer.VerticalOffset);
    Canvas.SetZIndex(img, 5);
}

win2D uwp won't save a highlight stroke in an inkcanvas

3 Answers3