带圆角的图像

Question

我正在尝试获取具有圆角的矩形形状的图像。我尝试使用 nugget fftransformations 和 frame。到目前为止，我没有得到我想要的结果。无论我给它多大尺寸，使用金块都会将图像变成正方形。出于某种原因使用框架实际上并没有绕过角落。 enter image description here

<StackLayout VerticalOptions="CenterAndExpand">
<ffimageloading:CachedImage VerticalOptions="CenterAndExpand"
           WidthRequest="530" HeightRequest="334"  
            DownsampleToViewSize="true"
            Source = "http://loremflickr.com/530/334/nature?filename=simple.jpg">
           <ffimageloading:CachedImage.Transformations>
                <fftransformations:RoundedTransformation Radius="10"/>
            </ffimageloading:CachedImage.Transformations>
        </ffimageloading:CachedImage>
      <ffimageloading:CachedImage VerticalOptions="CenterAndExpand"
           WidthRequest="530" HeightRequest="334"  
            DownsampleToViewSize="true"
            Source = "http://loremflickr.com/530/334/nature?filename=simple.jpg">
           <ffimageloading:CachedImage.Transformations>
                <fftransformations:CornersTransformation CornersTransformType="AllRounded"/>
            </ffimageloading:CachedImage.Transformations>
        </ffimageloading:CachedImage>
      <Grid VerticalOptions="CenterAndExpand">
             <Frame Padding="0"  WidthRequest="530" HeightRequest="334"  
        HorizontalOptions="Center"
        VerticalOptions="Center" CornerRadius="20" >
                <Image  Source = "http://loremflickr.com/530/330/nature?filename=simple.jpg"  Aspect="AspectFill"  />
          </Frame>
      </Grid>
     </StackLayout>

Answer 1

前段时间我需要其他控件的角效果。它也适用于图像。您只需要创建效果：

 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);
          }
     }

并在两个平台上实施：

IOS:

public class RoundCornersEffectIOS : PlatformEffect
     {
          protected override void OnAttached()
          {
               try
               {
                    PrepareContainer();
                    SetCornerRadius();
               }
               catch (Exception e)
               {
                    Debug.WriteLine(e);
               }
          }

          protected override void OnDetached()
          {
               try
               {
                    Container.Layer.CornerRadius = new nfloat(0);
               }
               catch (Exception e)
               {
                    Debug.WriteLine(e);
               }
          }

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

          private void PrepareContainer()
          {
               Container.ClipsToBounds = true;
               Container.Layer.AllowsEdgeAntialiasing = true;
               Container.Layer.EdgeAntialiasingMask = CAEdgeAntialiasingMask.All;
          }

          private void SetCornerRadius()
          {
               var cornerRadius = RoundCornersEffect.GetCornerRadius(Element);
               Container.Layer.CornerRadius = new nfloat(cornerRadius);
          }
     }

机器人：

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"/>

带圆角的图像

Image with rounded corners

xamarin.forms

ffimageloading