用户可放置自定义UIViews的最优实现方案探讨（含拖拽缩放吸附）

Alright, let's walk through exactly how to build this interactive shape system for your custom UIView. I’ve implemented similar drag-and-drop + resize + snap features before, so here’s a practical, step-by-step breakdown:

First, we’ll create a custom CanvasView that acts as the main drawing surface. It’ll manage all the shape subviews and handle gesture recognition.

class CanvasView: UIView {
    // Keep track of all added shapes
    private var shapes: [UIView] = []
    
    // Add a new shape at a specific initial point (e.g., where the user taps)
    func addShape(_ shape: UIView, at initialPoint: CGPoint) {
        shape.center = initialPoint
        addSubview(shape)
        shapes.append(shape)
        // Attach pan/pinch gestures to the new shape
        setupGestures(for: shape)
    }
    
    private func setupGestures(for shape: UIView) {
        let panGesture = UIPanGestureRecognizer(target: self, action: #selector(handlePan(_:)))
        let pinchGesture = UIPinchGestureRecognizer(target: self, action: #selector(handlePinch(_:)))
        
        shape.addGestureRecognizer(panGesture)
        shape.addGestureRecognizer(pinchGesture)
        
        // Allow simultaneous gesture recognition (so pan and pinch can work together)
        panGesture.delegate = self
        pinchGesture.delegate = self
    }
}

// MARK: - Gesture Recognizer Delegate
extension CanvasView: UIGestureRecognizerDelegate {
    func gestureRecognizer(_ gestureRecognizer: UIGestureRecognizer, shouldRecognizeSimultaneouslyWith otherGestureRecognizer: UIGestureRecognizer) -> Bool {
        return true
    }
}

The pan gesture lets users drag shapes around. We’ll handle the gesture states to update the shape’s position, and trigger snapping when the drag ends.

extension CanvasView {
    @objc private func handlePan(_ gesture: UIPanGestureRecognizer) {
        guard let shape = gesture.view else { return }
        let translation = gesture.translation(in: self)
        
        switch gesture.state {
        case .began:
            // Bring the dragged shape to the front so it doesn't get obscured
            bringSubviewToFront(shape)
        case .changed:
            // Update the shape's center based on the drag movement
            shape.center = CGPoint(x: shape.center.x + translation.x, y: shape.center.y + translation.y)
            gesture.setTranslation(.zero, in: self) // Reset translation for next frame
        case .ended, .cancelled:
            // Trigger the snap-to-existing-shapes logic once the drag stops
            snapShapeToExistingElements(shape)
        default:
            break
        }
    }
}

For resizing, we’ll use the pinch gesture to scale the shape. Importantly, we’ll make sure the shape can adapt its content to the new size with a custom method.

First, create a base class for resizable shapes (so all your custom shapes can inherit this behavior):

class ResizableShapeView: UIView {
    // Override this in subclasses to adjust content for new sizes
    func adjustContentForCurrentSize() {
        // Example: Fit subviews to the shape's bounds with padding
        subviews.forEach { subview in
            subview.frame = bounds.inset(by: UIEdgeInsets(top: 8, left: 8, bottom: 8, right: 8))
        }
    }
}

Then implement the pinch handler in CanvasView:

extension CanvasView {
    @objc private func handlePinch(_ gesture: UIPinchGestureRecognizer) {
        guard let shape = gesture.view as? ResizableShapeView else { return }
        
        switch gesture.state {
        case .began:
            bringSubviewToFront(shape)
        case .changed:
            // Apply incremental scale to the shape
            shape.transform = shape.transform.scaledBy(x: gesture.scale, y: gesture.scale)
            gesture.scale = 1.0 // Reset scale to apply each pinch incrementally
            // Tell the shape to adjust its content to the new scaled size
            shape.adjustContentForCurrentSize()
        case .ended, .cancelled:
            // Optional: Reset the transform and update the shape's bounds directly
            // This avoids accumulating transform data over time
            let scaledSize = shape.bounds.size.applying(shape.transform)
            shape.transform = .identity
            shape.bounds = CGRect(origin: .zero, size: scaledSize)
            shape.adjustContentForCurrentSize()
        default:
            break
        }
    }
}

To make shapes snap to each other, we’ll check the distance between the dragged shape and all other shapes. If they’re within a threshold, we’ll align edges or centers.

extension CanvasView {
    private func snapShapeToExistingElements(_ targetShape: UIView) {
        let snapThreshold: CGFloat = 15.0 // Adjust this based on desired sensitivity
        
        for shape in shapes where shape != targetShape {
            // Horizontal edge snapping (left/right alignment)
            if abs(targetShape.frame.minX - shape.frame.maxX) <= snapThreshold {
                targetShape.frame.origin.x = shape.frame.maxX
            } else if abs(targetShape.frame.maxX - shape.frame.minX) <= snapThreshold {
                targetShape.frame.origin.x = shape.frame.minX - targetShape.frame.width
            }
            
            // Vertical edge snapping (top/bottom alignment)
            if abs(targetShape.frame.minY - shape.frame.maxY) <= snapThreshold {
                targetShape.frame.origin.y = shape.frame.maxY
            } else if abs(targetShape.frame.maxY - shape.frame.minY) <= snapThreshold {
                targetShape.frame.origin.y = shape.frame.minY - targetShape.frame.height
            }
            
            // Optional: Center alignment snapping
            if abs(targetShape.center.x - shape.center.x) <= snapThreshold {
                targetShape.center.x = shape.center.x
            }
            if abs(targetShape.center.y - shape.center.y) <= snapThreshold {
                targetShape.center.y = shape.center.y
            }
        }
    }
}

• Performance Optimization: If you have dozens of shapes, modify the snapping logic to only check shapes that are near the target shape (use CGRect.intersects to filter) instead of iterating all of them.
• Custom Shape Behavior: Override adjustContentForCurrentSize() in your specific shape subclasses (e.g., a TextShapeView might resize its font, a CircleShapeView might redraw its path).
• Gesture Feedback: Add visual feedback (like a shadow or border highlight) when a shape is being dragged/resized to make the interaction clearer.

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