iOS实现圆角箭头视图

2025-05-29 0 73

在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];

}

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

快网idc优惠网 建站教程 iOS实现圆角箭头视图 https://www.kuaiidc.com/89351.html

相关文章

发表评论
暂无评论