iOS 贝赛尔切平行四边形带圆角

一. 开发按照设计出的UI进行开发，效果图如下：

WechatIMG1031.jpg

二.看背景是一个平行四边形且带有圆角，我就直接上代码了

1.新建FYParallelogramView类继承UIView

.h文件：

#import <UIKit/UIKit.h>

NS_ASSUME_NONNULL_BEGIN

@interface FYParallelogramView : UIView

@property (nonatomic, assign) CGFloat offset;     // 顶边偏移量，控制倾斜
@property (nonatomic, assign) CGFloat cornerRadius; // 边角弧度
@property (nonatomic, strong) UIColor *fillColor; // 填充颜色

@end

NS_ASSUME_NONNULL_END

.m文件：

#import "FYParallelogramView.h"

@implementation FYParallelogramView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        _offset = 0.0;
        _cornerRadius = 0.0;
        _fillColor = [UIColor blueColor];
    }
    return self;
}
- (void)drawRect:(CGRect)rect {
    [super drawRect:rect];
    
    [super drawRect:rect];
    
    CGFloat width = CGRectGetWidth(rect);
    CGFloat height = CGRectGetHeight(rect);
    CGPoint topLeft = CGPointMake(_offset, 0);
    CGPoint topRight = CGPointMake(width, 0);
    CGPoint bottomRight = CGPointMake(width - _offset, height);
    CGPoint bottomLeft = CGPointMake(0, height);
    
    // 计算相邻边的向量长度
    CGFloat edgeLength = sqrt(pow(_offset, 2) + pow(height, 2));
    if (edgeLength == 0) return; // 避免除零
    
    // 单位向量（左边和右边）
    CGFloat leftUnitX = -_offset / edgeLength;
    CGFloat leftUnitY = height / edgeLength;
    CGFloat rightUnitX = -_offset / edgeLength;
    CGFloat rightUnitY = height / edgeLength;
    
    // 计算圆角截取点
    CGPoint A = CGPointMake(topLeft.x + _cornerRadius, topLeft.y);
    CGPoint B = CGPointMake(topLeft.x + leftUnitX * _cornerRadius, topLeft.y + leftUnitY * _cornerRadius);
    CGPoint C = CGPointMake(topRight.x - _cornerRadius, topRight.y);
    CGPoint D = CGPointMake(topRight.x + rightUnitX * _cornerRadius, topRight.y + rightUnitY * _cornerRadius);
    CGPoint E = CGPointMake(bottomRight.x + (-rightUnitX) * _cornerRadius, bottomRight.y + (-rightUnitY) * _cornerRadius);
    CGPoint F = CGPointMake(bottomRight.x - _cornerRadius, bottomRight.y);
    CGPoint G = CGPointMake(bottomLeft.x + _cornerRadius, bottomLeft.y);
    CGPoint H = CGPointMake(bottomLeft.x + (-leftUnitX) * _cornerRadius, bottomLeft.y + (-leftUnitY) * _cornerRadius);
    
    // 构建路径
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:A];
    [path addLineToPoint:C];
    
    // 使用 addQuadCurveToPoint:controlPoint: 绘制圆角
    [path addQuadCurveToPoint:D controlPoint:topRight];
    [path addLineToPoint:E];
    [path addQuadCurveToPoint:F controlPoint:bottomRight];
    [path addLineToPoint:G];
    [path addQuadCurveToPoint:H controlPoint:bottomLeft];
    [path addLineToPoint:B];
    [path addQuadCurveToPoint:A controlPoint:topLeft];
    [path closePath];
    
    // 填充颜色
    [_fillColor setFill];
    [path fill];
}



@end

2.备注：这块可以封装一下，可以设置切任意一个边和圆角大小。

3.使用：在使用的地方导入头文件#import "FYParallelogramView.h"

FYParallelogramView *view_bottom = [[FYParallelogramView alloc] initWithFrame:CGRectMake(40, 0, kScreenWidth-56, 40)];
view_bottom.backgroundColor = [UIColor blueColor];
view_bottom.offset = 10.0;// 顶边偏移量，控制倾斜
view_bottom.cornerRadius = 8.0; // 设置圆角
view_bottom.fillColor = [UIColor blueColor];// 填充颜色
[self addSubview:view_bottom];

4.建议：

这种效果尽量让设计同学出一张图片，1是可以提高开发效率也能提升App性能，尤其不要在cell上使用。