在Windows Phone c＃xaml上创建Scratch卡效果

Question

我想在Windows Phone上创建一个刮刮卡效果。然而，我目前的解决方案似乎缓慢，划痕效果看起来很奇怪（请参阅下面的屏幕截图）。与我在iOS上看到的相比，体验非常糟糕。

如果有人可以引导我走向它，我将不胜感激。以下是我目前的代码。

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

Answer 1

你的笔画逐渐消失。

您可以通过将MainPage构造函数更改为：

来进行调整

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

这将逐行添加笔画。 当您删除它们时，它们将逐行删除。