CircularImage in Xamarin.Forms

Question

Ich brauche Bildkontrolle in Xamarin.Forms mit abgerundeten Ecken. Aber ich habe keine Immobilie gefunden, die es schaffen könnte. Wie man kreisförmiges Bild hat?

Answer 1

können Sie 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> 

Lesen Sie verwenden mehr bei Project github readme

Sie auch CircleImage von Xamarin-Forms-Labs-Projekt verwenden können.

Answer 2

Wenn Sie eine Lösung mit benutzerdefinierten Renderern benötigen (um das Steuerelement wie gewünscht zu optimieren), hier ist meine Implementierung dafür.

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

Ich verwende die FFImageLoading Bibliotheken CachedImage Steuerung mit einem Kreis-Transformation für Kreis Bilder:

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