服务器之家

服务器之家 > 正文

iOS实现圆角箭头视图

时间:2021-06-07 17:12     来源/作者:徐石石石

在APP中实现类似聊天内容背景图时,需要绘制圆角及箭头。很多人会选择使用图片(这也是最省事的一种方法),但是对于在视图中对内容做约束布局的话,我们无法准确的知道箭头的偏移量。下面就来介绍一下利用CGContextRef怎样绘制吧。

先来看看效果图吧!

iOS实现圆角箭头视图

代码实现:

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
- (void)drawRect:(CGRect)rect {
    float lw = 2; // 边线宽度
    float aw = 4;// 箭头宽
    float ah = 5;// 箭头高
    float r = 3;// 圆角角度
    
    // 需要减去边线的宽度,为什么不是减去边线的宽度x2?
    // 因为左边线和上边线是往视图内描绘的,而右边线和下边线是往视图外描绘的。
    float w = self.frame.size.width - lw;// 设置画线长度
    float h = self.frame.size.height - lw;// 设置画线宽度
    
    // 获取上下文
    CGContextRef context = UIGraphicsGetCurrentContext();
    // 设置边线宽度
    CGContextSetLineWidth(context, lw);
    //边框颜色
    CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
 
    // 矩形填充颜色
    CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
 
    CGContextMoveToPoint(context, 0, lw); // 开始坐标左边开始
    CGContextAddArcToPoint(context, w, lw, w, r, r); // 右上角角度
    CGContextAddArcToPoint(context, w , h, w-r, h, r); // 右下角角度
    CGContextAddArcToPoint(context, aw, h, aw, h-r, r); // 左下角角度
    CGContextAddLineToPoint(context, aw, ah); // 向左上竖线
    CGContextAddLineToPoint(context, 0, lw); // 向左上斜线
    
    CGContextDrawPath(context, kCGPathFillStroke); //根据坐标绘制路径
 
    // 父类调用 放在画完边线后。不然设置的文字会被覆盖
    [super drawRect:rect];
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/xl348053718/article/details/115691483

标签:

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
2021德云社封箱演出完整版 2021年德云社封箱演出在线看
2021德云社封箱演出完整版 2021年德云社封箱演出在线看 2021-03-15
返回顶部