美文网首页iOS大咖说
iOS绘制六边形/多边形使用方法

iOS绘制六边形/多边形使用方法

作者: 小緈福 | 来源:发表于2024-01-02 10:08 被阅读0次

    一、 UIImageView 分类

    .h
    /// 绘制多边形
    /// @param lineWidth 线宽
    /// @param lineColor 线颜色
    /// @param sides 边数
    /// @param cornerRadius 圆角
    - (void)eh_drawSexangleImageViewLineWidth:(CGFloat)lineWidth
                                    lineColor:(UIColor *)lineColor
                                        sides:(NSUInteger)sides
                                 cornerRadius:(CGFloat)cornerRadius;
                                 
    .m
    /// 绘制多边形
    /// @param lineWidth 线宽
    /// @param lineColor 线颜色
    /// @param sides 边数
    /// @param cornerRadius 圆角
    - (void)eh_drawSexangleImageViewLineWidth:(CGFloat)lineWidth
                                    lineColor:(UIColor *)lineColor
                                        sides:(NSUInteger)sides
                                 cornerRadius:(CGFloat)cornerRadius {
        UIBezierPath *path   = [UIBezierPath eh_polygonInRect:self.bounds
                                                        sides:sides
                                                    linewidth:lineWidth
                                                 cornerRadius:cornerRadius];
         
        // mask for the image view
        CAShapeLayer *mask   = [CAShapeLayer layer];
        mask.path            = path.CGPath;
        mask.lineWidth       = lineWidth;
        mask.strokeColor     = [UIColor clearColor].CGColor;
        mask.fillColor       = [UIColor whiteColor].CGColor;
        self.layer.mask = mask;
         
        // if you also want a border,add that as a separate layer
         
        CAShapeLayer *border = [CAShapeLayer layer];
        border.path          = path.CGPath;
        border.lineWidth     = lineWidth;
        border.strokeColor   = lineColor.CGColor;
        border.fillColor     = [UIColor clearColor].CGColor;
        [self.layer addSublayer:border];
    }
    

    二、UIBezierPath 分类

    .h
    /** Create UIBezierPath for regular polygon with rounded corners
     *
     * @param rect          The CGRect of the square in which the path should be created.
     * @param sides         How many sides to the polygon (e.g. 6=hexagon; 8=octagon,etc.).
     * @param linewidth     The width of the stroke around the polygon. The polygon will be inset such that the stroke stays within the above square.
     * @param cornerRadius  The radius to be applied when rounding the corners.
     *
     * @return              UIBezierPath of the resulting rounded polygon path.
     */
     
    + (instancetype)eh_polygonInRect:(CGRect)rect
                               sides:(NSInteger)sides
                           linewidth:(CGFloat)linewidth
                        cornerRadius:(CGFloat)cornerRadius;
                        
                        
    .m
    + (instancetype)eh_polygonInRect:(CGRect)rect
                               sides:(NSInteger)sides
                           linewidth:(CGFloat)linewidth
                        cornerRadius:(CGFloat)cornerRadius {
        UIBezierPath *path  = [UIBezierPath bezierPath];
     
        CGFloat theta       = 2.0 * M_PI / sides;                           // how much to turn at every corner
        CGFloat offset      = cornerRadius * tanf(theta / 2.0);             // offset from which to start rounding corners
        CGFloat squareWidth = MIN(rect.size.width,rect.size.height);   // width of the square
     
        // calculate the length of the sides of the polygon
     
        CGFloat length      = squareWidth - linewidth;
        if (sides % 4 != 0) {                                               // if not dealing with polygon which will be square with all sides ...
            length = length * cosf(theta / 2.0) + offset/2.0;               // ... offset it inside a circle inside the square
        }
        CGFloat sideLength = length * tanf(theta / 2.0);
     
        // start drawing at `point` in lower right corner
     
        CGPoint point = CGPointMake(rect.origin.x + rect.size.width / 2.0 + sideLength / 2.0 - offset,rect.origin.y + rect.size.height / 2.0 + length / 2.0);
        CGFloat angle = M_PI;
        [path moveToPoint:point];
     
        // draw the sides and rounded corners of the polygon
     
        for (NSInteger side = 0; side < sides; side++) {
            point = CGPointMake(point.x + (sideLength - offset * 2.0) * cosf(angle),point.y + (sideLength - offset * 2.0) * sinf(angle));
            [path addLineToPoint:point];
     
            CGPoint center = CGPointMake(point.x + cornerRadius * cosf(angle + M_PI_2),point.y + cornerRadius * sinf(angle + M_PI_2));
            [path addArcWithCenter:center radius:cornerRadius startAngle:angle - M_PI_2 endAngle:angle + theta - M_PI_2 clockwise:YES];
     
            point = path.currentPoint; // we don't have to calculate where the arc ended ... UIBezierPath did that for us
            angle += theta;
        }
     
        [path closePath];
     
        path.lineWidth = linewidth;           // in case we're going to use CoreGraphics to stroke path,rather than CAShapeLayer
        path.lineJoinStyle = kCGLineJoinRound;
     
        return path;
    }
    

    三、用法

    [self.headBgImageView eh_drawSexangleImageViewLineWidth:3.0 lineColor:UIColorFromRGB(0xFFFFFF) sides:6 cornerRadius:8.0];
    

    相关文章

      网友评论

        本文标题:iOS绘制六边形/多边形使用方法

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