How can I erase specyfic pixels of image in windows phone by finger touching the screen

Question

I'm new to Windows Phone programming, I'm having problems, and I've been looking over the internet for the past two days and found nothing.

I'm writing and app where I've got two images one over the other, and I need to "erase" the top one by finger, a bit like using a rubber, so I can see the picture underneath. I've done drawing in general but it's not what I need right now. I found an example of something similar but it doesn't work on the phone probably because of library differences. Can anyone please help me find something that I can use? Or maybe show anything?

I found something like this, and it would be awesome if I could do something like this in windows phone 8

Note, I'm using Microsoft Visual Studio Express 2012

score 0 · Accepted Answer · answered Nov 04 '14 at 13:18

After few days of work, i managed to get the erasable layer.

 //Created by Kamil Sokołowski on 01.11.14
//Windows Phone 7.1 Build on Microsoft Visual Studio Express 2012 for Windows Phone


public partial class MainPage : PhoneApplicationPage
    {
        public BitmapImage mainImage;
        private WriteableBitmap writeableBitmap;
        private bool isRubbing;
        private SolidColorBrush brush;
        private Point currentPoint;
        private Point oldPoint;
        private bool touchedFirst;
        // Constructor
        public MainPage()
        {
            InitializeComponent();

            Canvas mainCanwas = new Canvas();
            drawBackgroundLayer(new Uri("main.png", UriKind.RelativeOrAbsolute));
            drawImageLayer(new Uri("para.png", UriKind.RelativeOrAbsolute));
            touchedFirst = true;
        }

        public void drawBackgroundLayer(Uri uri)
        {
            BitmapImage bgi = new BitmapImage();
            bgi.UriSource = uri;
            BackGroundImage.Source = bgi;
        }

        public void drawImageLayer(Uri uri)
        {
            mainImage = new BitmapImage();
            mainImage.UriSource = uri;
            MyImage.Source = mainImage;
        }

        private void Tap_leftButtonDown(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (touchedFirst)
            {

                WriteableBitmap wb = new WriteableBitmap(mainImage);

                Color color = new Color();
                color.A = 0;
                color.R = 33;
                color.G = 34;
                color.B = 255;
                brush = new SolidColorBrush();
                brush.Color = color;
                touchedFirst = false;
                writeableBitmap = wb;
            }
            isRubbing = true;
            oldPoint = currentPoint;
            currentPoint = e.GetPosition(MyImage);
        }

        private void Mouse_MouseMove(object sender, System.Windows.Input.MouseEventArgs e)
        {
            if (isRubbing)
            {
                oldPoint = currentPoint;
                currentPoint = e.GetPosition(MyImage);
                for (int i = 0; i < 40; i++)
                {
                    for (int a = 0; a < 40; a++)
                    {
                        writeableBitmap.DrawLine((int)currentPoint.X + i, (int)currentPoint.Y + a, (int)oldPoint.X + i, (int)oldPoint.Y + a, brush.Color);
                    }
                }
                MyImage.Source = writeableBitmap;
            }
        }

        private void ButtonLetGo(object sender, MouseButtonEventArgs e)
        {
            isRubbing = false;
            MyImage.Source = writeableBitmap;
        }
    }
}

// To get this to work You need to download the WiritableBitmapEx form NuGet

How can I erase specyfic pixels of image in windows phone by finger touching the screen

1 Answers1