iOS 利用CAShapeLayer和UIBezierPath實現(xiàn)白板圖形繪制

概述

ZHFigureDrawingLayer一款圖形白板繪制工具的基本實現(xiàn)留特，支持涂鴉、單箭頭玛瘸、直線蜕青、虛線、雙箭頭直線糊渊、雙杠直線右核、橢圓、圓形渺绒、矩形贺喝、三角形、圓弧宗兼、正余弦躏鱼、梯形、菱形殷绍、五邊形染苛、六邊形、坐標系主到、直角坐標系茶行、三維坐標系躯概、球體、三菱錐畔师、圓錐娶靡、圓柱、立方體數(shù)學圖形繪制茉唉。降低耦合度固蛾，支持快速自定義新增圖形。新增支持撤銷度陆、還原、刪除還原功能献幔。

工具

繪圖

支持動態(tài)圖形新增

簡單的工廠模式懂傀，降低耦合，支持快速進行圖形新增及修改蜡感。

基本類結(jié)構(gòu)

圖形定義

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;

部分圖形繪制實現(xiàn)

白版繪制實現(xiàn)主要是通過CAShapeLayer來進行實現(xiàn)蹬蚁，部分簡單圖形（像直線、虛線郑兴、圓犀斋、圓弧、矩形等）系統(tǒng)UIBezierPath類已經(jīng)提供好圖形繪制方法情连，可以直接進行調(diào)用繪制叽粹。其它組合圖形通過記錄手指的開始點和手指一直移動的結(jié)束點，中間通過需要實現(xiàn)的圖形進行一個關(guān)鍵點計算却舀，來進行一個圖形繪制虫几。

多邊形繪制

- (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嘍挽拔！