Eraser functionality for an image in UWP(Universal Windows Platform)

user_19605472 0
Viewed 40

I want to implement a functionality where user can erase an image upon mouse/cursor movement. When user moves the cursor over the image those portions of the image should be erased. Any reference where same functionality is implemented? Sample soln is highly appreciated

uwp image-processing c#
1 Answers

I want to implement a functionality where user can erase an image upon mouse/cursor movement.

This could be easy approach with UWP InkCanvas control, you could place image control under the InkCanvas, and set InkCanvas default DrawingAttributes as white color.

xaml

<Grid x:Name="RootGrid">
    <Image x:Name="ImageRender" Source="Assets/Butterfly.png" />
    <InkCanvas x:Name="inkCanvas" Loaded="inkCanvas_Loaded" />
</Grid>

Code Behind

public sealed partial class MainPage : Page
{
    public MainPage()
    {
        this.InitializeComponent();
        inkCanvas.InkPresenter.InputDeviceTypes =
        Windows.UI.Core.CoreInputDeviceTypes.Mouse |
        Windows.UI.Core.CoreInputDeviceTypes.Pen;
    }

    private void inkCanvas_Loaded(object sender, RoutedEventArgs e)
    {
        InkDrawingAttributes attributes = new InkDrawingAttributes();
        attributes.PenTip = PenTipShape.Rectangle;
        attributes.Size = new Size(10, 10);
        attributes.Color = Colors.White;
        inkCanvas.InkPresenter.UpdateDefaultDrawingAttributes(attributes);         
    }
}

And if you want to save the edited image, please call RenderTargetBitmap RenderAsync method to render current root grid as an image. For more detail please refer to this case reply.

user_72547810
Related