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

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


示例效果

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

关键代码

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)
    }
}))

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

SwiftUI 签名绘图板 Canvas 示例代码

赞助会员赞助会员¥免费
资源价格 ¥3.00 销售数量 0 更新时间 2024-10-22
已付费?登录刷新

  本文自 https://www.codeun.com 发布,相应代码均自主编写并严格审阅和测试,完整代码中包含丰富的学习笔记和使用方式、实用技巧。
  · 如若转载,请注明出处:https://www.codeun.com/archives/1332.html ·

(0)
上一篇 2024-10-07 下午10:50
下一篇 2023-06-05

发表回复

登录后才能评论