如何在 Xamarin.Forms 中椭圆地塑造图像？答案

【问题标题】：How to shape an image elliptically in Xamarin.Forms?如何在 Xamarin.Forms 中椭圆地塑造图像？
【发布时间】：2018-01-03 14:34:44
【问题描述】：

我试图弄清楚如何在 Xamarin.Forms 中以椭圆形塑造图像。我一直在看ImageCirclePlugin。但是，它不能用于此目的。我还尝试使用 Ellipse 和 ImageBrush 元素作为填充画笔。那没用：

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

找不到 Ellipse 和 ImageBrush。

【问题讨论】：

您最好的办法是查看插件的源代码并对其进行修改以满足您的需求。您无法在 Forms 中进行本机操作 - 必须在平台级别完成

标签： xaml xamarin.forms

【解决方案1】：

使用FFImageLoading 并添加您需要的转换效果。除了图像效果，它本质上可以帮助您有效地管理图像。不要忘记添加 FFImageLoading.Transformations 包。

【讨论】：

已尝试为 BottomLeftCornerSize BottomRightCornerSize TopLeftCornerSize TopRightCornerSize 使用不同的值。但是，无法获得椭圆的形状
正确设置了CropWidthRatio / CropHeightRatio 属性的CornersTransformation

【解决方案2】：

现在在 Xamarin Forms 5 中有一种方法可以做到这一点。这当然也适用于新的 MAUI 框架。

只需将Image.Clip 添加到图像中，如下所示：

<Image Source="default_user.png"
       WidthRequest="80"
       HeightRequest="80">
       <Image.Clip>
           <EllipseGeometry                                
                    Center="40,40"
                    RadiusX="40"
                    RadiusY="40"/>
       </Image.Clip>
</Image>

对于居中，请选择您希望剪辑居中的位置。

通常，如果您想将其居中，只需在 x 和 y 坐标中选择图像大小的一半即可。所以如果设置WidthRequest="80" 和HeightRequest="80" 我会选择Center="40,40"。 RadiusX 和 RadiusY 将其设置为您想要的剪辑半径。

【讨论】：