动态绘制不透明蒙版

Question

我有两张背景图片，一张是模糊的，另一幅是相同的图片，但更加丰富多彩。 默认背景图像是模糊的。 当我移动光标时，我想将背景图像从模糊变为彩色， 但只在光标周围的圆圈， 当我向前移动光标时，改变的背景会保持光标周围的圆圈更早的位置。 （就像用硬币刮开彩票一样） 我想我必须处理MouseMove事件，并使用MouseEventArgs游标位置， 但我无法通过，我真的需要帮助！ 提前谢谢！

Answer 1

您可能想尝试遵循以下路径：

1. 在您的页面中添加Canvas，其大小与两张图片相同

2. 创建椭圆形状的剪切路径（<Ellipse ...>）并将其放置在图像外部，在画布中

3. 首先（下方）将“模糊图像”放在画布上，然后将“清晰图像”放在整个画布上。

4. 让椭圆成为“清晰图像”的剪贴蒙版（使用Image.Clip或YourUIElement.Clip（参考MSDN）

5. 使用鼠标光标移动椭圆。代码可能如下所示（注意：我没有测试代码）：

-

imageCanvas.MouseMove += imageCanvas_MouseMove;

private void imageCanvas_MouseMove(object sender, MouseEventArgs e)
{
    Point mousePosition = e.GetPosition();
    Canvas.SetTop(myEllipse, mousePosition.Y - myEllipse.ActualHeight / 2);
    Canvas.SetLeft(myEllipse, mousePosition.X - myEllipse.ActualWidth / 2);
}

如果可行，您可以在MouseEnter / MouseLeave等处添加动画，增加视觉设计。