Creating Scratch card effect on Windows Phone c# xaml

Question

I would like to create a scratch card effect on the Windows Phone. However my current solution seem sluggish and the scratch effect look weird(refer to the screenshot below). The experience is very poor as compared to those that i had seen on iOS.

enter image description here

Would appreciate if someone could guide me toward it. Below are my current code.

        <Grid Width="Auto" Height="Auto" Background="Black">
        <Viewbox Margin="0" HorizontalAlignment="Center" VerticalAlignment="Center">
            <Grid Height="60" Width="60" Background="White">
                <InkPresenter x:Name="inkP" Width="60" Height="60">
                    <InkPresenter.Background>
                        <ImageBrush Stretch="Fill" ImageSource="/Assets/image.png"/>
                    </InkPresenter.Background>
                    <Grid Height="60" Width="60">
                        <TextBlock x:Name="lblsecretText" HorizontalAlignment="Center" TextWrapping="Wrap" Text="LOL" VerticalAlignment="Center" Width="60" Foreground="Black" TextAlignment="Center" FontSize="5.333"/>
                    </Grid>
                </InkPresenter>
            </Grid>
        </Viewbox>
    </Grid>


        Stroke s;
    int mycol = 0;
    public MainPage()
    {
        InitializeComponent();
        inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
        for (int i = 0; i < 60; i++)
        {
            for (int l = 0; l < 60; l++)
            {
                Stroke bigStroke = new Stroke();
                bigStroke.StylusPoints.Add(new StylusPoint(i, l));
                inkP.Strokes.Add(bigStroke);
            }
        }
    }

StylusPoint _lastPoint;

    void inkP_MouseMove(object sender, MouseEventArgs e)
    {
        StylusPointCollection pointErasePoints = e.StylusDevice.GetStylusPoints(inkP);
        pointErasePoints.Insert(0, new StylusPoint(e.GetPosition(inkP).X, e.GetPosition(inkP).Y));
        //Compare collected stylus points with the ink presenter strokes and store the intersecting strokes.
        StrokeCollection hitStrokes = inkP.Strokes.HitTest(pointErasePoints);
        if (hitStrokes.Count > 0)
        {
            foreach (Stroke hitStroke in hitStrokes)
            {
                inkP.Strokes.Remove(hitStroke);
            }
        }
        _lastPoint = pointErasePoints[pointErasePoints.Count - 1];
    }

Have you debugged/profiled your code to determine where your code is spending most of its time? — Sven Grosen, Dec 30 '13 at 14:02
I'm trying to do a similar thing. Did you find any solution? — Haider, Feb 01 '14 at 17:27

score 0 · Answer 1 · answered Jan 27 '17 at 15:23

Your strokes are beeing removed point by point.

You can adjust this by changing your MainPage constructor to:

public MainPage()
{
    InitializeComponent();
    inkP.MouseMove += new MouseEventHandler(inkP_MouseMove);
    for (int i = 0; i < 60; i++)
    {
        Stroke bigStroke = new Stroke();
        for (int l = 0; l < 60; l++)
        {
            bigStroke.StylusPoints.Add(new StylusPoint(i, l));               
        }
        inkP.Strokes.Add(bigStroke);
    }
}

This will add the strokes line by line. When you remove them, they will be removed line by line.

Creating Scratch card effect on Windows Phone c# xaml

1 Answers1