正文

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

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0702

这篇文章主要给大家介绍了关于iOS如何开发简单的手绘应用的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

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

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

框架是 Quartz2D

1， 收集点

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

  • 用户按下手指

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

?
1
2
3
4
5
6
7
8
9
10
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)
 }
  • 用户移动手指
?
1
2
3
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
 // ...
}
  • 用户抬起手指
?
1
2
3
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
  // ...
 }

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

开辟一块绘图上下文 UIGraphicsGetCurrentContext，

使用采集的点连线

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
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，并用变量保存下最新的图片

?
1
2
3
4
5
6
7
8
9
10
11
12
13
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, 画笔设置

修改画笔颜色和粗细

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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 ，

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

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

就成了橡皮擦

?
1
2
3
4
5
6
7
8
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 ) 的时候，画布很大，

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

?
1
2
3
4
tempImageView.image?.draw(in: view.bounds)
// ...
 
tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()

绘制一次，需要约 0.07 秒，

?
1
2
3
4
5
6
let t = Date()
self.drawingImage()
if #available(iOS 13.0, *) {
 let span = t.distance(to: Date())
 print(span)
}

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

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

移动一下，绘制一次

?
1
2
3
4
5
6
7
8
9
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 次全画板绘制

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

?
1
2
3
4
tempImageView.image?.draw(in: view.bounds)
// ...
 
tempImageView.image = UIGraphicsGetImageFromCurrentImageContext()

前 4 点的代码，见 github

后续需要整理，tbd

总结

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

原文链接：https://segmentfault.com/a/1190000023903162