UIBezierPath 绘制微信聊天气泡
2016-06-02 本文已影响502人
Best_Kai
UIBezierPath 绘制微信聊天气泡
废话不多说,直接上代码
CGSize photoSize = message.bubbleFrame.size;
CGFloat w = photoSize.width;
CGFloat h = photoSize.height;
CGFloat radius = 8;
CGFloat angleWidth = 6;
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
bezierPath.lineWidth = 1;
bezierPath.lineCapStyle = kCGLineCapRound;
bezierPath.lineJoinStyle = kCGLineJoinRound;
if (message.bubbleMessageType == GCBubbleMessageTypeSending) {
[bezierPath moveToPoint:CGPointMake(w-angleWidth,h-radius)];
[bezierPath addArcWithCenter:CGPointMake(w-radius-angleWidth, h-radius) radius:radius startAngle:0 endAngle:M_PI/2 clockwise:YES];
[bezierPath addArcWithCenter:CGPointMake(radius, h-radius) radius:radius startAngle:M_PI/2 endAngle:M_PI clockwise:YES];
[bezierPath addArcWithCenter:CGPointMake(radius,radius) radius:radius startAngle:M_PI endAngle:3*M_PI/2 clockwise:YES];
[bezierPath addArcWithCenter:CGPointMake(w-radius-angleWidth, radius) radius:radius startAngle:3*M_PI/2 endAngle:2*M_PI clockwise:YES];
[bezierPath addLineToPoint:CGPointMake(w-angleWidth,40/2-angleWidth)];
[bezierPath addLineToPoint:CGPointMake(w, 40/2)];
[bezierPath addLineToPoint:CGPointMake(w-angleWidth, 40/2+angleWidth)];
}else
{
[bezierPath moveToPoint:CGPointMake(w,h-radius)];
[bezierPath addArcWithCenter:CGPointMake(w-radius, h-radius) radius:radius startAngle:0 endAngle:M_PI/2 clockwise:YES];
[bezierPath addArcWithCenter:CGPointMake(radius+angleWidth, h-radius) radius:radius startAngle:M_PI/2 endAngle:M_PI clockwise:YES];
[bezierPath addLineToPoint:CGPointMake(angleWidth, 40/2+angleWidth)];
[bezierPath addLineToPoint:CGPointMake(0, 40/2)];
[bezierPath addLineToPoint:CGPointMake(angleWidth,40/2-angleWidth)];
[bezierPath addArcWithCenter:CGPointMake(radius+angleWidth,radius) radius:radius startAngle:M_PI endAngle:3*M_PI/2 clockwise:YES];
[bezierPath addArcWithCenter:CGPointMake(w-radius, radius) radius:radius startAngle:3*M_PI/2 endAngle:2*M_PI clockwise:YES];
}
[bezierPath closePath];
CAShapeLayer *shapLayer = [CAShapeLayer layer];
shapLayer.path = bezierPath.CGPath;
boarderLayer.path = bezierPath.CGPath;
boarderLayer.frame=_photoImageView.bounds;
_photoImageView.layer.mask = shapLayer;
注意:
`addArcWithCenter` 中的弧度和数学中的弧度方向是相反的。