如何在Xamarin.Forms中将图片裁剪为椭圆形？

我来帮你解决Xamarin.Forms里椭圆形裁剪图片的问题～你之前遇到的Ellipse和ImageBrush找不到的情况很正常，因为这俩是WPF/UWP的专属控件，Xamarin.Forms里并没有内置，得换用原生支持的方案，给你几个靠谱的实现思路：

方案一：利用Xamarin.Forms原生的Clip属性（最简单） #

Xamarin.Forms的所有View都有Clip属性，可以通过EllipseGeometry来给Image添加椭圆形裁剪效果，不需要额外插件或自定义渲染器。

XAML代码示例： #

<!-- 圆形裁剪（宽高相等） -->
<Image Source="{Binding Photo}" 
       WidthRequest="100" 
       HeightRequest="100">
    <Image.Clip>
        <!-- Center是椭圆中心坐标，RadiusX/Y是横向/纵向半径 -->
        <EllipseGeometry Center="50,50" RadiusX="50" RadiusY="50"/>
    </Image.Clip>
</Image>

<!-- 椭圆形裁剪（宽高不等） -->
<Image Source="{Binding Photo}" 
       WidthRequest="120" 
       HeightRequest="80">
    <Image.Clip>
        <EllipseGeometry Center="60,40" RadiusX="60" RadiusY="40"/>
    </Image.Clip>
</Image>

注意：Center的坐标要对应Image的宽高中点，RadiusX/Y分别对应宽和高的一半，这样就能完美适配图片的椭圆形裁剪。

方案二：自定义渲染器（平台原生实现，性能最优） #

如果需要更细腻的控制或更好的性能，可以针对iOS和Android分别写自定义渲染器，利用平台原生API实现椭圆形裁剪。

第一步：创建自定义Image控件 #

namespace YourAppNamespace
{
    public class CustomEllipseImage : Image
    {
        // 可以添加自定义属性，比如是否强制椭圆等
    }
}

第二步：iOS平台渲染器 #

[assembly: ExportRenderer(typeof(CustomEllipseImage), typeof(CustomEllipseImageRenderer))]
namespace YourAppNamespace.iOS
{
    public class CustomEllipseImageRenderer : ImageRenderer
    {
        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);
            if (Control != null)
            {
                // 取宽高中的较小值的一半作为圆角半径，自动适配椭圆
                Control.Layer.CornerRadius = Math.Min(Control.Frame.Width, Control.Frame.Height) / 2;
                Control.Layer.MasksToBounds = true;
                // 如果需要严格的椭圆（宽高不同），不需要额外设置，iOS会自动根据控件宽高生成椭圆
            }
        }
    }
}

第三步：Android平台渲染器 #

[assembly: ExportRenderer(typeof(CustomEllipseImage), typeof(CustomEllipseImageRenderer))]
namespace YourAppNamespace.Droid
{
    public class CustomEllipseImageRenderer : ImageRenderer
    {
        public CustomEllipseImageRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<Image> e)
        {
            base.OnElementChanged(e);
            if (Control != null && e.NewElement != null)
            {
                var imageView = Control as ImageView;
                imageView.SetClipToOutline(true);
                // 设置椭圆轮廓裁剪
                imageView.OutlineProvider = new EllipseOutlineProvider();
            }
        }

        private class EllipseOutlineProvider : ViewOutlineProvider
        {
            public override void GetOutline(View view, Outline outline)
            {
                // 基于控件大小创建椭圆轮廓
                outline.SetOval(0, 0, view.Width, view.Height);
            }
        }
    }
}

使用自定义控件 #

<local:CustomEllipseImage Source="{Binding Photo}" WidthRequest="100" HeightRequest="80"/>

方案三：SkiaSharp绘制（灵活度最高） #

如果需要更复杂的图形组合（比如椭圆裁剪后再加其他绘制效果），可以用SkiaSharp库来实现，它是Xamarin.Forms官方推荐的2D图形绘制库。

第一步：安装SkiaSharp NuGet包 #

安装SkiaSharp.Views.Forms到你的Xamarin.Forms项目中。

第二步：XAML中添加SKCanvasView #

<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             xmlns:skia="clr-namespace:SkiaSharp.Views.Forms;assembly=SkiaSharp.Views.Forms"
             x:Class="YourAppNamespace.EllipseImagePage">
    <skia:SKCanvasView x:Name="EllipseCanvas" 
                       WidthRequest="100" 
                       HeightRequest="80"
                       PaintSurface="OnCanvasPaintSurface"/>
</ContentPage>

第三步：后台代码处理绘制逻辑 #

private async void OnCanvasPaintSurface(object sender, SKPaintSurfaceEventArgs e)
{
    var canvas = e.Surface.Canvas;
    canvas.Clear(); // 清空画布

    var viewModel = BindingContext as YourViewModel;
    if (viewModel?.Photo == null) return;

    // 将ImageSource转换为SKBitmap
    SKBitmap bitmap = null;
    if (viewModel.Photo is FileImageSource fileSource)
    {
        bitmap = SKBitmap.Decode(fileSource.File);
    }
    else if (viewModel.Photo is UriImageSource uriSource)
    {
        using (var client = new HttpClient())
        {
            var stream = await client.GetStreamAsync(uriSource.Uri);
            bitmap = SKBitmap.Decode(stream);
        }
    }
    // 可以根据需要添加其他ImageSource类型的处理（比如ResourceImageSource）

    if (bitmap != null)
    {
        // 创建椭圆形裁剪路径
        var clipPath = new SKPath();
        clipPath.AddOval(new SKRect(0, 0, e.Info.Width, e.Info.Height));
        
        // 应用裁剪路径
        canvas.ClipPath(clipPath);
        
        // 绘制图片并适配画布大小
        canvas.DrawBitmap(bitmap, new SKRect(0, 0, e.Info.Width, e.Info.Height));
    }
}

这三个方案各有优劣：方案一最简单快速，适合大多数场景；方案二性能最好，适合对性能要求高的场景；方案三灵活度最高，适合需要复杂绘制的场景，你可以根据自己的需求选择～

内容的提问来源于stack exchange，提问作者Mr.H123