iOS Swift中如何通过画线手势对视图内随机位置的图片分组？

嘿，我来帮你搞定这个画线选图分组的功能！你已经搞定了图片随机显示，接下来咱们一步步实现画线选中分组的核心逻辑：

这个需求主要分三块：捕捉画线手势并实时绘制线条、检测线条是否选中图片、管理选中图片的分组状态，咱们逐个击破。

1. 先搞定手势捕捉与实时画线 #

首先用UIPanGestureRecognizer捕捉用户的拖拽手势，同时用CAShapeLayer实时绘制线条，让用户能看到操作反馈。

在你的ViewController里添加这些变量和初始化代码：

// 存储所有随机生成的图片视图
var imageViews: [UIImageView] = []
// 记录用户绘制的路径
private var drawPath = UIBezierPath()
// 用来显示线条的图层，比直接drawRect更高效
private var shapeLayer = CAShapeLayer()
// 临时存储当前选中的图片
private var selectedImages: [UIImageView] = []

然后在viewDidLoad里初始化手势和线条样式：

override func viewDidLoad() {
    super.viewDidLoad()
    // 初始化你已经实现的随机图片逻辑
    setupRandomImages()
    
    // 添加拖拽手势
    let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePanGesture(_:)))
    view.addGestureRecognizer(panGesture)
    
    // 配置线条样式，可根据需求调整
    shapeLayer.strokeColor = UIColor.systemBlue.cgColor
    shapeLayer.lineWidth = 3.0
    shapeLayer.lineCap = .round
    shapeLayer.fillColor = UIColor.clear.cgColor
    view.layer.addSublayer(shapeLayer)
}

接下来实现手势处理的核心方法：

@objc private func handlePanGesture(_ gesture: UIPanGestureRecognizer) {
    let currentPoint = gesture.location(in: view)
    
    switch gesture.state {
    case .began:
        // 开始画线时重置路径和选中列表
        drawPath.removeAllPoints()
        drawPath.move(to: currentPoint)
        selectedImages.removeAll()
        // 重置所有图片的选中状态（比如清空边框）
        imageViews.forEach { $0.layer.borderWidth = 0 }
    case .changed:
        // 继续绘制路径并更新显示
        drawPath.addLine(to: currentPoint)
        shapeLayer.path = drawPath.cgPath
        // 实时检测哪些图片被线条选中
        checkSelectedImages()
    case .ended, .cancelled:
        // 手势结束，标记选中的图片为同一组
        selectedImages.forEach {
            $0.layer.borderWidth = 2
            $0.layer.borderColor = UIColor.systemGreen.cgColor
        }
        // 清空线条，准备下一次操作
        shapeLayer.path = nil
    default:
        break
    }
}

2. 核心：检测线条是否选中图片 #

这一步是关键，我们用CGPath的intersects(_ rect: CGRect)方法快速判断路径和图片区域是否有交集，比逐个点检测高效很多。为了让选中更灵敏，还可以把图片的矩形范围稍微扩大一点。

实现检测方法：

private func checkSelectedImages() {
    guard let cgPath = drawPath.cgPath else { return }
    
    for imageView in imageViews {
        // 转换图片视图的坐标系到当前view（如果图片不在当前view直接子层级的话必须做这一步）
        let imageRect = view.convert(imageView.frame, from: imageView.superview)
        // 扩大选中范围，让用户更容易选中图片
        let expandedRect = imageRect.insetBy(dx: -5, dy: -5)
        
        // 检查路径是否与图片范围相交，且图片尚未被选中
        if cgPath.intersects(expandedRect) && !selectedImages.contains(imageView) {
            selectedImages.append(imageView)
            // 实时反馈：给选中的图片加临时黄色边框
            imageView.layer.borderWidth = 2
            imageView.layer.borderColor = UIColor.systemYellow.cgColor
        }
    }
}

3. 优化与扩展建议 #

• 性能优化：如果图片数量很多，每次手势changed状态遍历所有图片可能卡顿，可以只检测当前线条附近的图片（比如根据拖拽点计算一个小范围，只检查这个范围内的图片）。
• 分组持久化：如果需要保存分组信息，可以给UIImageView添加自定义属性（比如var groupID: String?），手势结束时给选中的图片设置相同的groupID。
• 交互体验：可以添加线条颜色切换、撤销操作等功能，提升用户体验。

这样一套实现下来，就能达到你想要的画线选中图片分组的效果啦！

内容的提问来源于stack exchange，提问作者PvDev