iOS如何开发简单的手绘应用实例详解

开发一款简单的 iOS 手绘应用,

收集点,绘制形状,给形状着色,呈现给用户,好像就完了

框架是 Quartz2D

1, 收集点

首先需要有一个界面 UIView, 用这个界面监听用户的手势,收集点

  • 用户按下手指

location(in, 从触摸事件中,获得在画板中的坐标

var lastPoint = CGPoint.zero

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
 guard let touch = touches.first else {
 return
 }
 // ...
 lastPoint = touch.location(in: view)
 }
  • 用户移动手指
 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
  // ...
 }
  • 用户抬起手指
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
  // ...
 }
 

2, 绘制形状,给形状着色

开辟一块绘图上下文 UIGraphicsGetCurrentContext,

使用采集的点连线

用户手绘的不是一段连续的曲线,是很多个线段拼接起来的

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
 UIGraphicsBeginImageContext(view.frame.size)
 guard let context = UIGraphicsGetCurrentContext() else {
 return
 }
 // ...
 // 绘制
 context.move(to: fromPoint)
 context.addLine(to: toPoint)

 context.setLineCap(.round)
 context.setBlendMode(.normal)
 context.setLineWidth(brushWidth)
 context.setStrokeColor(color.cgColor)

 context.strokePath()
 // ...

 UIGraphicsEndImageContext()
 }

3, 呈现给用户

第一步使用的 UIView 是 UIImageView,

  • 绘制就是画一小段,取出画好的图片,赋给 UIImageView,我们就看到了
  • 连续的绘制,是画一小段,取出画好的图片,赋给 UIImageView,并用变量保存下最新的图片

接着画,先把刚才的图片变量绘制一遍,再画一小段,取出画好的图片,赋给 UIImageView,并用变量保存下最新的图片

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
 UIGraphicsBeginImageContext(view.frame.size)
 guard let context = UIGraphicsGetCurrentContext() else {
 return
 }
 tempImageView.image?.draw(in: view.bounds)

 // 绘制 ...

 tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()

 UIGraphicsEndImageContext()
}

4, 画笔设置

修改画笔颜色和粗细

func drawLine(from fromPoint: CGPoint, to toPoint: CGPoint) {
 UIGraphicsBeginImageContext(view.frame.size)
 guard let context = UIGraphicsGetCurrentContext() else {
 return
 }

 // ...

 context.setBlendMode(.normal)

 // 调颜色
 context.setLineWidth(brushWidth)
 // 调粗细
 context.setStrokeColor(color.cgColor)
 // ...
}

画笔变橡皮擦

  • 方法一,把画笔的颜色,调成画板的颜色,就成了橡皮擦
  • 方法 2 ,

把画笔的颜色,调成透明,

把绘图上下文的混色模式改掉

就成了橡皮擦

  switch type {
  case .pencil, .none:
   context.setBlendMode(.color)
  case .eraser:
   context.setLineWidth(15)
   context.setStrokeColor(UIColor.clear.cgColor)
   context.setBlendMode(.clear)
  }

5,后续

更多功能:

加入文本输入功能,

需要一个文本框控件 UITextField、 UITextView

文本框控件一般可以拖动,

文本框放在画布上,拖出画布了,有些问题。

这时候要做一个边界检测

性能优化:

一般性能优化,就是打印函数的执行时间

当画布的大小为 1366 X 7700 ( iPad Pro + UIScrollView ) 的时候,画布很大,

全部绘制一遍,并取出图片,性能消耗很大

 tempImageView.image?.draw(in: view.bounds)
 // ...

 tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()

绘制一次,需要约 0.07 秒,

 let t = Date()
 self.drawingImage()
 if #available(iOS 13.0, *) {
  let span = t.distance(to: Date())
  print(span)
 }

我们期望 60 的 FPS, 每一帧计算时间 0.016, 所以频繁调用该方法,卡得厉害

之前的方法是一个点,一个点的绘制

移动一下,绘制一次

 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
 guard let touch = touches.first else {
  return
 }
 swiped = true
 let currentPoint = touch.location(in: view)
 drawLine(from: lastPoint, to: currentPoint)
 lastPoint = currentPoint
 }

画一段线, func touchesMoved() ,一般可以触发 30 ~ 60 次,收集的点比较多,线条柔和

此时频繁调用该消耗性能方法,

只能触发 6 次,画一段只能采集 6 个点,正常手速,就画出来一个多边形

可以这样优化,点的收集与绘制分离

使用一个 Timer ,每隔 0.15 秒,绘制一次

原本收集点,是一个 CGPoint, 现在收集点,是一个 [CGPoint]

  • 原本画一次之前的 image, 连一根线,更新图片变量并呈现

n 个点, 来 n 次全画板绘制

  • 现在画一次之前的 image, 连接多根线,更新图片变量并呈现

n 个点, 来 1 次全画板绘制

消耗性能的方法,少调用,就对了

 tempImageView.image?.draw(in: view.bounds)
 // ...

 tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()

前 4 点的代码,见 github

后续需要整理,tbd

总结

