【问题标题】:How to clip image to ellipse in XAML如何在 XAML 中将图像剪辑为椭圆
【发布时间】:2015-04-24 06:39:06
【问题描述】:

在这篇文章中:https://msdn.microsoft.com/en-us/library/windows/apps/jj206957%28v=vs.105%29.aspx 显示了一种将图像裁剪为椭圆的方法,但是当我将其复制到我的项目时,我收到一个错误,提示我不能使用椭圆几何,因为预期的类型是“RectangleGeometry”。我正在构建一个 Windows Phone 8 应用程序。

文章有问题还是我遗漏了什么?

我的 xaml 代码示例:

<Border BorderThickness="1" BorderBrush="AliceBlue">
        <Grid Margin="{StaticResource GridMargin}">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="1*"></ColumnDefinition>
                <ColumnDefinition Width="2*"></ColumnDefinition>
                <ColumnDefinition Width="1.5*"></ColumnDefinition>
            </Grid.ColumnDefinitions>
            <Image Grid.Column="0" Stretch="Uniform" Source="{Binding Photo}">
                <Image.Clip>
                    <EllipseGeometry RadiusX="100" RadiusY="100" Center="225,175"/>
                </Image.Clip>
            </Image>
            <Grid Grid.Column="1" Margin="{StaticResource SmallGridMargin}">
                <Grid.RowDefinitions>
                    <RowDefinition Height="1.5*"></RowDefinition>
                    <RowDefinition Height="2*"></RowDefinition>
                    <RowDefinition Height="1*"></RowDefinition>
                </Grid.RowDefinitions>
                <Viewbox Stretch="Uniform" Grid.Row="0">
                    <TextBlock Text="{Binding BookAuthor}"></TextBlock>
                </Viewbox>
                <Viewbox Stretch="Uniform" Grid.Row="1">
                    <TextBlock Text="{Binding BookTitle}"></TextBlock>
                </Viewbox>
                <Viewbox Stretch="Uniform" Grid.Row="2">
                    <TextBlock Text="{Binding Id}"></TextBlock>
                </Viewbox>
            </Grid>

【问题讨论】:

  • 这很奇怪,here 也解释说“Windows 运行时 API 中 UIElement.Clip 的剪裁几何必须是 RectangleGeometry。您不能指定非矩形几何,这是允许的一些 XAML 框架,例如 Microsoft Silverlight。”
  • 很遗憾,最近剪圈有点流行。 :(
  • 您可以使用Image.OpacityMask(如文章中所述)来获得相同的所需效果。只需使 GradientStop 彼此非常靠近(0.01 距离)。

标签: c# xaml windows-phone-8


【解决方案1】:

MSDN 说:

Windows 运行时 API 中 UIElement.Clip 的裁剪几何必须是 RectangleGeometry。您不能指定非矩形几何,这在 Microsoft Silverlight 等某些 XAML 框架中是允许的。

但是您可以使用 Ellipse 和 ImageBrush 元素作为填充画笔来获得相同的结果:

<Ellipse Width="100" Height="100">
    <Ellipse.Fill>
       <ImageBrush ImageSource="{Binding Photo}"/>
    </Ellipse.Fill>
</Ellipse>

【讨论】:

  • 我试过这个:&lt;Ellipse Grid.Column="0" Width="100" Height="100" &gt; &lt;Ellipse.Fill&gt; &lt;ImageBrush ImageSource="{Binding Photo}"/&gt; &lt;/Ellipse.Fill&gt; &lt;/Ellipse&gt; 但它不起作用(不剪裁图像)。
  • 那么结果是什么?图像不显示或显示未剪裁?你删除了之前的元素吗?!
  • 是的,我将图像替换为椭圆,图像显示但未裁剪。
  • 我用相同的代码截取了图像,尝试更改宽度、高度拉伸属性并让我知道它是否有效...或在干净的页面中测试它...
  • 好的,它可以工作 xD 这是我的图像,看起来与裁剪后的图像相同。请修正你的答案(双源)。谢谢! :)
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2010-10-28
  • 2012-06-20
  • 2018-11-09
  • 2014-05-01
  • 1970-01-01
相关资源
最近更新 更多