iOS 利用CAShapeLayer和UIBezierPath实现白板图形绘制

概述

ZHFigureDrawingLayer一款图形白板绘制工具的基本实现，支持涂鸦、单箭头、直线、虚线、双箭头直线、双杠直线、椭圆、圆形、矩形、三角形、圆弧、正余弦、梯形、菱形、五边形、六边形、坐标系、直角坐标系、三维坐标系、球体、三菱锥、圆锥、圆柱、立方体数学图形绘制。降低耦合度，支持快速自定义新增图形。新增支持撤销、还原、删除还原功能。

工具

绘图

支持动态图形新增

简单的工厂模式，降低耦合，支持快速进行图形新增及修改。

基本类结构

图形定义

typedef enum : NSUInteger {
    ZHFigureDrawingTypeGraffiti = 1,        //涂鸦
    ZHFigureDrawingTypeArrow,               //单箭头
    ZHFigureDrawingTypeLine,                //直线
    ZHFigureDrawingTypeDottedline,          //虚线
    ZHFigureDrawingTypeRulerArrow,          //双箭头直线
    ZHFigureDrawingTypeRulerLine,           //双杠直线
    ZHFigureDrawingTypeOval,                //椭圆
    ZHFigureDrawingTypeCircle,              //圆形
    ZHFigureDrawingTypeRect,                //矩形
    ZHFigureDrawingTypeTriangle,            //三角形
    ZHFigureDrawingTypeArc,                 //圆弧
    ZHFigureDrawingTypeCosine,              //正余弦
    ZHFigureDrawingTypeTrapezoid,           //梯形
    ZHFigureDrawingTypeRhombus,             //菱形
    ZHFigureDrawingTypePentagon,            //五边形
    ZHFigureDrawingTypeHexagon,             //六边形
    ZHFigureDrawingTypeAxis,                //坐标系
    ZHFigureDrawingTypeRighTangle,          //直角坐标系
    ZHFigureDrawingTypeThreeDCoordinate,    //三维坐标系
    ZHFigureDrawingTypeSphere,              //球体
    ZHFigureDrawingTypeTriangularPyramid,   //三菱锥
    ZHFigureDrawingTypeCone,                //圆锥
    ZHFigureDrawingTypeCylinder,            //圆柱
    ZHFigureDrawingTypeCuboid,              //立方体
} ZHFigureDrawingType;

方法定义

/**
 初始化
 @param startPoint      开始点
 @param type            图形类型
 */
+ (instancetype)createLayerWithStartPoint:(CGPoint)startPoint type:(ZHFigureDrawingType)type;

@property (nonatomic, assign) ZHFigureDrawingType drawingType;     //图形类型
@property (nonatomic, strong) NSMutableArray *pointArray;    //记录图形绘制点
@property (nonatomic, assign) CGPoint startPoint;            //起始坐标
@property (nonatomic, assign) CGPoint endPoint;              //终点坐标
@property (nonatomic, strong) UIColor *lineColor;            //画笔颜色
@property (nonatomic, assign) CGSize paintSize;              //画布大小

- (void)movePathWithStartPoint:(CGPoint)startPoint;
- (void)movePathWithEndPoint:(CGPoint)endPoint;

- (UIBezierPath *)createArrowWithStartPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint;
- (CGFloat)distanceBetweenStartPoint:(CGPoint)startPoint endPoint:(CGPoint)endPoint;
- (CGFloat)angleWithFirstPoint:(CGPoint)firstPoint andSecondPoint:(CGPoint)secondPoint;
- (CGFloat)angleEndWithFirstPoint:(CGPoint)firstPoint andSecondPoint:(CGPoint)secondPoint;

部分图形绘制实现

白版绘制实现主要是通过CAShapeLayer来进行实现，部分简单图形（像直线、虚线、圆、圆弧、矩形等）系统UIBezierPath类已经提供好图形绘制方法，可以直接进行调用绘制。其它组合图形通过记录手指的开始点和手指一直移动的结束点，中间通过需要实现的图形进行一个关键点计算，来进行一个图形绘制。

• 多边形绘制

- (instancetype)init
{
    self = [super init];
    if (self) {
        self.edgeNumber = 3;//最小为正三角形
    }
    return self;
}

//绘制指定多边形
- (void)movePathWithEndPoint:(CGPoint)endPoint
{
    CGFloat radius;
    CGFloat angle = [self angleWithFirstPoint:self.startPoint andSecondPoint:endPoint];
    radius = fabs(endPoint.y - self.startPoint.y)/sin(angle);
    UIBezierPath *path = [UIBezierPath bezierPath];
    BOOL firstPoint = YES;
    
    for (CGFloat angle = self.edgeNumber%2*(-M_PI_2) ; angle <= (2+self.edgeNumber%2*0.5)*M_PI; angle += 2*M_PI/self.edgeNumber) {
        
        CGFloat x = self.startPoint.x + radius * cos(angle);
        CGFloat y = self.startPoint.y + radius * sin(angle);
        CGPoint point = CGPointMake(x, y);
        if (CGRectContainsPoint(CGRectMake(0, 0, self.paintSize.width, self.paintSize.height), point)) {
            if (firstPoint) {
                [path moveToPoint:point];
            }else{
                [path addLineToPoint:point];
            }
            firstPoint = NO;
        }else{
            return;
        }
    }
    self.path = path.CGPath;
    self.endPoint = endPoint;
}

• 正余弦绘制

//正余弦
- (void)movePathWithEndPoint:(CGPoint)endPoint{
    
    self.endPoint = endPoint;
    
    UIBezierPath *path = [UIBezierPath bezierPath];
    CGFloat height = endPoint.y - self.startPoint.y;
    CGFloat width = endPoint.x - self.startPoint.x;
    [path moveToPoint:self.startPoint];
    
    for(float x = 0.0; x < fabs(endPoint.x - self.startPoint.x); x++)
    {
        float startX;
        if (width > 0) {
            startX = x;
        }else{
            startX = -x;
        }
        float yCosine = sin(x / 50 * M_PI) * height + self.startPoint.y;
        CGPoint cosinePoint = CGPointMake(startX + self.startPoint.x, yCosine);
        [path addLineToPoint:cosinePoint];
    }
    
    self.path = path.CGPath;
}

下载地址

ZHFigureDrawingLayer，如果喜欢的话记得给个star喽！