CAShapeLayer画板

参考:CAShapeLayer - 绘图板

由于参考的文章代码的线条是写死的,所有对于画板的需求来说,还是不太好用,所以自己写了个Demo
直接上代码了:
<code>

 @interface ViewController ()

 @property (nonatomic, strong, nullable) NSMutableArray * drawPaths;
 @property (nonatomic, strong, nullable) NSMutableArray * drawLayers;

 @end

 @implementation ViewController

- (void)viewDidLoad {
        [super viewDidLoad];
        UIButton * clearBtn = [[UIButton alloc]
          initWithFrame:CGRectMake(self.view.bounds.size.width - 100, 44, 100, 50)];
        clearBtn.backgroundColor = [UIColor grayColor];
        [clearBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
        [clearBtn setTitle:@"clear" forState:UIControlStateNormal];
        clearBtn.tag = 1;
        [clearBtn addTarget:self action:@selector(backOrClear:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview: clearBtn];
        UIButton * backBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 44, 100, 50)];
        backBtn.backgroundColor = [UIColor grayColor];
        [backBtn setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
        [backBtn setTitle:@"back" forState:UIControlStateNormal];backBtn.tag = 2;
        [backBtn addTarget:self action:@selector(backOrClear:) forControlEvents:UIControlEventTouchUpInside];
        [self.view addSubview: backBtn];
  }
  - (void)backOrClear:(UIButton *)sender{
        switch (sender.tag) {
              case 1:{
                    for (CAShapeLayer * layer in self.drawLayers) {
                          [layer removeFromSuperlayer];
                    }
                    self.drawLayers = nil;
                    [self.drawPaths removeAllObjects];
              }
              break;
              default:{
                    CAShapeLayer * layer = self.drawLayers.lastObject;
                    [layer removeFromSuperlayer];
                    [self.drawLayers removeLastObject];
              }
              break;
        }
  }
  - (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{ 
          [super touchesBegan:touches withEvent:event]; 
          UIBezierPath * path = [UIBezierPath bezierPath];  
          [path moveToPoint:[[touches anyObject] locationInView:self.view]];   
          CAShapeLayer *layer = [CAShapeLayer layer];    
          layer.backgroundColor = [UIColor clearColor].CGColor;  
          layer.frame = self.view.bounds;  
          layer.path = path.CGPath;   
          layer.lineWidth = 3.0f;   
          layer.strokeColor = [UIColor redColor].CGColor;  
          layer.miterLimit = 2.;   
          layer.lineDashPhase = 10;   
          layer.lineDashPattern = @[@1,@0];   
          layer.fillColor = [UIColor clearColor].CGColor;
          layer.fillRule = kCAFillRuleEvenOdd;    
          layer.lineCap = kCALineCapRound;   
          layer.lineJoin = kCALineJoinRound;    // 结合 CABasicAnimation 可以变成 动画绘制    // 将layer添加进图层   
          [self.view.layer addSublayer:layer];   
          [self.drawPaths addObject:path];   
          [self.drawLayers addObject:layer];   
 }    
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{  
          [super touchesMoved:touches withEvent:event];                      
          UIBezierPath * path = self.drawPaths.lastObject;      
          CAShapeLayer * layer = self.drawLayers.lastObject;                    
          [path addLineToPoint:[[touches anyObject] locationInView:self.view]];       
          layer.path = path.CGPath;      
}        
- (NSMutableArray *)drawPaths{      
   if (_drawPaths == nil) {     
       _drawPaths = [NSMutableArray array];     
   }       
   return _drawPaths;      
}       
- (NSMutableArray *)drawLayers{     
    if (_drawLayers == nil) {       
          _drawLayers = [NSMutableArray array];    
    }      
    return _drawLayers;   
}

</code>

有人可能会问了,这么写,会不会有问题,为什么不用一个UIBezierPath曲线画,我是这样考虑的:
1.一条曲线渲染速度太慢,画的越多,渲染的速度越慢.会造成延时渲染的效果.这个是我跳入的坑,刚爬出来.
2.对于画板的需求来说,回撤的可能是非常大的.一条曲线不容易操作
对于一条曲线来说,如果渲染慢的话,还是可以解决的,不过要调用,layer的-setNeedsDisplayInRect:方法对touch附近的区域进行渲染,这个继续研究

有不明白的欢迎下载Demo

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 214,313评论 6 496
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,369评论 3 389
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 159,916评论 0 349
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,333评论 1 288
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,425评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,481评论 1 292
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,491评论 3 412
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,268评论 0 269
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,719评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,004评论 2 328
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,179评论 1 342
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,832评论 4 337
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,510评论 3 322
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,153评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,402评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,045评论 2 365
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,071评论 2 352

推荐阅读更多精彩内容

  • 前言:关于贝塞尔曲线与CAShapeLayer的学习 学习Demo演示: 贝塞尔曲线简单了解 使用UIBezier...
    麦穗0615阅读 17,865评论 18 149
  • (一) 国君自焚,宫人尽数逃离,夜,从所未有的安静。偶尔扬起的风隐隐夹杂着血腥味,如地狱般的可怖,暗示着那场刚刚结...
    何潇湘阅读 1,153评论 4 48
  • 雄雉于飞 新月山庄位处杭州东北,庄内规矩森严,门内弟子很少踏出庄外。 山庄庄主花子缎死后,众弟子纷纷逃散,青龙会随...
    一束冬阳阅读 710评论 0 0
  • 首先咱们弄清楚,TCP协议和UCP协议与TCP/IP协议的联系,很多人犯糊涂了,一直都是说TCP/IP协议与UDP...
    莫要戏言阅读 1,284评论 0 0
  • 我,一个90后女生。毕业两年,工作两年。生活在一个陌生而又熟悉的城市里,所有面对的一切让我学会了独立和坚强。 以前...
    不二其实有点二阅读 260评论 0 0