快两个月没写文章了，说是工作比较忙，归根结底还是懒，哈哈😁。
想开源一个点图标签的库，但其实没有必要，明白原理，大家都可以动手干的。文末附笔者自己思路下的Demo，满足要求的给个star，直接拿过去用哈。
点图标签的实现思路
首先将点图标签分为，圆，文本，以及控制的方向。如下图
tag_pic.png
先上效果
tagPic.gif
实现：
一、圆
在初始化时确定圆的大小，一般的点图标签就是圆点和和做动画的阴影圆，有的也会有大圆部分，其实就是在圆点下方加一个大圆，使其有圆环的效果。
- (void)creatCircleView
{ //circleLayer
CGSize circleSize = self.circleSize;
self.circleLayer =[CALayer new];
self.circleLayer.position = CGPointMake(circleSize.width/2, circleSize.height/2);
self.circleLayer.bounds = CGRectMake(0, 0, circleSize.width, circleSize.height);
self.circleLayer.cornerRadius = circleSize.width/2;
[self.layer addSublayer:self.circleLayer];
//circleView
self.circleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, circleSize.width, circleSize.height)];
self.circleView.layer.cornerRadius = self.circleView.frame.size.width / 2;
self.circleView.layer.masksToBounds = YES;
self.circleView.center = CGPointMake(10, CGRectGetHeight(self.frame)/2.0);
self.circleLayer.position = self.circleView.center;
//bigCircleView
self.bigCircleView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, circleSize.width+2, circleSize.height+2)];
self.bigCircleView.layer.cornerRadius = self.bigCircleView.frame.size.width / 2;
self.bigCircleView.layer.masksToBounds = YES;
self.bigCircleView.center = CGPointMake(10, CGRectGetHeight(self.frame)/2.0);
[self addSubview:self.bigCircleView];
[self addSubview:self.circleView];
//添加动画
[self circleAnimation:self.circleLayer];
}
二、 文字
文字部分主要是根据方向画出对应形状的
path（画path其实是一件很有意思的事情，建立坐标系，画出形状然后标出关键点，用关键点生成path即可，有兴趣的可以动手试试哈），然后利用CAShapeLayer来生成图层裁剪UILabel的layer。CAShapeLayer的优点这里就不细说了。
//处理label的形状
- (void)triangle:(UILabel *)label
{
CGFloat angleWidth = 10;
CGFloat labelCornerRadius = 4;
CGFloat lineCornerRadius = 2;
CGFloat arrowCornerRadious = 1;
UIBezierPath * path = [UIBezierPath new];
switch (self.direction)
{
case YLTagDirectionRight:
[path moveToPoint:( CGPoint ) { labelCornerRadius, 0}];
[path addQuadCurveToPoint:( CGPoint ) {0, labelCornerRadius} controlPoint:( CGPoint ) { 0,0}];
[path addLineToPoint :( CGPoint ) { 0, CGRectGetHeight(label.frame)-labelCornerRadius}];
[path addQuadCurveToPoint:( CGPoint ) {labelCornerRadius, CGRectGetHeight(label.frame)} controlPoint:( CGPoint ) { 0, CGRectGetHeight(label.frame)}];
[path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame) - angleWidth-lineCornerRadius, CGRectGetHeight(label.frame)}];
[path addQuadCurveToPoint:( CGPoint ) {CGRectGetWidth(label.frame) - angleWidth+lineCornerRadius, CGRectGetHeight(label.frame)-lineCornerRadius} controlPoint:( CGPoint ) { CGRectGetWidth(label.frame)-angleWidth, CGRectGetHeight(label.frame)}];
[path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame)-arrowCornerRadious, CGRectGetHeight(label.frame)/2.0+arrowCornerRadious}];
[path addQuadCurveToPoint:( CGPoint ) {CGRectGetWidth(label.frame)-arrowCornerRadious,CGRectGetHeight(label.frame)/2.0-arrowCornerRadious} controlPoint:( CGPoint ) { CGRectGetWidth(label.frame), CGRectGetHeight(label.frame)/2.0}];
[path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame) - angleWidth+lineCornerRadius, lineCornerRadius}];
[path addQuadCurveToPoint:( CGPoint ) {CGRectGetWidth(label.frame) - angleWidth-lineCornerRadius, 0} controlPoint:( CGPoint ) { CGRectGetWidth(label.frame)-angleWidth,0}];
[path addLineToPoint :( CGPoint ) { labelCornerRadius, 0}];
break;
case YLTagDirectionLeft:
default:
[path moveToPoint :( CGPoint ) { angleWidth+lineCornerRadius , 0 }];
[path addQuadCurveToPoint:( CGPoint ) { angleWidth-lineCornerRadius,lineCornerRadius} controlPoint:( CGPoint ) {angleWidth , 0}];
[path addLineToPoint :( CGPoint ) { arrowCornerRadious, CGRectGetHeight(label.frame)/2.0-arrowCornerRadious}];
[path addQuadCurveToPoint:( CGPoint ) {arrowCornerRadious, CGRectGetHeight(label.frame)/2.0+arrowCornerRadious} controlPoint:( CGPoint ) { 0, CGRectGetHeight(label.frame)/2.0}];
[path addLineToPoint :( CGPoint ) { angleWidth-lineCornerRadius, CGRectGetHeight(label.frame)-lineCornerRadius}];
[path addQuadCurveToPoint:( CGPoint ) { angleWidth+lineCornerRadius, CGRectGetHeight(label.frame)} controlPoint:( CGPoint ) { angleWidth, CGRectGetHeight(label.frame)}];
[path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame)-labelCornerRadius, CGRectGetHeight(label.frame)}];
[path addQuadCurveToPoint:( CGPoint ) { CGRectGetWidth(label.frame), CGRectGetHeight(label.frame)-labelCornerRadius} controlPoint:( CGPoint ) { CGRectGetWidth(label.frame), CGRectGetHeight(label.frame)}];
[path addLineToPoint :( CGPoint ) { CGRectGetWidth(label.frame), labelCornerRadius}];
[path addQuadCurveToPoint:( CGPoint ) { CGRectGetWidth(label.frame)-labelCornerRadius, 0} controlPoint:( CGPoint ) { CGRectGetWidth(label.frame),0}];
[path addLineToPoint :( CGPoint ) { angleWidth, 0}];
break;
}
CAShapeLayer* mask = [CAShapeLayer layer];
mask.path = path.CGPath ;
label.layer.mask = mask;
}
上面的绘制会引发一个小问题，由于UILabel被裁剪的形状不规则，一边是三角形，一边是矩形，所以就导致了文字在被裁剪的UILabel中看起来不是居中的，为了解决这个问题就自定了一个UILabel改变了它的Insets。
三、 方向（边缘处理）
在点击屏幕边缘时需要处理🏷的方向，比如，默认方向为左，但当点击屏幕右边缘时，此时的🏷是不能默认为左的，此时方向为右，才能保证🏷不会超出屏幕，在拿到
text之后计算方向即可。其实就是父视图边缘的特殊处理，此Demo种父视图与屏幕等宽。当然除此以外还要处理标签移动时，标签不会超出屏幕。
//处理完判断边界fram，赋值方向
CGFloat selfW = rect.size.width + CGRectGetWidth(self.bigCircleView.frame) + kSpace;
if (CGRectGetWidth(self.superview.frame)>0)
{
if (self.direction == YLTagDirectionLeft)
{
CGFloat maxX = self.circlePoint.x - CGRectGetWidth(_bigCircleView.frame)/2 + selfW;
if (maxX>self.superview.frame.size.width)
{
self.direction = YLTagDirectionRight;
}
}else
{
CGFloat minX = self.circlePoint.x + CGRectGetWidth(_bigCircleView.frame) - selfW;
if (minX<0)
{
self.direction = YLTagDirectionLeft;
}
}
}
详细代码见Demo
点图标签的核心就是处理圆点，文字和方向三者之间的关系。其实所有的问题都大同小异，学会拆分问题，然后解决问题。题外话，哈哈😁。
照例放Demo，仅供参考，如有问题请留言
Demo地址：
https://github.com/yongliangP/YLTagView 用心良苦请 star
如果你觉得对你有帮助请点 喜欢 哦，也可以关注 我，每周至少一篇技术（虽然现在不能保证更新量了，但会一直更😁）。
或者关注 我的专题 每周至少5篇更新，多谢支持哈。
网友评论