用Swift用Core Graphics画一个月亮

2024-01-11 07:17:05

探索月亮的几何魅力：使用 Swift 和 Core Graphics 巧夺天工

准备好踏上一次迷人的旅程，探索如何运用 Swift 和 Core Graphics 的强大功能，将月亮的迷人光辉跃然于屏幕之上吧！我们将深入探究月亮的几何构造，逐步绘制其迷人的弧线，并巧妙地运用阴影和高光，赋予其逼真的立体感。

理解月亮的几何形状

月亮展现在我们眼前的，仅仅是地球上可见的一半。因此，为了绘制出一个逼真的月亮，我们需要创建一个半圆形。这个半圆形由两条端点相连而成，而这条连线便构成了内圆的直径。

计算内圆的圆心和半径

内圆的圆心恰好是连接月亮两端的线段的中点，而半径则是这条线段长度的一半。借助 Swift 中强大的 Core Graphics 框架，我们可以轻松地利用 CGPoint 和 CGFloat 数据类型来表示点和距离。

// 计算内圆的圆心
let centerX = (startPoint.x + endPoint.x) / 2
let centerY = (startPoint.y + endPoint.y) / 2

// 计算内圆的半径
let radius = sqrt(pow(endPoint.x - startPoint.x, 2) + pow(endPoint.y - startPoint.y, 2)) / 2

绘制内圆

我们使用 CGContext 对象，借助其 addArc 函数来绘制内圆。addArc 函数需要圆心坐标、半径以及起始和结束角度作为参数。

// 开始一个新的路径
context.beginPath()

// 添加内圆的弧线
context.addArc(center: CGPoint(x: centerX, y: centerY), radius: radius, startAngle: 0, endAngle: CGFloat.pi, clockwise: false)

// 设置内圆的填充色
context.setFillColor(UIColor.white.cgColor)

// 填充内圆
context.fillPath()

绘制外弧

外弧是一个比内圆半径稍大的圆形。为了呈现自然的外观，外弧的起始和结束角度应略小于内圆。

// 计算外弧的起始和结束角度
let outerStartAngle = -0.1 * CGFloat.pi
let outerEndAngle = CGFloat.pi + 0.1 * CGFloat.pi

// 绘制外弧
context.addArc(center: CGPoint(x: centerX, y: centerY), radius: radius * 1.2, startAngle: outerStartAngle, endAngle: outerEndAngle, clockwise: false)

// 设置外弧的填充色
context.setFillColor(UIColor.gray.cgColor)

// 填充外弧
context.fillPath()

添加阴影和高光

为了进一步提升月亮的真实感，我们可以巧妙地运用阴影和高光。通过 Core Graphics 的 CGContextSetShadow 和 CGContextSetRGBFillColor 函数，我们可以创造出令人惊叹的照明效果。

// 设置阴影
context.setShadow(offset: CGSize(width: 5, height: 5), blur: 10, color: UIColor.black.cgColor)

// 设置高光
context.setRGBFillColor(red: 1.0, green: 1.0, blue: 0.8, alpha: 1.0)

// 填充高光区域
context.fillPath()

代码示例：绘制您的专属月亮

下面，我们奉上一个完整的代码示例，演示如何使用 Swift 和 Core Graphics 绘制出迷人的月亮：

import UIKit
import CoreGraphics

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()

        // 创建一个新的图形上下文
        let context = UIGraphicsGetCurrentContext()!

        // 设置画布大小
        context.translateBy(x: 0, y: view.bounds.height)
        context.scaleBy(x: 1.0, y: -1.0)

        // 设置背景颜色
        context.setFillColor(UIColor.black.cgColor)
        context.fill(view.bounds)

        // 计算月亮的两个端点
        let startPoint = CGPoint(x: view.bounds.width / 2 - 100, y: view.bounds.height / 2 + 100)
        let endPoint = CGPoint(x: view.bounds.width / 2 + 100, y: view.bounds.height / 2 + 100)

        // 计算内圆的圆心和半径
        let centerX = (startPoint.x + endPoint.x) / 2
        let centerY = (startPoint.y + endPoint.y) / 2
        let radius = sqrt(pow(endPoint.x - startPoint.x, 2) + pow(endPoint.y - startPoint.y, 2)) / 2

        // 绘制内圆
        context.beginPath()
        context.addArc(center: CGPoint(x: centerX, y: centerY), radius: radius, startAngle: 0, endAngle: CGFloat.pi, clockwise: false)
        context.setFillColor(UIColor.white.cgColor)
        context.fillPath()

        // 计算外弧的起始和结束角度
        let outerStartAngle = -0.1 * CGFloat.pi
        let outerEndAngle = CGFloat.pi + 0.1 * CGFloat.pi

        // 绘制外弧
        context.addArc(center: CGPoint(x: centerX, y: centerY), radius: radius * 1.2, startAngle: outerStartAngle, endAngle: outerEndAngle, clockwise: false)
        context.setFillColor(UIColor.gray.cgColor)
        context.fillPath()

        // 设置阴影
        context.setShadow(offset: CGSize(width: 5, height: 5), blur: 10, color: UIColor.black.cgColor)

        // 设置高光
        context.setRGBFillColor(red: 1.0, green: 1.0, blue: 0.8, alpha: 1.0)

        // 填充高光区域
        context.fillPath()
    }
}