到此这篇关于iOS如何开发简单的手绘应用的文章就介绍到这了,更多相关iOS开发手绘应用内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • iOS如何开发简单的手绘应用实例详解

    开发一款简单的 iOS 手绘应用, 收集点,绘制形状,给形状着色,呈现给用户,好像就完了 框架是 Quartz2D 1, 收集点 首先需要有一个界面 UIView, 用这个界面监听用户的手势,收集点 用户按下手指 location(in, 从触摸事件中,获得在画板中的坐标 var lastPoint = CGPoint.zero override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { guard l

  • IOS开发之字典转字符串的实例详解

    IOS开发之字典转字符串的实例详解 在实际的开发需求时,有时候我们需要对某些对象进行打包,最后拼接到参数中 例如,我们把所有的参数字典打包为一个 字符串拼接到参数中 思路:利用系统系统JSON序列化类即可,NSData作为中间桥梁 //1.字典转换为字符串(JSON格式),利用 NSData作为桥梁; NSDictionary *dic = @{@"name":@"Lisi",@"sex":@"m",@"tel&qu

  • IOS 改变导航栏返回按钮的标题实例详解

    IOS 改变导航栏返回按钮的标题实例详解 前言: 下午又找到了一个新的方法 这个方法不错 暂时没有发现异常的地方. 新写的App中需要使用UINavigationController对各个页面进行导航,但由于第一级页面的title较长,在进入第二级页面后返回按钮leftButtonItem的title就会变得很长,对NavigationBar空间占用很大,而且不美观,于是使用代码对leftButtonItem的title文本进行修改,无论是设置self.navigationItem.leftBa

  • JSP开发中Apache-HTTPClient 用户验证的实例详解

    JSP开发中Apache-HTTPClient 用户验证的实例详解 前言: 在微服务框架之外的系统中,我们经常会遇到使用httpClient进行接口调用的问题,除了进行白名单的设置,很多时候我们需要在接口调用的时候需要身份认证.翻了一下官方文档,解决方法很多,但是都不太符合实际业务场景,这里提供一种简单粗暴的解决方法. 解决方法:利用请求头,将验证信息保存起来. 实现代码: public class HttpClientUtils { protected static final Logger

  • Android开发高仿课程表的布局实例详解

    先说下这个demo,这是一个模仿课程表的布局文件,虽然我是个菜鸟,但我还是想留给学习的人一些例子,先看下效果 然后再来看一下我们学校的app 布局分析 先上一张划分好了的布局图 首先整个页面放在一个LinearLayout布局下面,分为上面和下面两个部分,下面一个是显示课程表的详细信息 1:这个没什么好讲的,就是直接一个LinearLayout布局,然后将控件一个TextView用来显示年份,一个View用来当作竖线,一个Spinner用来显示选择周数 2:这个是显示星期几的部件,是我自定义的V

  • vue开发设计分支切换与cleanup实例详解

    目录 分支切换与cleanup 了解分支切换 分支切换导致的问题 如何清除掉副作用函数的无效关联关系? 疑问:为什么对传入的副作用函数进行一层包裹? 完整代码 产生的问题:代码运行发生栈溢出 如何解决此种情况下的栈溢出? 嵌套的effect与effect栈 effect嵌套的场景? 初始化 原因: 支持嵌套 避免无限递归循环 产生无限递归循环的代码: 原因分析: 解决循环 完整代码 分支切换与cleanup 了解分支切换 代码示例如下 const data = { ok: true, text:

  • Flutter开发之对角棋游戏实现实例详解

    目录 前沿 演示效果 对角棋规则 实现思路 具体实现 1. 绘制棋盘 2. 绘制棋子 3. 手势处理 4. 游戏规则 优化 总结 前沿 关于对角棋相信大家都不陌生,其凭借着规则简单又灵活多变成为我们童年不可缺少的益智游戏. 今天我将用Flutter来实现一个对角棋游戏,即巩固自己Flutter的绘制和手势知识,也希望这篇文章对大家有所帮助. 演示效果 老规矩,我们先演示下实现的最终效果: 对角棋规则 首先我们还是回顾下对角棋游戏的规则,这里借用 百度百科 的规则说明: 棋盘:象棋棋盘中,将士所在

  • IOS自带Email的两种方法实例详解

    IOS自带Email的两种方法实例详解 IOS系统框架提供的两种发送Email的方法:openURL 和 MFMailComposeViewController.借助这两个方法,我们可以轻松的在应用里加入如用户反馈这类需要发送邮件的功能. 1.openURL 使用openURL调用系统邮箱客户端是我们在IOS3.0以下实现发邮件功能的主要手段.我们可以通过设置url里的相关参数来指定邮件的内容,不过其缺点很明显,这样的过程会导致程序暂时退出.下面是使用openURL来发邮件的一个小例子: #pr

  • Swift 开发之懒加载的实例详解

    Swift 开发之懒加载的实例详解 /// A display link that keeps calling the `updateFrame` method on every screen refresh. private lazy var displayLink: CADisplayLink = { self.isDisplayLinkInitialized = true let displayLink = CADisplayLink(target: TargetProxy(target:

  • IOS 避免self循环引用的方法的实例详解

    IOS 避免self循环引用的方法的实例详解 示例代码: // - weak & strong #define myWeakify(VAR) \ try {} @finally {} \ __weak __typeof__(VAR) VAR##_myWeak_ = (VAR) #define myStrongify(VAR) \ try {} @finally {} \ __strong __typeof__(VAR) VAR = VAR##_myWeak_ #define myStrongif

随机推荐