下面灰色图,上面显示彩色图,彩色图上使用 Clip 切出一个圆
XAML
<Border
Grid.Column="0"
Width="300" Height="300"
Padding="0" HorizontalAlignment="Center" VerticalAlignment="Center"
BorderBrush="DeepSkyBlue" BorderThickness=".5" MouseMove="UIElement_OnMouseMove">
<Grid>
<!-- 这里生成一个灰度背景图 -->
<Grid>
<Image
Margin="0"
Source="/Resource/Images/BearAndFox2.jpg" Stretch="Fill" />
<!-- 计算灰度 -->
<Rectangle>
<Rectangle.Fill>
<SolidColorBrush Opacity="0.7" Color="#000000" />
</Rectangle.Fill>
<Rectangle.OpacityMask>
<ImageBrush ImageSource="/Resource/Images/BearAndFox2.jpg" />
</Rectangle.OpacityMask>
</Rectangle>
</Grid>
<!-- 这里使用清晰图像,然后设置 clip 框露出 -->
<!-- 动态显示可以调整 TranslateTransform x, y -->
<!-- 也可以使用 EllipseGeometry Center -->
<Image
Margin="0"
Source="/Resource/Images/BearAndFox2.jpg" Stretch="Fill">
<Image.Clip>
<!-- 这里切一个圆形 clip -->
<EllipseGeometry
x:Name="ClipEllipseGeometry"
RadiusX="50" RadiusY="50">
<EllipseGeometry.Transform>
<TranslateTransform x:Name="ClipTransform" X="150" Y="150" />
</EllipseGeometry.Transform>
</EllipseGeometry>
</Image.Clip>
</Image>
</Grid>
</Border>
代码
private void UIElement_OnMouseMove(object sender, MouseEventArgs e)
{
if (sender is not Border border)
{
return;
}
var geometry = this.ClipEllipseGeometry;
var position = e.GetPosition(border);
this.ClipTransform.X = position.X;
this.ClipTransform.Y = position.Y;
}