裁剪圆角边框的内容，图像超出边框答案

【问题标题】：Crop content of rounded-corner border with image out of border裁剪圆角边框的内容，图像超出边框
【发布时间】：2021-05-07 09:21:48
【问题描述】：

我需要在圆角边框之外移动和旋转图像

示例：

在How to make the contents of a round-cornered border be also round-cornered?找到答案：

<Grid>
    <Grid.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=Border1}" />
    </Grid.OpacityMask>
    <Border x:Name="Border1" CornerRadius="30" Background="Green" />
    <TextBlock Text="asdas das d asd a sd a sda" />
</Grid>

如果元素没有超出范围，则此方法有效。

如果像这样使用旋转和/或边距：

<Grid>
    <Grid.OpacityMask>
        <VisualBrush Visual="{Binding ElementName=_border1}" />
    </Grid.OpacityMask>
    <Border x:Name="_border1"
            BorderThickness="0"
            CornerRadius="30"
            Background="Green" />
    <TextBlock Text="SomeText"
               Foreground="Yellow" />
    <Image Source="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
           Margin="-5 0 0 0"
           Height="20"
           Width="55"
           Stretch="UniformToFill"
           VerticalAlignment="Top"
           HorizontalAlignment="Left"
           RenderTransformOrigin="0.5 0.5">
        <Image.RenderTransform>
            <RotateTransform Angle="-7" />
        </Image.RenderTransform>
    </Image>
</Grid>

舍入位移

如何像第一个示例那样裁剪图像？感谢您的帮助。

【问题讨论】：

标签： c# wpf xaml .net-4.5

【解决方案1】：

VisualBrush 的视口计算出现问题。不确定这是否是 WPF 中的错误。

一种解决方法是将视口设置为绝对单位，使用矩形而不是边框：

<Grid.OpacityMask>
    <VisualBrush
        Visual="{Binding ElementName=rect}"
        ViewportUnits="Absolute"
        Viewport="{Binding ElementName=rect, Path=RenderedGeometry.Rect}"/>
</Grid.OpacityMask>
<Rectangle x:Name="rect" RadiusX="30" RadiusY="30" Fill="Green"/>

或者更简单，设置Clip 属性而不是OpacityMask，但仍然支持调整大小：

<Grid Clip="{Binding ElementName=rect, Path=RenderedGeometry}">
    <Rectangle RadiusX="30" RadiusY="30" Fill="Green" x:Name="rect"/>
    ...
</Grid>

【讨论】：

【解决方案2】：

我设法使用Clip 而不是OpacityMask 实现了预期的结果。那么所有需要裁剪的元素都必须是Border 的子元素。如果您的Border 需要是动态的，则需要使用Converter 将RectangleGeometry 的尺寸绑定到Border 的尺寸。

<Grid>
    <Border BorderThickness="0"
            CornerRadius="30"
            Background="Green">
        <Border.Clip>
            <RectangleGeometry RadiusX="30" RadiusY="30" Rect="0,0,500,400"/>
        </Border.Clip>
        <Grid>
            <TextBlock Text="SomeText"
                       Foreground="Yellow"/>
            <Image Source="https://ssl.gstatic.com/ui/v1/icons/mail/rfr/logo_gmail_lockup_default_1x_r2.png"
                   Margin="-5 0 0 0"
                   Height="20"
                   Width="55"
                   Stretch="UniformToFill"
                   VerticalAlignment="Top"
                   HorizontalAlignment="Left"
                   RenderTransformOrigin="0.5 0.5">
                <Image.RenderTransform>
                    <RotateTransform Angle="-7"/>
                </Image.RenderTransform>
            </Image>
        </Grid>
    </Border>
</Grid>

【讨论】：