{"id":22065113,"url":"https://github.com/wilddylan/drawboarddemo","last_synced_at":"2025-03-23T18:15:21.551Z","repository":{"id":33920887,"uuid":"37640968","full_name":"wilddylan/DrawBoardDemo","owner":"wilddylan","description":"DrawBoardDemo","archived":false,"fork":false,"pushed_at":"2015-06-18T06:12:29.000Z","size":148,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-29T00:25:31.110Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Objective-C","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wilddylan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-06-18T06:10:45.000Z","updated_at":"2016-10-25T02:00:25.000Z","dependencies_parsed_at":"2022-09-13T22:52:22.495Z","dependency_job_id":null,"html_url":"https://github.com/wilddylan/DrawBoardDemo","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddylan%2FDrawBoardDemo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddylan%2FDrawBoardDemo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddylan%2FDrawBoardDemo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wilddylan%2FDrawBoardDemo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wilddylan","download_url":"https://codeload.github.com/wilddylan/DrawBoardDemo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245144973,"owners_count":20568056,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-30T19:15:06.138Z","updated_at":"2025-03-23T18:15:21.518Z","avatar_url":"https://github.com/wilddylan.png","language":"Objective-C","funding_links":[],"categories":[],"sub_categories":[],"readme":"# DrawBoardDemo\n\nUIBezierPath 简介:\n\n使用`UIBezierPath`类可以创建基于矢量的路径。此类是`Core Graphics`框架关于path的一个封装。使用此类可以定义简单的形状，如椭圆或者矩形，或者有多个直线和曲线段组成的形状。\n    \n1.Bezier Path 基础\n   `UIBezierPath`对象是CGPathRef数据类型的封装。path如果是基于矢量形状的，都用直线和曲线段去创建。我们使用直线段去创建矩形和多边形，使用曲线段去创建弧（arc），圆或者其他复杂的曲线形状。每一段都包括一个或者多个点，绘图命令定义如何去诠释这些点。每一个直线段或者曲线段的结束的地方是下一个的开始的地方。每一个连接的直线或者曲线段的集合成为subpath。一个`UIBezierPath`对象定义一个完整的路径包括一个或者多个subpaths。\n\n   创建和使用一个path对象的过程是分开的。创建path是第一步，包含一下步骤：\n- 创建一个path对象。\n- 使用方法`moveToPoint:`去设置初始线段的起点。\n- 添加line或者curve去定义一个或者多个subpaths。\n- 改变`UIBezierPath`对象跟绘图相关的属性。例如，我们可以设置`stroked path`的属性`lineWidth`和`lineJoinStyle`。也可以设置filled path的属性`usesEvenOddFillRule`。\n\n   当创建path，我们应该管理path上面的点相对于原点（0，0），这样我们在随后就可以很容易的移动path了。为了绘制path对象，我们要用到stroke和fill方法。这些方法在`current graphic context`下渲染path的line和curve段。\n\n\n2.在path下面添加线或者多边形。\n线和多边形是一些简单的形状，我们可以用`moveToPoint:`或者`addLineToPoint:`方法去构建。方法`moveToPoint:`设置我们想要创建形状的起点。从这点开始，我们可以用方法`addLineToPoint:`去创建一个形状的线段。我们可以连续的创建line，每一个line的起点都是先前的终点，终点就是指定的点。\n\n逻辑构造：\nDLPaintView: 画板\nDLDrawShape: 工具\n\n我这里只实现了3中工具 矩形 椭圆 线 线宽 颜色, 还有很多的工具大家可以自己加了试一下。 按照官方的注释。\n\n```objc\n```\n\nDLPaint.h\n\n```objc\n#import \"DLDarwShape.h\"\n\n//! @abstract DLPaint View\n@interface DLPaintView : UIView\n\n//! @abstract Shape Array With Shape objects\n\n/*!\n *  Add New Shape Object When Touch begin, Change ShapeObject.bezierPath.\n */\n@property (nonatomic, strong) NSMutableArray *allShape;\n\n//! @abstract Darw Shape type\n@property (nonatomic, assign) DLPaintShapeType dType;\n\n//! @abstract Darw Line Width\n@property (nonatomic, assign) CGFloat lineWidth;\n\n//! @abstract Draw Linw Color\n@property (nonatomic, strong) UIColor * drawColor;\n\n/*!\n *  un do last step\n */\n- (void)backout;\n\n/*!\n *  clean white board\n */\n- (void)cleanBoard;\n\n@end\n\n```\n\nDLPaintView.m\n\n```objc\n#import \"DLPaintView.h\"\n#import \"DLDarwShape.h\"\n\n@implementation DLPaintView\n\n- (instancetype)initWithFrame:(CGRect)frame {\n    \n    self = [super initWithFrame:frame];\n    if (self) {\n        \n        [self DefaultInit];\n    }\n    return self;\n}\n\n- (void)awakeFromNib {\n    \n    [self DefaultInit];\n}\n\n- (void)DefaultInit {\n    \n    _dType = DLPAINT_LINE;\n    _lineWidth = 2;\n    _drawColor = [UIColor blackColor];\n}\n\n// - //\n\n- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {\n    \n    CGPoint startPoint = [[touches anyObject] locationInView:self];\n    DLDarwShape * shape = [[DLDarwShape alloc] initWithStartPoint:startPoint paintType:_dType color:_drawColor lineWidth:_lineWidth];\n    \n    [_allShape addObject:shape];\n}\n\n- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {\n    \n    CGPoint currentPoint = [[touches anyObject] locationInView:self];\n    [DLDrawPointHandle OperateShapeAction:_allShape.lastObject currentPoint:currentPoint];\n    \n    [self setNeedsDisplay];\n}\n\n// - //\n\n- (void)drawRect:(CGRect)rect {\n    \n    [self.allShape enumerateObjectsUsingBlock:^(DLDarwShape * ShapeObject, NSUInteger idx, BOOL *stop) {\n        \n        [ShapeObject Draw];\n    }];\n}\n\n- (void)backout {\n    \n    [self.allShape removeLastObject];\n    [self setNeedsDisplay];\n}\n\n- (void)cleanBoard {\n    \n    [self.allShape removeAllObjects];\n    [self setNeedsDisplay];\n}\n\n- (NSMutableArray *)allShape {\n    \n    if (!_allShape) {\n        \n        _allShape = [NSMutableArray array];\n    }\n    \n    return _allShape;\n}\n\n@end\n\n```\n\nDLDrawShape:\n\n.h\n\n```objc\n#import \u003cFoundation/Foundation.h\u003e\n#import \u003cUIKit/UIKit.h\u003e\n\ntypedef NS_OPTIONS(NSUInteger, DLPaintShapeType){\n\n    DLPAINT_LINE = 1UL \u003c\u003c 0,\n    DLPAINT_RECT = 1UL \u003c\u003c 1,\n    DLPAINT_OVAL = 1UL \u003c\u003c 2\n};\n\n//! @abstract Shape Base Object\n@interface DLDarwShape : NSObject\n\n//! @abstract stroke Color for shape obejct\n@property (nonatomic, strong) UIColor *strokeColor;\n\n//! @abstract Stroke width for shape object\n@property (nonatomic, assign) CGFloat strokewidth;\n\n//! @abstract Shape Start point\n@property (nonatomic, assign) CGPoint startPoint;\n\n//! @abstract The bezier\n@property (nonatomic, retain) UIBezierPath *bezierPath;\n\n//! @abstract Type\n@property (nonatomic, assign) DLPaintShapeType paintType;\n\n//! @abstract path array\n@property (nonatomic, strong) NSMutableArray * pathArray;\n\n/*!\n *  Load Shape With start point and type\n *\n *  @param start     touch begin Point\n *  @param pType     shape type\n *  @param color     shape object . bezierPath strokeColor\n *  @param lineWidth shape object . bezierPath strokewidth\n *\n *  @return instance for shape object\n */\n- (instancetype)initWithStartPoint: (CGPoint)start\n                         paintType: (DLPaintShapeType)pType\n                             color: (UIColor *)color\n                         lineWidth: (CGFloat)strokeWidth;\n/*!\n *  Draw\n */\n- (void)Draw;\n\n@end\n\n@interface DLDrawPointHandle : NSObject\n\n/*!\n *  Handle Shape Object Action\n *\n *  @param shape   Shape Object\n *  @param cuPoint current point, When Touch moved\n */\n+ (void)OperateShapeAction: (DLDarwShape *)shape currentPoint: (CGPoint)cuPoint;\n\n@end\n\n```\n\n.m\n\n```objc\n#import \"DLDarwShape.h\"\n\n@implementation DLDarwShape\n\n- (instancetype)initWithStartPoint: (CGPoint)start\n                         paintType: (DLPaintShapeType)pType\n                             color: (UIColor *)color\n                         lineWidth: (CGFloat)strokeWidth {\n    \n    \n    self = [super init];\n    if (self) {\n        \n        _startPoint = start;\n        _paintType = pType;\n        \n        _strokeColor = color;\n        _strokewidth = strokeWidth;\n        \n        _bezierPath = [UIBezierPath bezierPath];\n        \n        [_bezierPath setLineJoinStyle:kCGLineJoinRound];\n        [_bezierPath setLineCapStyle:kCGLineCapRound];\n        [_bezierPath moveToPoint:_startPoint];\n    }\n    return self;\n}\n\n- (NSMutableArray *)pathArray {\n    \n    if (!_pathArray) {\n        _pathArray = [NSMutableArray array];\n    }\n    return _pathArray;\n}\n\n- (void)Draw {\n    \n    [_strokeColor setStroke];\n    _bezierPath.lineWidth = _strokewidth;\n    [_bezierPath stroke];\n}\n\n@end\n\n@implementation DLDrawPointHandle\n\n+ (void)OperateShapeAction:(DLDarwShape *)shape currentPoint:(CGPoint)cuPoint {\n    \n    switch (shape.paintType) {\n        case DLPAINT_LINE:\n            \n            [shape.bezierPath addLineToPoint:cuPoint];\n            break;\n        case DLPAINT_OVAL:\n            \n            shape.bezierPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(shape.startPoint.x, shape.startPoint.y, cuPoint.x - shape.startPoint.x, cuPoint.y - shape.startPoint.y)];\n            break;\n            \n        case DLPAINT_RECT:\n            \n            shape.bezierPath = [UIBezierPath bezierPathWithRect:CGRectMake(shape.startPoint.x, shape.startPoint.y, cuPoint.x - shape.startPoint.x, cuPoint.y - shape.startPoint.y)];\n            break;\n            \n        default:\n            break;\n    }\n    \n    [shape.pathArray addObject:[NSValue valueWithCGPoint:cuPoint]];\n}\n\n@end\n\n```\n\n效果： \n\n\n![屏幕快照 2015-06-18 下午2.09.31.png](http://upload-images.jianshu.io/upload_images/144590-e7601b323adfb212.png)\n\n\ncopyRight@Wild Dylan. 2015-6-18\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilddylan%2Fdrawboarddemo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwilddylan%2Fdrawboarddemo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwilddylan%2Fdrawboarddemo/lists"}