先来看看我们见过的一些圆角箭头矩形的提示框效果图
一、了解CGContextRef
首先需要对 CGContextRef 了解, 作者有机会再进行下详细讲解, 这篇中简单介绍下, 方便后文阅读理解. 先了解 CGContextRef 坐标系
坐标系
举例说明 : 对于 商城类App 有很多原价, 现价对比 .那 原件的横线怎么画, 就可以用CGContextRef
- (void)drawRect:(CGRect)rect {
// Drawing code
[super drawRect:rect];
// 获取文本
CGContextRef context = UIGraphicsGetCurrentContext();
// 设置起始点坐标 (x轴: 0 . y轴: 控件高度一半)
CGContextMoveToPoint(context, 0, rect.size.height * 0.5);
// 设置直线连接点 (x轴:控件全长. y轴:控件高度一半 )
CGContextAddLineToPoint(context, rect.size.width, rect.size.height * 0.5);
//设置颜色 宽度
[[UIColor redColor] set];
CGContextSetLineWidth(context, 1);
CGContextStrokePath(context);
}
说明 : 从上面例子可以看到 是由两点确定一条直线.
二、自定义UILabel
进入正文. 控件可以自定义 UIView . 作者为了简单直接 自定义UILabel.
CustomLabel *customLabel = [[CustomLabel alloc] initWithFrame:CGRectMake(0, 200, 400, 500)];
[self.view addSubview:view];
view.backgroundColor = [UIColor orangeColor];
首先 .h文件
.h文件没什么说的, 定义的 字符串一会再解释说明
#import <UIKit/UIKit.h>
@interface CustomLabel : UILabel
@property (nonatomic, copy) NSString *fillColorStr;
@end
.m文件
我们用 - (void)drawRect:(CGRect)rect; 绘制 圆角箭头
#import "CustomLabel.h"
@implementation CustomLabel
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// 自定义你需要的属性
}
return self;
}
// 主要讲解
- (void)drawRect:(CGRect)rect {
// 随便设置个 长宽
float w = rect.size.width - 20;
float h = rect.size.height - 20;
// 获取文本
CGContextRef context = UIGraphicsGetCurrentContext();
// 设置 边线宽度
CGContextSetLineWidth(context, 0.2);
//边框颜色
CGContextSetStrokeColorWithColor(context, [UIColor grayColor].CGColor);
//矩形填充颜色
CGContextSetFillColorWithColor(context, [UIColor cyanColor].CGColor);
/** 先介绍 CGContextAddArcToPoint 参数
* CGContextRef : 为获取的文本
* x1, y1 : 第一点
* x2, y2 : 第二点
* radius : 圆角弧度
* 说明 : 两点连线 如同矢量线, 有方向性.
*/
// [开始点] 坐标从左上角开始 (6, 0)
CGContextMoveToPoint(context, 6, 0);
// 设置 第一点 第二点 弧度. 详解 : [开始点]到[第一点], 确定一条直线 (6, 0) -> (w, 0); [第一点]到[第二点]确定一条直线(w, 0)->(w, 10)
// 两条线连接与方向 为直角 设置弧度
CGContextAddArcToPoint(context, w, 0, w, 10, 6); // 右上角圆弧设置完
// 现在 [开始点] 坐标变为 (w, 10). 第一条线(w, 10) -> (w , h) ; 第二条线(w, h) -> (w - 10, h).
CGContextAddArcToPoint(context, w , h , w - 10, h, 6); // 右下角圆弧设置完
// 现在 [开始点] 坐标变为 (w - 10, h) . 由 (w - 10, h) -> (30, h) 向左画直线
CGContextAddLineToPoint(context, 30, h ); // 向左画线
// 现在 [开始点] 坐标变为 (30, h). 由(30, h) -> (25, h + 8) 向左下画直线
CGContextAddLineToPoint(context, 25, h + 8); // 左下直线
// 现在 [开始点] 坐标变为 (25, h + 8). 由 (25, h + 8)-> (20, h) 向左上画直线
CGContextAddLineToPoint(context, 20, h ); // 左上直线
// 现在 [开始点] 坐标变为 (20, h ). 第一条线(20, h)-> (0, h) ; 第二条线(0, h)->(0, h - 10)
CGContextAddArcToPoint(context, 0, h, 0, h - 10, 6); // 左下角圆弧设置完
// 现在 [开始点] 坐标变为 (0, h - 10 ). 第一条线(0, h - 10)-> (0, 0) ; 第二条线(0, 0)->(6, 0)
// 说明: 最开始设置的坐标点为(6, 0) 不为(0, 0). 就是为了最后可以连接上, 不然 画的线不能连接上 , 读者可自行试验
CGContextAddArcToPoint(context, 0, 0, 6, 0, 6); // 左上角圆弧设置完
CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径
}
