美文网首页
UIBezierPath 绘制微信聊天气泡

UIBezierPath 绘制微信聊天气泡

作者: Best_Kai | 来源:发表于2016-06-02 08:38 被阅读502次

    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` 中的弧度和数学中的弧度方向是相反的。

    相关文章

      网友评论

          本文标题:UIBezierPath 绘制微信聊天气泡

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