Xamarin.Forms中的CircularImage

Question

我需要在带有圆角的Xamarin.Forms中具有图像控件。但我没有找到可以做到的任何财产。如何获得圆形图像？

Answer 1

您可以使用 Image Circle Control Plugin

<controls:CircleImage Source="{Binding Image}" Aspect="AspectFill"> 
    <controls:CircleImage.WidthRequest> 
    <OnPlatform x:TypeArguments="x:Double" 
     iOS="55" 
     Android="55" 
     WinPhone="75"/> 
    </controls:CircleImage.WidthRequest> 
<controls:CircleImage.HeightRequest> 
    <OnPlatform x:TypeArguments="x:Double" 
     iOS="55" 
     Android="55" 
     WinPhone="75"/> 
    </controls:CircleImage.HeightRequest> 
</controls:CircleImage> 

更多的Project github readme

您还可以使用CircleImage从Xamarin-表单实验室项目。

Answer 2

如果您需要一个使用Custom Renderer的解决方案（以您想要的方式调整控件），以下是我的实现。

public class ImageCircle:Image 
{ 
    public ImageCircle() 
    { 
    } 
} 

[assembly: ExportRenderer(typeof(ImageCircle), typeof(ImageCircleRenderer))] 
namespace myNamespace.Droid 
{ 
public class ImageCircleRenderer:ImageRenderer 
{ 
    public ImageCircleRenderer() 
    { 
    } 

    protected override void OnElementChanged(ElementChangedEventArgs<Image> e) 
    { 
     base.OnElementChanged(e); 

     if (e.OldElement == null) 
     { 

      if ((int)Android.OS.Build.VERSION.SdkInt < 20) 
       SetLayerType(Android.Views.LayerType.Software, null); 
     } 
    } 
    protected override bool DrawChild(Canvas canvas, global::Android.Views.View child, long drawingTime) 
    { 
     try 
     { 
      var radius = Math.Min(Width, Height)/2; 
      var strokeWidth = 10; 
      radius -= strokeWidth/2; 

      //Create path to clip 
      var path = new Path(); 
      path.AddCircle(Width/2, Height/2, radius, Path.Direction.Ccw); 
      canvas.Save(); 
      canvas.ClipPath(path); 

      var result = base.DrawChild(canvas, child, drawingTime); 

      canvas.Restore(); 

      // Create path for circle border 
      path = new Path(); 
      path.AddCircle(Width/2, Height/2, radius, Path.Direction.Ccw); 

      var paint = new Paint(); 
      paint.AntiAlias = true; 
      paint.StrokeWidth = 5; 
      paint.SetStyle(Paint.Style.Stroke); 
      paint.Color = global::Android.Graphics.Color.White; 

      canvas.DrawPath(path, paint); 

      //Properly dispose 
      paint.Dispose(); 
      path.Dispose(); 
      return result; 
     } 
     catch (Exception ex) 
     { 
      Console.WriteLine("Unable to create circle image: " + ex); 
     } 

     return base.DrawChild(canvas, child, drawingTime); 
    } 
} 
} 

[assembly: ExportRenderer(typeof(ImageCircle), typeof(ImageCircleRenderer))] 
namespace LifesTopTen.iOS 
{ 
public class ImageCircleRenderer:ImageRenderer 
{ 
    public ImageCircleRenderer() 
    { 
    } 
    private void CreateCircle() 
    { 
     try 
     { 
      double min = Math.Min(Element.Width, Element.Height); 
      Control.Layer.CornerRadius = (float)(min/2.0); 
      Control.Layer.MasksToBounds = false; 
      Control.Layer.BorderColor = Color.White.ToCGColor(); 
      Control.Layer.BorderWidth = 3; 
      Control.ClipsToBounds = true; 
     } 
     catch(Exception ex) 
     { 
      Console.WriteLine ("Unable to create circle image: " + ex); 
     } 

    } 
    protected override void OnElementChanged (ElementChangedEventArgs<Image> e) 
    { 
     base.OnElementChanged (e); 

     if (e.OldElement != null || Element == null) 
      return; 

     CreateCircle(); 
    } 


    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e) 
    { 
     base.OnElementPropertyChanged(sender, e); 

     if (e.PropertyName == VisualElement.HeightProperty.PropertyName || 
      e.PropertyName == VisualElement.WidthProperty.PropertyName) 
     { 
      CreateCircle(); 
     } 
    } 

} 
} 

Answer 3

我使用FFImageLoading库CachedImage控制与圆改造为循环图片：

<ffimageloading:CachedImage 
     DownsampleToViewSize="true" 
     Aspect="AspectFill" 
     Source = "{Binding Image}" 
     LoadingPlaceholder = "{Binding DefaultImage}" 
     ErrorPlaceholder = "{Binding DefaultImage}"> 
    <ffimageloading:CachedImage.Transformations> 
     <fftransformations:CircleTransformation /> 
    </ffimageloading:CachedImage.Transformations> 
</ffimageloading:CachedImage>