iOS开发求助：相册/相机选图裁剪后添加至DrawingView并实现拖拽缩放删除

Hey there! Let's break down how to tackle those remaining features for your drawing project—since you've already nailed the camera/album picker, we can jump straight into the interactive image handling bits. Here's a step-by-step breakdown based on common mobile dev patterns:

Before adding images to your DrawingView, you'll need to handle cropping. Most platforms have built-in tools or reliable third-party libraries to simplify this:

• For Android: Use the system's Intent.ACTION_CROP intent, or a dedicated cropping library to let users adjust the selection area. After cropping, you'll get a processed Bitmap ready to use.
• For iOS: Enable editing mode in UIImagePickerController (set allowsEditing = true), or use a cropping library to refine the image. You'll end up with a cropped UIImage.

Once you have the cropped image, it's time to add it to your DrawingView as an interactive element.

The key here is to treat each added image as a separate, trackable object. Create a data class (or struct) to store all necessary properties for each image:

// Example for Android (Kotlin)
data class DraggableImage(
    val bitmap: Bitmap,
    var x: Float, // Center X position on DrawingView
    var y: Float, // Center Y position on DrawingView
    var scale: Float = 1.0f, // Current zoom level
    var isSelected: Boolean = false // Flag to track user interaction
)

// Example for iOS (Swift)
struct DraggableImage {
    let image: UIImage
    var x: CGFloat
    var y: CGFloat
    var scale: CGFloat = 1.0
    var isSelected: Bool = false
}

Keep a list (like MutableList<DraggableImage> or [DraggableImage]) in your DrawingView to track all added images. This list will drive both rendering and interaction logic.

Drag & Move #

To let users drag images around:

• On a touch down event, check if the touch point falls within the bounds of any DraggableImage (do this in reverse order so later-added images—drawn on top—are detected first).
• If an image is selected, record the initial touch position relative to the image's center.
• On touch move events, update the selected image's x and y coordinates based on the touch delta, then trigger a redraw of the DrawingView.

Scale/Zoom #

For pinch-to-zoom:

• Detect multi-touch events (2 fingers). Calculate the distance between the two fingers.
• Compare the current distance to the previous distance to get a scale factor, then apply it to the selected image's scale property.
• Adjust the image's position so the zoom happens around the midpoint of the two fingers (this feels more natural for users).

Delete Images #

There are a few intuitive ways to handle deletion:

• Long press: When the user presses and holds an image for ~500ms, show a confirmation dialog or immediately remove the image from your list and redraw.
• Context menu: After selecting an image, display a small delete button overlay on the image; tapping it removes the image.

In your DrawingView's draw/refresh method:

1. First render your original drawing content (lines, shapes, etc.).
2. Iterate over your DraggableImage list and draw each image using its stored x, y, and scale properties. For a centered image, translate the canvas to the image's center, apply the scale, then draw the image offset by half its width/height.
3. Optionally, draw a border around the selected image to give users visual feedback.

Here's a quick example of the drawing logic in Android:

override fun onDraw(canvas: Canvas) {
    super.onDraw(canvas)
    // Draw your original drawing content first
    drawExistingDrawing(canvas)

    // Draw all interactive images
    draggableImages.forEach { image ->
        canvas.save()
        // Translate to image center
        canvas.translate(image.x, image.y)
        // Apply scale
        canvas.scale(image.scale, image.scale)
        // Draw image centered at (0,0) relative to translated canvas
        canvas.drawBitmap(
            image.bitmap,
            -image.bitmap.width / 2f,
            -image.bitmap.height / 2f,
            imagePaint
        )
        canvas.restore()

        // Draw border if selected
        if (image.isSelected) {
            val halfWidth = image.bitmap.width * image.scale / 2f
            val halfHeight = image.bitmap.height * image.scale / 2f
            canvas.drawRect(
                image.x - halfWidth,
                image.y - halfHeight,
                image.x + halfWidth,
                image.y + halfHeight,
                selectedBorderPaint
            )
        }
    }
}

When a user selects/captures and crops an image:

1. Create a new DraggableImage instance, setting initial x and y to the center of the DrawingView (or where the user tapped, if you prefer).
2. Add it to your list of draggable images.
3. Trigger a redraw of the DrawingView to show the new image.

That's the core flow! You can tweak the interaction details (like zoom limits, border styles, or delete triggers) to match your project's design.

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