SwiftUI 使用 Canvas 制作签名板绘图板示例

Codeun

3 月前

近期有用到这样一个绘图板的功能，这里提供一个通过 SwiftUI 原生代码编写 Canvas 制作的示例，通过记录触摸滑动的轨迹绘制到 Canvas 上，并提供撤销、重做和清空绘图板的功能，演示效果如下。

Table of Contents

示例效果

关键代码

Canvas { context, size in
    // 遍历所有的线条模型，并为每条线绘制路径
    for line in lines {
        // 根据线条中的点数组创建路径
        let path = createPath(for: line.points)
        // 使用指定颜色和线宽在上下文中描边路径
        context.stroke(path, with: .color(line.color), lineWidth: 4)
        
    }
}
// 添加拖拽手势，最小拖动距离为0，意味着手指按下即开始响应
.gesture(DragGesture(minimumDistance: 0).onChanged({ value in
    // 判断是否为初始触摸点
    if value.translation.width + value.translation.height == 0 {
        // 如果是初始触摸点，创建一个新的线条模型并添加到线条数组中
        lines.append(LineModel(points: [CGPoint](), lineWidth: 1, color: selectColor))
    } else {
        // 如果不是初始点，则将当前触摸位置添加到最后一条线条的点数组中
        let lastLine = lines.count - 1
        lines[lastLine].points.append(value.location)
    }
}))