图片裁剪之圆形头像

把一张普通的图片刻意裁剪成圆形,并给圆形图片加上圆形边框

代码抽取为UIImage的分类方法,如下:

 1 + (instancetype)circleImageWithName:(NSString *)name borderWidth:(CGFloat)borderWidth borderColor:(UIColor *)borderColor
 2 {
 3     // 1.加载原图
 4     UIImage *oldImage = [UIImage imageNamed:name];
 5
 6     // 2.开启上下文
 7     CGFloat imageW = oldImage.size.width + 2 * borderWidth;
 8     CGFloat imageH = oldImage.size.height + 2 * borderWidth;
 9     CGSize imageSize = CGSizeMake(imageW, imageH);
10     UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0);
11
12     // 3.取得当前的上下文
13     CGContextRef ctx = UIGraphicsGetCurrentContext();
14
15     // 4.画边框(大圆)
16     [borderColor set];
17     CGFloat bigRadius = imageW * 0.5; // 大圆半径
18     CGFloat centerX = bigRadius; // 圆心
19     CGFloat centerY = bigRadius;
20     CGContextAddArc(ctx, centerX, centerY, bigRadius, 0, M_PI * 2, 0);
21     CGContextFillPath(ctx); // 画圆
22
23     // 5.小圆
24     CGFloat smallRadius = bigRadius - borderWidth;
25     CGContextAddArc(ctx, centerX, centerY, smallRadius, 0, M_PI * 2, 0);
26     // 裁剪(后面画的东西才会受裁剪的影响)
27     CGContextClip(ctx);
28
29     // 6.画图
30     [oldImage drawInRect:CGRectMake(borderWidth, borderWidth, oldImage.size.width, oldImage.size.height)];
31
32     // 7.取图
33     UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
34
35     // 8.结束上下文
36     UIGraphicsEndImageContext();
37
38     return newImage;
39 }

效果图:

时间: 2024-10-06 10:44:50

图片裁剪之圆形头像的相关文章

ios 将矩形图片裁剪成圆形图片

在ios中将一个正方形的图片裁剪成圆形的图片是一件非常容易的事情, 直接设置 imageView.layer.cornerRadius 这个属性, 再设置 imageView.clipsToBounds = YES 就可以了, 但是对于长方形的图片来说这个方式裁剪出来的就不是一个圆形的了, 而是个椭圆的. 解决这个问题就需要自己画 并且需要计算. 最终效果图如下: tips: 如果是裁剪矩形的话, 是从图片中心的位置为圆心剪裁的. 代码如下: @implementation UIImage (C

图片裁剪与圆角半径设置(将图片裁剪为圆形)

如上: 需求:将左边图片改变为右边的图形 1.鼠标右键--用“裁剪图片”,将图片裁剪为正方形 2.在“元件属性与样式”---样式---圆角半径,将圆角半径设置为330即可实现上图效果,圆角半径具体数值可根据具体情况做调整

cocos2dx 3.X 利用clippingNode把图片裁剪成圆形

ClippingNode简介 先简单了解一下clippingNode类的使用.顾名思义,首先它是一个node,可以做为其他sprite,node的容器,而且是一个可以裁剪的node.如何裁剪,如何定义一套裁剪的规则出来.这里可以使用一张图片,根据图片的分辨率或者有效像素进行裁剪,或者自己画出来一个裁剪区域,根据这个区域进行裁剪.那这个图片或者画出来的区域,就是模板,clippingNode根据模板进行图片的裁剪. 主要方法: static ClippingNode* create(Node *s

圆形头像CircleImageView和Cardview使用

效果: 圆形头像在我们的日常使用的app中很常见,因为圆形的头像比较美观. 使用圆形图片的方法可能有我们直接将图片裁剪成圆形再在app中使用, 还有就是使用自定义View对我们设置的任何图片自动裁剪成圆形. 这里使用github上CircleImageView github:https://github.com/hdodenhof/CircleImageView CardView顾名思义卡片式的View, CardView继承的是FrameLayout,所以摆放内部控件的时候需要注意一下 可以设

将矩形图片转化为圆形图片

功能:点击按钮将一张矩形的图片裁剪为圆形的图片,圆形图片为矩形的内切圆 工具类: import android.graphics.Bitmap; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.PorterDuff; import android.graphics.PorterDuffXfermode; /** * 将矩形图片变为圆形的工具类 */ public clas

Android自定义控件实例,圆形头像(图库 + 裁剪+设置),上传头像显示为圆形,附源码

Android项目开发中经常会遇见需要实现圆角或者圆形的图片功能,如果仅仅使用系统自带的ImageView控件显然无法实现此功能,所以通过系列文章的形式由简到繁全方位的介绍一下此功能的实现,巩固一下自身的学习,同时,和广大网友交流分享 本项目源码下载地址:链接:http://pan.baidu.com/s/1sljdvtF 密码:xj85 首先看效果图 首先看一下CircleImageView的主要流程 1. 首先通过setImageXxx()方法设置图片Bitmap: 2. 进入构造函数Cir

iOS之带有边框的圆形图片裁剪

我们经常需要把一些不是圆形的图片剪切成圆形后来使用,比如QQ头像,微博头像等都是圆形,那么问题来了,该怎么把一张不是圆形的图片剪切成圆形呢? 下面就是其中一种可以实现这种需求的方法: 具体实现思路: 1.假设边框宽度为BorderW 2.开启的图片上下文的尺寸就应该是原始图片的宽高分别加上两倍的BorderW,这样开启的目的是为了不让原始图片变形. 3.在上下文上面添加一个圆形填充路径.位置从0,0点开始,宽高和上下文尺寸一样大.设置颜色为要设置的边框颜色. 4.继续在上下文上面添加一个圆形路径

10-简单圆形图片裁剪

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: pointer; position: absolute

Quartz2D裁剪圆形头像

// 0. 载入原有图片 UIImage *image = [UIImage imageNamed:icon]; // 1.创建图片上下文 CGFloat margin = border; CGSize size = CGSizeMake(image.size.width + margin, image.size.height + margin); // YES 不透明 NO 透明 UIGraphicsBeginImageContextWithOptions(size, NO, 0); // 2