想要实现一个签字板的效果，比如这样：
Screen Shot 2022-09-04 at 10.04.41 AM.png
1、定义一个数组，记录手指路径，数组的一个元素标志一条曲线。每个元素包含：手指轨迹点，当前涂色，线宽
var lines:[[String:Any]] =Array()
let supportLineWidth = [1.0,2.0,3.0,4.0,5.0]
let supportColors = ["red","blue","gray","purple","yellow"]
2、重写系统方法 touchesBegan 和 touchesMoved 方法，在touchesBegan 方法中确定一条曲线及起点，在touchesMoved 方法中捕捉每个触摸点
override func touchesBegan(_ touches: Set, with event: UIEvent?) {
let touch = touches.first
var points:[CGPoint] = Array()
let point = touch?.location(in: self)
points.append(point!)
let dic = ["color":currentColor,"width":currentLineWidth,"points":points] as [String : Any]
lines.append(dic)
}
override func touchesMoved(_ touches: Set, with event: UIEvent?) {
let touch = touches.first
var dic = lines.last
var points = dic?["points"] as! [CGPoint]
let point = touch?.location(in: self)
points.append(point!)
dic?["points"] = points
lines.removeLast()
lines.append(dic!)
self.setNeedsDisplay()
}
3、重写系统方法 drawRect ，绘制曲线
数据结构：lines[["points":[point0,point1,...],
"width":3.0,
"color":"red"],...]
override func draw(_ rect: CGRect) {
super.draw(rect)
let ctx = UIGraphicsGetCurrentContext()
for dic in lines {
let points = dic["points"] as! Array
let besierPath = UIBezierPath()
for (index, point) in points.enumerated() {
if index == 0 {
besierPath.move(to: point)
}else{
besierPath.addLine(to: point)
}
}
>let width:Double = dic["width"] as! Double
let color:UIColor = dic["color"] as! UIColor
ctx?.addPath(besierPath.cgPath)
ctx?.setLineWidth(width)
ctx?.setStrokeColor(color.cgColor)
ctx?.strokePath()
}
}
4.最后加了一些可选的颜色及线宽按钮，其实完成前3步已经可以涂鸦了
完整代码：
import Foundation
import UIKit
class PFBlankBoard:UIViewController {
// 思路，根据touch方法，记录点的轨迹，然后在drawRact方法中画出来
override func viewDidLoad() {
super.viewDidLoad()
self.view.backgroundColor = .white
let board = BlankBoard(frame: self.view.bounds)
self.view.addSubview(board)
self.view.bringSubviewToFront(board)
}
}
class BlankBoard: UIView {
var lines:[[String:Any]] = Array()
let supportLineWidth = [1.0,2.0,3.0,4.0,5.0]
let supportColors = ["red","blue","gray","purple","yellow"]
var currentColor:UIColor?
var currentLineWidth:Double?
override init(frame: CGRect) {
super.init(frame: frame)
self.backgroundColor = .white
currentColor = UIColor.red
currentLineWidth = supportLineWidth.first!
self.initColorBtns()
self.initPenBtns()
self.initClearBtn()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
}
private func initColorBtns(){
for i in 0...4 {
let btn = colorsButton()
btn.backgroundColor = UIColor.lightGray
btn.setTitle(supportColors[i], for: .normal)
btn.setTitleColor(UIColor.colorWithHexString(supportColors[i]), for: .normal)
self.addSubview(btn)
btn.layer.cornerRadius = 10.0
btn.layer.masksToBounds = true
btn.snp.makeConstraints { make in
make.size.equalTo(CGSize(width: 75, height: 30))
make.bottom.equalTo(self).offset(-50)
make.left.equalTo(80*i + 10)
}
btn.tag = 2022 + i
btn.addTarget(self, action: #selector(colorBtnClick(_:)), for: .touchUpInside)
if i == 0 {
btn.choosed = true
}
}
}
private func initPenBtns(){
for i in 0...4 {
let btn = colorsButton()
btn.backgroundColor = UIColor.lightGray
btn.setTitle(String(supportLineWidth[i]), for: .normal)
btn.setTitleColor(UIColor.purple, for: .normal)
self.addSubview(btn)
btn.layer.cornerRadius = 15.0
btn.layer.masksToBounds = true
btn.snp.makeConstraints { make in
make.size.equalTo(CGSize(width: 30, height: 30))
make.bottom.equalTo(self).offset(-10)
make.left.equalTo(50*i + 60)
}
btn.tag = 3033 + i
btn.addTarget(self, action: #selector(widthBtnClick(_:)), for: .touchUpInside)
if i == 0 {
btn.choosed = true
}
}
}
private func initClearBtn(){
let btn = UIButton()
btn.setImage(UIImage(named: "clear_icon"), for: .normal)
self.addSubview(btn)
btn.addTarget(self, action: #selector(clearAction), for: .touchUpInside)
btn.snp.makeConstraints { make in
make.size.equalTo(CGSize(width: 30, height: 30))
make.bottom.equalToSuperview().offset(-10)
make.right.equalToSuperview().offset(-20.0)
}
self.bringSubviewToFront(btn)
}
override func touchesBegan(_ touches: Set, with event: UIEvent?) {
let touch = touches.first
var points:[CGPoint] = Array()
let point = touch?.location(in: self)
points.append(point!)
let dic = ["color":currentColor,"width":currentLineWidth,"points":points] as [String : Any]
lines.append(dic)
}
override func touchesMoved(_ touches: Set, with event: UIEvent?) {
let touch = touches.first
var dic = lines.last
var points = dic?["points"] as! [CGPoint]
let point = touch?.location(in: self)
points.append(point!)
dic?["points"] = points
lines.removeLast()
lines.append(dic!)
self.setNeedsDisplay()
}
override func draw(_ rect: CGRect) {
super.draw(rect)
let ctx = UIGraphicsGetCurrentContext()
for dic in lines {
let points = dic["points"] as! Array
let besierPath = UIBezierPath()
for (index, point) in points.enumerated() {
if index == 0 {
besierPath.move(to: point)
}else{
besierPath.addLine(to: point)
}
}
let width:Double = dic["width"] as! Double
let color:UIColor = dic["color"] as! UIColor
ctx?.addPath(besierPath.cgPath)
ctx?.setLineWidth(width)
ctx?.setStrokeColor(color.cgColor)
ctx?.strokePath()
}
}
@objc func colorBtnClick(_ sender:UIButton) {
for subViews in self.subviews {
if subViews.isKind(of: colorsButton.self) && subViews.tag >= 2022 && subViews.tag <= 2026{
(subViews as! colorsButton).choosed = false
}
}
(sender as! colorsButton).choosed = true
let index = sender.tag - 2022
currentColor = UIColor.colorWithHexString(supportColors[index])
}
@objc func widthBtnClick(_ sender: UIButton) {
for subViews in self.subviews {
if subViews.isKind(of: colorsButton.self) && subViews.tag >= 3033 && subViews.tag <= 3037{
(subViews as! colorsButton).choosed = false
}
}
(sender as! colorsButton).choosed = true
let index = sender.tag - 3033
currentLineWidth = supportLineWidth[index]
}
@objc func clearAction(){
self.lines.removeAll()
self.setNeedsDisplay()
}
}
class colorsButton: UIButton {
private var _choosed: Bool = false
var choosed:Bool {
set {
if newValue == true {
self.backgroundColor = UIColor.init(red: 233/255.0, green: 200/255.0, blue: 100/255.0, alpha: 1.0)
}else{
self.backgroundColor = UIColor.lightGray
}
_choosed = newValue
}
get{
return _choosed
}
}
}