iOS绘图教程

第一章 - 点亮画板

画出自己的世界，让想象和创造力翱翔于画布之上。在iOS开发中，绘图是一个强大而有趣的技能。本教程将带你一步步学习如何在iOS应用中实现绘图功能。

第一节 - 创建画布

在你的iOS应用中，创建一个画布是第一步。我们将使用Core Graphics框架，它提供了丰富的绘图功能。

import UIKit



class CanvasView: UIView {

 override func draw(_ rect: CGRect) {

•    super.draw(rect)

•    // 在这里实现绘图逻辑

 }

}

创建一个名为CanvasView的自定义视图，并在draw(_:)方法中实现绘图逻辑。现在，我们已经准备好了自己的画布。

第二节 - 绘制形状

接下来，让我们开始绘制一些基本的形状，如线条、矩形和圆形。

1. 绘制线条

override func draw(_ rect: CGRect) {

 super.draw(rect)

 

 guard let context = UIGraphicsGetCurrentContext() else { return }

 

 context.move(to: CGPoint(x: 20, y: 20))

 context.addLine(to: CGPoint(x: 200, y: 20))

 context.setStrokeColor(UIColor.red.cgColor)

 context.setLineWidth(2)

 context.strokePath()

}

在draw(_:)方法中，我们通过UIGraphicsGetCurrentContext()获取当前的上下文。然后，我们使用move(to:)和addLine(to:)方法定义线条的起点和终点，并使用setStrokeColor(_:)设置线条的颜色，setLineWidth(_:)设置线条的宽度，最后使用strokePath()绘制线条。

2. 绘制矩形

override func draw(_ rect: CGRect) {

 super.draw(rect)

 

 guard let context = UIGraphicsGetCurrentContext() else { return }

 

 let rectangle = CGRect(x: 50, y: 50, width: 150, height: 100)

 context.addRect(rectangle)

 context.setFillColor(UIColor.blue.cgColor)

 context.fill(rectangle)

}

在绘制矩形时，我们使用addRect(_:)方法定义矩形的位置和大小，然后使用setFillColor(_:)设置填充颜色，最后使用fill(_:)填充矩形。

3. 绘制圆形

override func draw(_ rect: CGRect) {

 super.draw(rect)

 

 guard let context = UIGraphicsGetCurrentContext() else { return }

 

 let center = CGPoint(x: 100, y: 100)

 let radius: CGFloat = 50

 context.addArc(center: center, radius: radius, startAngle: 0, endAngle: CGFloat.pi * 2, clockwise: true)

 context.setFillColor(UIColor.green.cgColor)

 context.fillPath()

}

绘制圆形时，我们使用addArc(center:radius:startAngle:endAngle:clockwise:)方法定义圆心、半径和起始角度、终止角度，然后使用setFillColor(_:)设置填充颜色，最后使用fillPath()填充圆形。

第三节 - 绘制文本

在绘图中，文字是传递信息和表达情感的重要元素。让我们学习如何在画布上绘制文本。

override func draw(_ rect: CGRect) {

 super.draw(rect)

 

 guard let context = UIGraphicsGetCurrentContext() else { return }

 

 let text = "Hello, iOS Drawing!"

 let font = UIFont.systemFont(ofSize: 20)

 let attributes: [NSAttributedString.Key: Any] = [

•    .font: font,

•    .foregroundColor: UIColor.red

 ]

 let attributedText = NSAttributedString(string: text, attributes: attributes)

 attributedText.draw(at: CGPoint(x: 50, y: 50))

}

在draw(_:)方法中，我们使用UIGraphicsGetCurrentContext()获取当前上下文。然后，我们创建一个文本字符串text和字体font，并使用NSAttributedString创建具有指定属性的富文本。最后，使用draw(at:)方法将文本绘制到画布上。

第四节 - 添加交互

让我们提升绘图的乐趣，为画布添加交互功能。让用户通过手势或触摸，在画布上绘制图形。

import UIKit



class CanvasView: UIView {

 var lines: [Line] = []

 var currentLine: Line?

 

 override func draw(_ rect: CGRect) {

•    super.draw(rect)

•    

•    guard let context = UIGraphicsGetCurrentContext() else { return }

•    

•    for line in lines {

•      context.move(to: line.start)

•      context.addLine(to: line.end)

•      context.setStrokeColor(line.color.cgColor)

•      context.setLineWidth(line.width)

•      context.strokePath()

•    }

•    

•    if let line = currentLine {

•      context.move(to: line.start)

•      context.addLine(to: line.end)

•      context.setStrokeColor(line.color.cgColor)

•      context.setLineWidth(line.width)

•      context.strokePath()

•    }

 }

 

 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

•    guard let touch = touches.first else { return }

•    let location = touch.location(in: self)

•    currentLine = Line(start: location, end: location, color: UIColor.black, width: 2)

 }

 

 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

•    guard let touch = touches.first else { return }

•    let location = touch.location(in: self)

•    currentLine?.end = location

•    setNeedsDisplay()

 }

 

 override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {

•    guard let line = currentLine else { return }

•    lines.append(line)

•    currentLine = nil

 }

}



struct Line {

 var start: CGPoint

 var end: CGPoint

 var color: UIColor

 var width: CGFloat

}

在CanvasView中，我们添加了一个lines数组来存储已绘制的线条。在draw(_:)方法中，我们通过循环遍历lines数组，并使用move(to:)和addLine(to:)方法绘制已保存的线条。

在touchesBegan(_:with:)方法中，我们在触摸开始时获取触摸点的位置，并创建一个新的Line对象来表示当前的线条。在touchesMoved(_:with:)方法中，我们更新当前线条的结束点，并使用setNeedsDisplay()方法触发视图的重绘。在touchesEnded(_:with:)方法中，我们将当前线条保存到lines数组中，并将currentLine设置为nil。

现在，你可以通过触摸画布，在画布上绘制线条了。

第五节 - 创造无限可能

现在，你已经掌握了iOS绘图的基本技巧。通过组合使用各种绘制方法，你可以创造出丰富多彩的图形，实现自己的绘图创意。

不仅如此，你还可以探索更多高级的绘图技术，如渐变、阴影、图片合成等，使你的绘图更加精美和生动。

绘图是一门艺术，也是一门技术。通过不断的练习和尝试，你将不断进步，展现出你独特的绘图风格和创造力。

愿你在iOS绘图的世界中，创造出属于自己的艺术之美！让你的应用焕发出色彩斑斓的光芒，为用户带来愉悦和惊喜。

无论是绘制简单的几何形状，还是创作复杂的图像，都将是你在iOS开发中的宝贵技能和创造力的体现。

继续前行，探索更多绘图的奥秘，让你的应用在画布上绽放无限的可能！