ScrollView 中的 ImageView 可快速缩放、裁剪和保存

ImageView in a ScrollView to zoom, crop and save swift(ScrollView 中的 ImageView 可快速缩放、裁剪和保存)

问题描述

我试图让用户在我的应用上制作个人资料图片，但我遇到了一些似乎可以解决的问题.

I am trying to let the user make a profile picture on my app, but I have been running into problems I can seem to solve.

我在我的视图控制器上添加了一个 uiscrollview.接下来我在uiscrollview中添加了一个UIimageview，宽度和高度都是一样的.

I have added a uiscrollview on my viewcontroller. Next I added a UIimageview into the uiscrollview, both are the same width and height.

我要解决的第一件事是我希望用户输入的图片以最短的一侧填充 uiimageview.因此，如果图像的宽度为 500，高度为 1000，我希望该宽度可以填充图像视图，顶部和底部的额外高度等待用户滚动.

The first thing I was trying to solve is I wanted the picture the user inputs to fill the uiimageview by the shortest side. So if the image had a width of 500 and height of 1000, I want the width to fill the image view with the extra height off the top and bottom waiting for the user to scroll.

我也无法平移图像.在我捏缩放图像之前，我似乎无法平移图像.这么说我也认为我的完整图像没有显示，这可能会导致一些问题，我不确定为什么.

I am also having trouble panning images. It seems like I can't pan an image until I pinch zoom on the image. Saying this I also think my full image is not being displayed which may be causing some problems, I'm not sure why.

class ViewController: UIViewController, UINavigationControllerDelegate, UIImagePickerControllerDelegate, UIScrollViewDelegate {

@IBOutlet var scrollView: UIScrollView!

@IBOutlet var imageViewPicture: UIImageView!

@IBOutlet var addPicture: UIButton!

let image = UIImagePickerController()

@IBAction func addPicture(sender: AnyObject) {

    self.presentViewController(image, animated: true, completion: nil)
}

func imagePickerController(picker: UIImagePickerController, didFinishPickingImage image: UIImage, editingInfo: [String : AnyObject]?) {

    self.dismissViewControllerAnimated(true, completion: nil)

    imageViewPicture.image = image
}

override func viewDidLoad() {
    super.viewDidLoad()

    self.view.backgroundColor = UIColor.orangeColor()

    self.scrollView.backgroundColor = UIColor.blueColor()

    self.scrollView.delegate = self

    //setting the min and max amount of zoom on the picture
    self.scrollView.minimumZoomScale = 1.0
    self.scrollView.maximumZoomScale = 4.0
    self.scrollView.bouncesZoom = false
    self.scrollView.bounces = false
    self.scrollView.alwaysBounceVertical = false
    self.scrollView.alwaysBounceHorizontal = false
    self.scrollView.scrollEnabled = true

    image.delegate = self
    image.sourceType = UIImagePickerControllerSourceType.PhotoLibrary
    image.allowsEditing = false

    scrollView.layer.cornerRadius = (imageViewPicture.frame.size.width) / 2
    scrollView.layer.masksToBounds = true

    //gets rid of the indicator that shows where you are when scrolling
    scrollView.showsHorizontalScrollIndicator = false
    scrollView.showsVerticalScrollIndicator = false

    imageViewPicture.userInteractionEnabled = true
    let doubleTap = UITapGestureRecognizer(target: self, action: "doubleTapped")
    doubleTap.numberOfTapsRequired = 2
    imageViewPicture.addGestureRecognizer(doubleTap)

}

func doubleTapped() {

    if scrollView.zoomScale > 1.0 {
        scrollView.zoomScale = 1.0

    } else {
        scrollView.zoomScale = 2.0
    }   
}

func cropAndSave() {
    UIGraphicsBeginImageContextWithOptions(scrollView.bounds.size, true, UIScreen.mainScreen().scale)
    let offset = scrollView.contentOffset

    CGContextTranslateCTM(UIGraphicsGetCurrentContext(), -offset.x, -offset.y)
    scrollView.layer.renderInContext(UIGraphicsGetCurrentContext()!)

    let image = UIGraphicsGetImageFromCurrentImageContext()

    UIGraphicsEndImageContext()

    UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)

}

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {

    return self.imageViewPicture
}

推荐答案

背景:在情节提要中添加了 UIScrollview(启用了用户交互并启用了多点触控)并将高宽比设置为 1 - 只是为了使其成为正方形.使用此功能可以进行平移和缩放.我没有做额外的设置，比如拐角半径等.我最近做了这个 - 认为它可以帮助你.

Background: UIScrollview (with user interaction enabled and multiple touch enabled)added in the storyboard and set the height width ration 1 - just to make it a square. Panning and zooming is possible with this. I did not do additional set up like corner radius etc. I did this recently - thought it may help you.

class ViewController: UIViewController, UIImagePickerControllerDelegate,UINavigationControllerDelegate ,UIScrollViewDelegate{

var imgview: UIImageView!
var imagepicked:UIImage!

@IBOutlet weak var scrollViewSquare: UIScrollView!



let picker = UIImagePickerController()
override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    picker.delegate = self
    scrollViewSquare.delegate = self
    //ImageViewInit()
}

override func didReceiveMemoryWarning() {
    super.didReceiveMemoryWarning()
    // Dispose of any resources that can be recreated.
}



func ImageViewInit(){
    imgview = UIImageView()
    imgview.frame =  CGRectMake(0, 0, imagepicked.size.width, imagepicked.size.height)
    imgview.image = imagepicked
    imgview.contentMode = .ScaleAspectFit
    imgview.backgroundColor = UIColor.lightGrayColor()
    scrollViewSquare.maximumZoomScale=4;
    scrollViewSquare.minimumZoomScale=0.02;
    scrollViewSquare.bounces=true;
    scrollViewSquare.bouncesZoom=true;
    scrollViewSquare.contentMode = .ScaleAspectFit

    scrollViewSquare.contentSize = imagepicked.size
    scrollViewSquare.autoresizingMask = UIViewAutoresizing.FlexibleWidth
    scrollViewSquare.addSubview(imgview)
    setZoomScale()
}
var  minZoomScale:CGFloat!

func setZoomScale(){
    let imageViewSize = imgview.bounds.size
    let scrollViewSize = scrollViewSquare.bounds.size
    let widthScale = scrollViewSize.width / imageViewSize.width
    let heightScale = scrollViewSize.height / imageViewSize.height
    minZoomScale = max(widthScale, heightScale)
    scrollViewSquare.minimumZoomScale = minZoomScale
    scrollViewSquare.zoomScale = minZoomScale
    print("height nd width scale (widthScale) & (heightScale) Min zoom scale (minZoomScale)")
}

func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
    return imgview
}

func imagePickerController(
    picker: UIImagePickerController,
    didFinishPickingMediaWithInfo info: [String : AnyObject])
{
    imagepicked = (info[UIImagePickerControllerOriginalImage] as? UIImage)!
    print("Image (h,w) = ((imagepicked.size.height) , (imagepicked.size.width))")
    ImageViewInit()
    dismissViewControllerAnimated(false, completion: nil)

}
@IBAction func Pick(sender: AnyObject) {
    picker.allowsEditing = false
    picker.sourceType = .PhotoLibrary
    presentViewController(picker, animated: true, completion: nil)
}

}

这篇关于ScrollView 中的 ImageView 可快速缩放、裁剪和保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！