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

  • Question

  • Hello,
    It's the first time I use Technet so I'm not sure my thread is in the correct forum.

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

    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 ?


    Wednesday, April 13, 2016 7:45 AM

Answers

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


    Monday, May 30, 2016 3:20 PM