美文网首页
iOS 利用贝塞尔曲线画出类似气泡框的UI

iOS 利用贝塞尔曲线画出类似气泡框的UI

作者: eden_lx | 来源:发表于2020-04-11 20:48 被阅读0次

工作中遇到了一个绘制气泡的展示view。因为涉及到圆角以及尖角,并且尖角内需要内容填充所以用到了贝塞尔曲线绘制出需要气泡展示的view。

UIColor *color = [UIColor redColor];

[color set];

// 1. 创建一个UIBezierPath对象

UIBezierPath *path = [UIBezierPath bezierPath];

path.lineWidth = 5.0;

// 左上角

[path moveToPoint:CGPointMake(0, 32)];

[path addQuadCurveToPoint:CGPointMake(32, 0.0) controlPoint:CGPointMake(0, 0)];

// 右上角

[path addLineToPoint:CGPointMake(114.0, 0.0)];

[path addQuadCurveToPoint:CGPointMake(146, 32) controlPoint:CGPointMake(146, 0)];

// 右下角

[path addLineToPoint:CGPointMake(146, 114)];

[path addQuadCurveToPoint:CGPointMake(114, 146) controlPoint:CGPointMake(146, 146)];

// 尾巴

[path addLineToPoint:CGPointMake(114, 146.0)];

[path addLineToPoint:CGPointMake(114, 157)];

[path addQuadCurveToPoint:CGPointMake(111.9, 158.8) controlPoint:CGPointMake(114,  160)];

[path addLineToPoint:CGPointMake(111.9, 158.8)];

[path addLineToPoint:CGPointMake(92.8, 146)];

// 左下角

[path addQuadCurveToPoint:CGPointMake(0, 114) controlPoint:CGPointMake(0, 146)];

[path addLineToPoint:CGPointMake(0.0, 146)];

[path closePath];

// 4. 设置UIBezierPath对象的相关属性

// 设置线宽

path.lineWidth = 1.5;

// 设置填充颜色

UIColor *fillColor = [UIColor greenColor];

[fillColor set];

[path fill];

// 设置画笔颜色w

UIColor *strokeColor = [UIColor blueColor];

[strokeColor set];

// 根据我们设置的各个点连线

[path stroke];

CAShapeLayer *shapeLayer = [CAShapeLayer layer];

shapeLayer.path = path.CGPath;

self.bubbView.layer.mask = shapeLayer;

self.view.backgroundColor = [UIColor grayColor];

相关文章

网友评论

      本文标题:iOS 利用贝塞尔曲线画出类似气泡框的UI

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