不透明蒙版的动态绘制答案

【问题标题】：Dynamic drawing of opacity mask不透明蒙版的动态绘制
【发布时间】：2011-02-27 11:49:00
【问题描述】：

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

【问题讨论】：

你应该用更具描述性的东西来编辑你的标题。
您能否更具体地谈谈“我真的需要帮助”。我们通常希望您提出具体问题。我们通常不会为您编写代码（尽管如果问题描述得足够好并且足够有趣，有时确实会发生）。编辑您的问题，使其实际上包含一个问题？顺便说一句，您是对的，您将需要使用 MouseMove 事件。因此，如果您的问题是“我需要 mousemove 事件吗？”答案是“是”。我怀疑你有一个更复杂的问题。

标签： silverlight canvas background mousemove

【解决方案1】：

您可能想尝试以下路径：

将Canvas 添加到您的页面，与您的两张图片大小相同
创建一个椭圆形状的剪切路径 (<Ellipse ...>) 并将其放置在图像之外的画布中
首先将“模糊图像”放在画布上（如下），然后是“清晰图像”，填充整个画布。
让椭圆成为“清晰图像”的剪贴蒙版（使用Image.Clip 或YourUIElement.Clip（参考MSDN）
用鼠标光标移动椭圆。代码可能如下所示（注意：我没有测试代码）：

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 等上添加动画。

【讨论】：

Clip 属性接受Geometry，因此您必须使用ElipseGeometry 而不是Elipse，并且您必须移动Center 点。此外，要获得“彩票刮擦效果”，您必须使用几何组并为每个鼠标位置创建一个新的椭圆并将其添加到组中。使用非零填充规则。