Question

如何为在Xamarin Cross-Platform中运行的图像创建圆形剪切蒙版，以及如何在ListView中实现它？我不想使用插件。我找到了一些例子，但它们都只针对Android应用程序，其中大多数是用Java编写的，而不是C＃。

Answer 1

使用https://www.nuget.org/packages/Xam.Plugins.Forms.ImageCircle

在您的iOS，Android和Windows项目中调用： Xamarin.Forms.Init（）; //特定于平台的init ImageCircleRenderer.Init（）;

Answer 2

需要为图片

写CustomRederers

<强> PCL：

<强> ImageCircle.cs

public class ImageCircle : Image
{

}

<强> Xamarin.Android：

<强> ImageCircleRenderer.cs

以上名称空间
[assembly：ExportRenderer（typeof（ImageCircle），typeof（ImageCircleRenderer））]

 public class ImageCircleRenderer : ImageRenderer
  {

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

        if (e.OldElement == null)
        {

            if ((int)Android.OS.Build.VERSION.SdkInt < 18)
                SetLayerType(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;


            Path 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();

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

            paint.Dispose();
            path.Dispose();
            return result;
        }
        catch (Exception ex)
        {
            var msg = ex.Message;
        }

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

}

<强> Xamarin.iOS

在NameSpace上方 [assembly：ExportRenderer（typeof（ImageCircle），typeof（ImageCircleRender））]

<强> ImageCircleRenderer.cs

  public class ImageCircleRender : ImageRenderer
{
    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();
        }
    }
    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 = 1;
            Control.ClipsToBounds = true;
        }
        catch (Exception ex)
        {
            Debug.WriteLine("Unable to create circle image: " + ex);
        }
    }
}

Xamarin跨平台圆形图像

2 个答案:

使用https://www.nuget.org/packages/Xam.Plugins.Forms.ImageCircle