美文网首页
地图的标注不规则视图实现

地图的标注不规则视图实现

作者: kyson老师 | 来源:发表于2019-08-12 19:06 被阅读0次

    前言

    如图效果如何实现?


    地图annotation view

    先给出代码:

    /**
         p1                           p2
         |---------------------------|
         |                           |
         |                           |
         |                           |
         |                           |
         ---------\        /--------- p3
         p7     p6 \      / p4
                        \    /
                         \  /
                          \/
                         p5
         */ 
    
    #define kCornerRadius 6.f
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGPoint point1 = CGPointMake(0.f, 0.f);//最左边
    CGPoint point2 = CGPointMake(180.f, 0.f);//右上角
    CGPoint point3 = CGPointMake(180.f, 57.f - kCornerRadius);//右下角
    CGPoint point4 = CGPointMake(100.f, 57.f);//小尖角右边
    CGPoint point5 = CGPointMake(90.f, 64.f);//小尖角中间
    CGPoint point6 = CGPointMake(80.f, 57.f);//小尖角左边
    CGPoint point7 = CGPointMake(0.f + kCornerRadius, 57.f);//左下角
    
    [path moveToPoint:point1];
    [path addLineToPoint:point2];
    [path addLineToPoint:point3];
    #define DEGREES_TO_RADIANS(degrees) ((3.14159265359 * degrees) / 180)
    
    [path addArcWithCenter:CGPointMake(180 - kCornerRadius, 57-6) radius:kCornerRadius startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(90) clockwise:YES];
     
    [path addLineToPoint:point4];
    [path addLineToPoint:point5];
    [path addLineToPoint:point6];
    [path addLineToPoint:point7];
    
    [path addArcWithCenter:CGPointMake(kCornerRadius, 57 - kCornerRadius) radius:kCornerRadius startAngle:DEGREES_TO_RADIANS(90) endAngle:DEGREES_TO_RADIANS(180) clockwise:YES];
    [path closePath];
    
    CAShapeLayer *shapLayer = [CAShapeLayer layer];
    shapLayer.cornerRadius = kCornerRadius;
    shapLayer.path = path.CGPath;
    
    self.layer.mask = shapLayer;
    

    原理:

    圆角原则

    参考

    https://blog.csdn.net/longlongValue/article/details/55045254

    相关文章

      网友评论

          本文标题:地图的标注不规则视图实现

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