显示一张用纯色覆盖的图片答案

【问题标题】：Reveal a picture covered with a solid color显示一张用纯色覆盖的图片
【发布时间】：2013-01-17 04:41:11
【问题描述】：

我正在尝试构建一个应用程序，该应用程序显示最初用纯色（黑色）覆盖的图片。这个想法是，当我（最初）点击那个黑色屏幕上的某个地方时，我点击的黑色像素周围的圆形区域变成透明的，这样我就可以看到后面的图像了。

我想出的解决方案是使用带有我想要覆盖的图片作为背景的画布。黑色封面将以像素为单位划分（可能存储在矩阵中 - 图像最大为 500x500）。所有这些像素最初都会被涂成黑色，然后，知道用户单击的像素会透明（或删除）该像素周围的所有像素，直到我清除具有预设直径的圆形区域。

我对画布没有太多经验，这个解决方案对我来说似乎很粗糙。我想问第二个意见，或者是否有人可以给我一个更好的解决方案

如果相关，我正在 Silverlight 中开发应用程序。

谢谢！

【问题讨论】：

是的！我想说的是，您在 Silverlight 中进行开发非常相关。 XAML 具有一些非常强大的图像处理功能。您可以使用不透明蒙版来指定要显示的图片部分。此外，silverlight 可以使用您的 GPU，您需要明确指定。
只需制作一个非常大的png，中心有一个镂空圆圈。将此 png 覆盖在其他图像上，但确保将切口放置在视口之外。然后在点击时，将 png cutout circle 移动到用户点击的位置。您所要做的就是计算切口到点击位置的位置......或者如果您有兴趣显示图像的更多部分，请使用flup的建议：msdn.microsoft.com/en-us/library/ms743320.aspx
我发现了一个例子：silverscratch.blogspot.nl/2010/03/… 特别是刻录代码，我想。您希望进行与刻录相反的操作，并让用户来控制它，而不是计算。
感谢大家的回复。 @DeviantSeev 我忘了提到用户可以在图像上多次单击以显示许多区域（可能相交）。 Flup：我会研究不透明蒙版，看看我能用它们做什么。非常感谢！
我对这个例子的热情有点低了。查看代码和动画都是在 .xaml 文件中预定义的。所以不太确定以编程方式更改不透明蒙版的难易程度。

标签： silverlight canvas drawing

【解决方案1】：

我花了一段时间阅读有关 silverlight 控件的信息后，最终使用了 Image.Clip。这是一个例子，以防像我这样的人需要它：

  <Image Source="Images/img.jpg" Width="150" Height="150" Canvas.Left="30" Canvas.Top="19">                                                
            <Image.Clip>
                <GeometryGroup FillRule="Nonzero">
                    <EllipseGeometry RadiusX="20" RadiusY="20" Center="100,100"></EllipseGeometry>
                    <EllipseGeometry RadiusX="20" RadiusY="20" Center="80,100"></EllipseGeometry>
                    <EllipseGeometry RadiusX="20" RadiusY="20" Center="80,83"></EllipseGeometry>                        
                    <EllipseGeometry RadiusX="20" RadiusY="20" Center="60,60"></EllipseGeometry>
                </GeometryGroup>
            </Image.Clip>
        </Image>

当然，省略号可以以编程方式放置。

【讨论】：