美文网首页
QQ讨论组头像

QQ讨论组头像

作者: waitingfor168 | 来源:发表于2016-08-10 18:28 被阅读0次

      去年应项目需要,要实现QQ讨论组圆形组合头像,你大爷的,国内外网站溜达了遍没找到合适,寻思怎么也要实现吧,就自己操刀试试呗,,,于是乎。

 一:分析一下

      经过分析发现其实还挺简单的,既然是组合头像那咱就先拆解呗。拆解后分为都是每个圆角图片被咬掉一口,而且是按照一定角度圆形相互叠加排列,这样就好办了。

二:制作有缺口的圆形图片

      原本想偷懒弄几张图片叠加重行绘制就行了,后来发现绘制出来的图片模糊而且内存消耗很大效率低,尤其用户群多的时候。后来改用重新绘制的方式的到很大的改善。

      image的重行绘制使用drawRect:(CGRect)rect,接下来的就和数学有很大的关系了,计算圆的弧度。

// R * (cos(a) - tan(a) * sin(a))

CGFloat angleRadius = _cycleRadius * (cos(radians(_cycleClipAngle)) - tan(radians(_cycleClipAngle)) * sin(radians(_cycleClipAngle)));

在指定的圆弧内进行image的重新绘制,如下:

CGContextRef context=UIGraphicsGetCurrentContext();

CGContextSetLineWidth(context, _cycleStroke);

CGContextSetRGBStrokeColor(context, 1, 0, 0, 1);

CGContextAddArc(context, centerPoint.x, centerPoint.y, _cycleRadius, radians(beginAngle), radians(endAngle), 1);

CGPoint aPoints[2];//angle two points

aPoints[0] =CGPointMake(centerPoint.x +_cycleRadius * cos(radians(beginAngle)), centerPoint.x + _cycleRadius * sin(radians(beginAngle)));//坐标1

CGContextAddArcToPoint(context, centerPoint.x +angleRadius * cos(radians(_rotateAngle)), centerPoint.x +angleRadius * sin(radians(_rotateAngle)), aPoints[0].x, aPoints[0].y, _cycleRadius);

//    CGContextDrawPath(context, kCGPathStroke);

CGContextClosePath(context);

CGContextClip(context);

[_image drawInRect:CGRectMake(_cycleStroke / 2.0, _cycleStroke / 2.0, _cycleRadius * 2.0, _cycleRadius * 2.0)];

 三:组装生成的每个缺口的图片

这又是一个数学题,在指定大小的正方形内分别内部圆心相互相切与外部的正放心边框内切,是不是有点难懂,还是看图吧.这里为什么使用三个的头像作为演示呢,因为爷在这掉坑里了,三个小圆应该是正方形内切圆的内切三个小圆而不是直接是正方形的内切三个小圆:

针对每个不同数目的头像算出内切圆的半径和在所在相对内切圆形的坐标,

CGPoint point0 = CGPointMake(0, -radius);

CGPoint point1 = CGPointMake(radius * -cos(radians(18)), radius * -sin(radians(18)));

CGPoint point2 = CGPointMake(radius * -cos(radians(54)), radius * sin(radians(54)));

CGPoint point3 = CGPointMake(radius * cos(radians(54)), radius * sin(radians(54)));

CGPoint point4 = CGPointMake(radius * cos(radians(18)), radius * -sin(radians(18)));

再然后就是计算每个子头像的旋转角度,

NSArray *angles = @[@(36 * 4),@(36 * 2),@(0),@(36 * -2),@(36 * -4)];

最终就会得到下面的效果图,是不是很简单的,目前看来这个东东还有很大的优化空间

 代码

相关文章

  • QQ讨论组头像

    去年应项目需要,要实现QQ讨论组圆形组合头像,你大爷的,国内外网站溜达了遍没找到合适,寻思怎么也要实现吧,就...

  • 仿QQ--讨论组头像

    请关注,防止你用了,我改了,有问题连个商量的人都找不到... DDYHeader.h DDYHeader.m 应用...

  • Flutter仿QQ讨论组头像

    前言 上篇文章分享了Flutter仿微信/微博九宫格。已实现类似微信/微博展示图片九宫格,拖拽排序,微信群组头像,...

  • Flutter 高仿QQ讨论组头像

    View宽D,蓝色小圆半径r,红色大圆半径R,Y轴上偏移量dy,头像数量n。 正文 一、计算每个小圆的中心坐标 首...

  • [Android] 自定义View之仿QQ讨论组头像

    在以前的一个项目中,需要实现类似QQ讨论组头像的控件,只是头像数量和布局有一小点不一样:一是最头像数是4个,二是头...

  • [Android] 自定义View之仿QQ讨论组头像

    转载文章作者:一息尚存 原文链接:http://www.jianshu.com/p/349aa6153fcc 效...

  • 我在难过什么

    打开QQ,决定在讨论组说些什么,才发现,只有我一个,显示的是,某某退出讨论组,某某退出讨论组。哦,后知后觉的我才发...

  • qq头像

  • QQ头像

    好长时间没用过QQ了,突然今天电脑登录上QQ有一种回到高中的感觉,曾经一直等着右下角有个头像会跳动起来,内心也...

  • QQ讨论组去哪了?

    QQ讨论组的好处是对创建者的QQ资料、等级等无限制,也无需被邀请入组人员的验证即可单方面自动加他人进组...

网友评论

      本文标题:QQ讨论组头像

      本文链接:https://www.haomeiwen.com/subject/uxtxdttx.html