Xamarin.forms 圆角图像

我试图得到一个带有圆形鸡眼的矩形图像。我尝试过使用nugget和frame。到目前为止，我没有得到我想要的结果。使用金块将图像变成正方形，无论我给它多大尺寸。出于某种原因使用框架实际上并不会使拐角处变圆

---

不久前，我需要在其他控件上使用拐角效果。它也适用于图像。 您只需创建效果：

 public class RoundCornersEffect : RoutingEffect
     {
          public RoundCornersEffect() : base($"MySuperApp.{nameof(RoundCornersEffect)}")
          {
          }

          public static readonly BindableProperty CornerRadiusProperty =
              BindableProperty.CreateAttached(
                  "CornerRadius",
                  typeof(int),
                  typeof(RoundCornersEffect),
                  0,
                  propertyChanged: OnCornerRadiusChanged);

          public static int GetCornerRadius(BindableObject view) =>
              (int)view.GetValue(CornerRadiusProperty);

          public static void SetCornerRadius(BindableObject view, int value) =>
              view.SetValue(CornerRadiusProperty, value);

          private static void OnCornerRadiusChanged(BindableObject bindable, object oldValue, object newValue)
          {
               if (!(bindable is View view))
                    return;

               var cornerRadius = (int)newValue;
               var effect = view.Effects.OfType<RoundCornersEffect>().FirstOrDefault();

               if (cornerRadius > 0 && effect == null)
                    view.Effects.Add(new RoundCornersEffect());

               if (cornerRadius == 0 && effect != null)
                    view.Effects.Remove(effect);
          }
     }

机器人：

public class RoundCornersEffectDroid : PlatformEffect
     {
          private Android.Views.View View => Control ?? Container;

          protected override void OnAttached()
          {
               try
               {
                    PrepareContainer();
                    SetCornerRadius();
               }
               catch (Exception e)
               {
                    Debug.WriteLine(e);
               }
          }

          protected override void OnDetached()
          {
               try
               {
                    View.OutlineProvider = ViewOutlineProvider.Background;
               }
               catch (Exception e)
               {
                    Debug.WriteLine(e);
               }
          }

          protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
          {
               if (args.PropertyName == RoundCornersEffect.CornerRadiusProperty.PropertyName)
                    SetCornerRadius();
          }

          private void PrepareContainer()
          {
               View.ClipToOutline = true;
          }

          private void SetCornerRadius()
          {
               var cornerRadius = RoundCornersEffect.GetCornerRadius(Element) * GetDensity();
               View.OutlineProvider = new RoundedOutlineProvider(cornerRadius);
          }

          private static double GetDensity() =>
              DeviceDisplay.MainDisplayInfo.Density;

          private class RoundedOutlineProvider : ViewOutlineProvider
          {
               private readonly double _radius;

               public RoundedOutlineProvider(double radius)
               {
                    _radius = radius;
               }

               public override void GetOutline(Android.Views.View view, Outline outline)
               {
                    outline?.SetRoundRect(0, 0, view.Width, view.Height, (float)_radius);
               }
          }
     }

然后您可以在控制中使用它：

<Image Source="mylogo.png" VerticalOptions="Center" Aspect="AspectFit" myeffects:RoundCornersEffect.CornerRadius="5"/>

public class RoundCornersEffectDroid : PlatformEffect
     {
          private Android.Views.View View => Control ?? Container;

          protected override void OnAttached()
          {
               try
               {
                    PrepareContainer();
                    SetCornerRadius();
               }
               catch (Exception e)
               {
                    Debug.WriteLine(e);
               }
          }

          protected override void OnDetached()
          {
               try
               {
                    View.OutlineProvider = ViewOutlineProvider.Background;
               }
               catch (Exception e)
               {
                    Debug.WriteLine(e);
               }
          }

          protected override void OnElementPropertyChanged(PropertyChangedEventArgs args)
          {
               if (args.PropertyName == RoundCornersEffect.CornerRadiusProperty.PropertyName)
                    SetCornerRadius();
          }

          private void PrepareContainer()
          {
               View.ClipToOutline = true;
          }

          private void SetCornerRadius()
          {
               var cornerRadius = RoundCornersEffect.GetCornerRadius(Element) * GetDensity();
               View.OutlineProvider = new RoundedOutlineProvider(cornerRadius);
          }

          private static double GetDensity() =>
              DeviceDisplay.MainDisplayInfo.Density;

          private class RoundedOutlineProvider : ViewOutlineProvider
          {
               private readonly double _radius;

               public RoundedOutlineProvider(double radius)
               {
                    _radius = radius;
               }

               public override void GetOutline(Android.Views.View view, Outline outline)
               {
                    outline?.SetRoundRect(0, 0, view.Width, view.Height, (float)_radius);
               }
          }
     }

<Image Source="mylogo.png" VerticalOptions="Center" Aspect="AspectFit" myeffects:RoundCornersEffect.CornerRadius="5"/>