IOS下实现高性能画板橡皮擦的办法

发布时间:2021-10-25 09:13:41

摘要

IOS下使用CAShapeLayer+UIBezierPath实现互动画板时橡皮擦的实现方式。


背景

要在IOS端做一个在线教育DEMO,集成音视频互动、PPT白板互动、聊天等功能。


画板实现

IOS画板有很多实现,主要有


DrawRect+UIBezierPath:实现比较简单,橡皮擦也好实现,但是CPU较高,内存消耗大。CAShapeLayer+UIBezierPath:性能较好,使用GPU绘制,内存占用也小,但是橡皮擦比较难实现。GLES:比较底层,开发要求较高。

综合以上各个方式的特点,产品中比较合适的方案是CAShapeLayer+UIBezierPath,绘制办法很简单:


为了支持多方不同的线色、线宽,每一笔都创建一个新的CAShapeLayer,每一笔都是覆盖绘制;使用UIBezierPath描述路径,并将path传递给CAShapeLayer;调用UIView.layer的addSublayer,将CAShapeLayer绘制到当前View上;缓存CAShapeLayer,在需要撤销一笔的时候只需要调用CAShapeLayer的removeFromSuperlayer,在需要重画一笔的时候重新调用UIView.layer的addSublayer。
橡皮擦实现

橡皮擦本质上跟画线是一样的动作,只是线色是背景色,如果没有背景图片,只需要把线色设置成背景色就可以实现橡皮功能。但是在有背景图片的场景下会比较麻烦,单一背景色会覆盖背景图片。这个时候需要把背景色设置成背景图片,但是需要进行一定的变换,否则橡皮擦的背景图片会发生翻转,以下是核心代码:


//创建一个新的Context
UIGraphicsBeginImageContext(self.frame.size);
//获得当前Context
CGContextRef context = UIGraphicsGetCurrentContext();
//CTM变换,调整坐标系,*重要*,否则橡皮擦使用的背景图片会发生翻转。
CGContextScaleCTM(context, 1, -1);
CGContextTranslateCTM(context, 0, -self.bounds.size.height);
//图片适配到当前View的矩形区域,会有拉伸
[image drawInRect:self.bounds];
//获取拉伸并翻转后的图片
UIImage *stretchedImg = UIGraphicsGetImageFromCurrentImageContext();
//将变换后的图片设置为背景色
[self setBackgroundColor:[[UIColor alloc] initWithPatternImage:stretchedImg]];
//View的图层设置为原始图片,这里会自动翻转,经过这步后图层显示和橡皮背景都设置为正确的图片。
self.layer.contents = (_Nullable id)image.CGImage;
UIGraphicsEndImageContext();

代码和注释已经说明一切,CAShapeLayer+UIBezierPath的橡皮擦实现实际上也比较简单,只要知道原理。


另外有人的实现方式是把所有的CAShapeLayer图层合并成一张图片,然后在合并后的图片里使用UIBeizerPath的strokeWithBlendMode:kCGBlendModeClear进行混色,这也是一种办法,但是混色占用的CPU也会很高,相对来说,使用背景图片来当橡皮擦的画刷,性能是较好的。

相关文档

  • 如何挑选阳澄湖大闸蟹?大闸蟹是母蟹好还是公蟹好
  • 创业者与职业经理人的区别
  • 车间关于安全的文章
  • 苹果手机微信卡住了
  • 哈工大战神数据库笔记
  • 杜鹃树下成长优秀作文
  • 风疹会不会传染人,风疹会传染吗
  • 2017年广东公务员面试题目及答案
  • 汽车的划痕如何自己动手处理?
  • 服装设计师个人原因辞职报告
  • 初二文言文:伤仲永教案设计
  • 经乱後将避地剡中留赠崔宣城
  • 传承国学经典读后感
  • 暑期诗情画意楠溪江自驾游攻略
  • 属牛的人性格和脾气详细介绍
  • 报送实施方案请示范文
  • 赵朴初书法字体
  • 军训心得体会范文450字
  • 特别伤感有意境的签名
  • 2019年清华大学公共管理学硕考研经验分享
  • 艺术设计插图图片手绘作品
  • 幽默段子爆笑简短逗人开心的句子大全爆笑幽默段子笑话发朋友圈
  • 十二星座天秤座的男人重感情吗
  • 华为mate20pro屏幕分辨率
  • 西梅含糖量高吗,孕妇可以吃西梅吗对胎儿有影响吗
  • android 线程池核心线程数的确定
  • 上夜班的说说与心情_上夜班的个性签名
  • 自己给自己写信
  • 描写友情的文艺优美句子
  • 北京公务员判断推理题及答案
  • 猜你喜欢

    电脑版