wpf clip 使用

下面灰色图,上面显示彩色图,彩色图上使用 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;
    }
上一篇
下一篇