Xamarin.iOS 圆形图片裁剪

本文主要讲解在实际开发过程中圆形图片的实现过程

---

在项目开发中我们经常会使用圆形头像图片，例如登陆页面的头像，个人页面的头像，某些列表页面的图片等等......都需要采用圆形图片去实现这些功能，所以我们今天主要看看几种实现圆形图片的方法。

圆形图片实现可以采用三种方式：

• 直接设置UIImageView的Layer，修改图层实现
• 根据贝塞尔曲线裁剪得到
• 直接通过绘图技术实现

修改UIImageView的图层

设置UIImageView图层的圆角属性，将其设置为UIImageView宽度的一半，然后将多余的部分给截取掉就能出现圆形的UIImageView。

UIImageView image = new UIImageView();
image.Frame = new CoreGraphics.CGRect(100, 200, 100, 100);
//图片名称
image.Image = UIImage.FromFile("Default");
image.Layer.CornerRadius = image.Frame.Size.Width / 2;
image.Layer.MasksToBounds = true;
this.View.AddSubview(image);

这种方式不建议使用，因为使用图层过量，特别是弄圆角或者阴影会很卡，设置图片圆角一般采用绘图来做。而且过于频繁的对于图层的绘制会造成内存的暴涨，违背我们的原则。

根据贝塞尔曲线裁剪得到

将所需要设置的UIImageView作为参数传入方法中，根据UIImageView的size去建立上下文，然后根据贝塞尔曲线画一个圆然后裁剪，将图片画到裁剪的区域中，此时获取上下文，即可获取一个圆形的图片。

        protected UIImage cutCircleImage(UIImageView imageView)
        {
            UIImage image = UIImage.FromFile("Default");

            UIGraphics.BeginImageContextWithOptions(imageView.Bounds.Size,false,0);

            UIBezierPath.FromRoundedRect(imageView.Bounds,50).AddClip();

            image.Draw(imageView.Bounds);

            UIImage newImage = UIGraphics.GetImageFromCurrentImageContext();

            UIGraphics.EndImageContext();

            return newImage;
                        
        }

然后在主函数中进行引用
imageView.Image = cutCircleImage(imageView);
这样屏幕中就显示了圆形图片区域了

直接通过绘图技术来实现

在iOS中绘图一般分为以下几个步骤：
1.获取绘图上下文
2.创建并设置路径
3.将路径添加到上下文
4.设置上下文状态
5.绘制路径
6.释放路径

程序会调用draw方法，在里面获取了图形上下文（在内存中拥有了），然后利用图形上下文保存绘图信息，利用图形上下文保存绘图信息，可以理解为图形上下文中有一块区域用来保存绘图信息，有一块区域用来保存绘图的状态（线宽，圆角，颜色）。直线不是直接绘制到view上的，可以理解为在图形上下文中有一块单独的区域用来先绘制图形，当调用渲染方法的时候，再把绘制好的图形显示到view上去。

        protected UIImage circleImage(UIImage image)
        {
            // 开启上下文
            UIGraphics.BeginImageContext(image.Size);

            //UIGraphics.BeginImageContextWithOptions(image.Size, false, 0);
            // 获取上下文
            CGContext ctx = UIGraphics.GetCurrentContext();
            // 设置圆形
            CGRect rect = new CGRect(0, 0, image.Size.Width, image.Size.Height);
            //在上文中画一个圆形
            ctx.AddEllipseInRect(rect);
            //裁剪
            ctx.Clip();
            //将图片画到上下文的指定位置上
            image.Draw(rect);
            //从上下文中获取到图片
            UIImage newImage = UIGraphics.GetImageFromCurrentImageContext();
            //结束上下文
            UIGraphics.EndImageContext();

            return newImage;

        }

一般情况下我们一般使用第二种和第三方种方法比较多，我们在很多对于图形的处理上，圆图，圆环，文字彩印等多需要结合上下文进行操作，iOS系统本身提供了两套绘图的框架，即UIBezierPath（第二种） 和 Core Graphics（第三种）。而前者所属UIKit，其实是对Core Graphics框架关于path的进一步封装，所以使用起来比较简单。但是毕竟Core Graphics更接近底层，所以它更加强大。

到这里Xamarin.iOS中圆形图片裁剪的介绍就完成了，希望能对您有所帮助。

——End 有问题可以加我微信，大家一起讨论