限制平移手势移动到屏幕框架的左侧和右侧之外

时间:2018-04-26 18:55:25

标签: ios swift3 uiimage uipangesturerecognizer

我有一个在屏幕中央弹出的图像视图。您可以捏合放大或缩小图像以及水平移动图像。所有这些行动都很有效。但是我想限制平移动作,以便用户无法滑动超出图像的左边缘或右边缘。下面我发布截图以及解释来说明我的意思

原始视图

Original view

图片向右移动。目前你可以看到你可以将它移动到图像的左边缘之外,它显示黑色的黑色空间。如果图像宽度等于屏幕宽度,那么我显然希望平移手势被禁用

enter image description here

图片放大

enter image description here

Imaged向左移动但我又希望能够将平移手势限制在图像的边缘,这样图像右侧就没有黑色空间。

enter image description here

我试过四处寻找,但我无法找到任何可以帮助我解决具体问题的事情。我在下面发布了我的代码。任何帮助将非常感激!提前致谢

func handlePan(_ gestureRecognizer: UIPanGestureRecognizer) {
    guard let zoomView = gestureRecognizer.view else{return}

    if gestureRecognizer.state == UIGestureRecognizerState.began || gestureRecognizer.state == UIGestureRecognizerState.changed {
        let translation = gestureRecognizer.translation(in: self.view)
        if(gestureRecognizer.view!.center.x < 300) {
             gestureRecognizer.view!.center = CGPoint(x:gestureRecognizer.view!.center.x + translation.x, y: gestureRecognizer.view!.center.y)

        }else{

        gestureRecognizer.view!.center = CGPoint(x:299, y: gestureRecognizer.view!.center.y)

        }
        gestureRecognizer.setTranslation(CGPoint.zero, in: zoomView) 
    }
}

1 个答案:

答案 0 :(得分:2)

我按照youtube video来完成它。

我无法帮助您进行缩放,但我可以帮助您在不缩放时阻止imageView移动到左侧和右侧之外。

您没有提供任何有关您的imageView是否已在故事板中或以编程方式创建的上下文。我的示例中的一个是程序化的,它的名称为orangeImageView

创建一个新项目,然后只需将此代码复制并粘贴到View Controller中。当您运行项目时,您将看到一个橙色的imageView,您可以移动它,但它不会超出屏幕的左侧或右侧。我没有打扰顶部或底部,因为它不是你问题的一部分。

按照@objc func panGestureHandler(_ gestureRecognizer: UIPanGestureRecognizer)中的步骤1 - 8 说明每个步骤的作用及其工作原理。

orangeImageView替换为您使用的imageView

class ViewController: UIViewController {

// create frame in viewDidLoad
let orangeImageView: UIImageView = {
    let imageView = UIImageView()
    imageView.isUserInteractionEnabled = true
    imageView.backgroundColor = .orange
    return imageView
}()

var panGesture: UIPanGestureRecognizer!

override func viewDidLoad() {
    super.viewDidLoad()

    // create a frame for the orangeImageView and add it as a subview
    orangeImageView.frame = CGRect(x: 50, y: 50, width: 100, height: 100)
    view.addSubview(orangeImageView)

    // initialize the pangesture and add it to the orangeImageView
    panGesture = UIPanGestureRecognizer(target: self, action: #selector(panGestureHandler(_:)))
    orangeImageView.addGestureRecognizer(panGesture)
}

@objc func panGestureHandler(_ gestureRecognizer: UIPanGestureRecognizer){

    // 1. use these values to restrict the left and right sides so the orangeImageView won't go beyond these points
    let leftSideRestrction = self.view.frame.minX
    let rightSideRestriction = self.view.frame.maxX

    // 2. use these values to redraw the orangeImageView's correct size in either Step 6 or Step 8 below
    let imageViewHeight = self.orangeImageView.frame.size.height
    let imageViewWidth = self.orangeImageView.frame.size.width

    if gestureRecognizer.state == .changed || gestureRecognizer.state == .began {

        let translation: CGPoint = gestureRecognizer.translation(in: self.view)
        gestureRecognizer.view!.center = CGPoint(x: gestureRecognizer.view!.center.x  + translation.x, y: gestureRecognizer.view!.center.y + translation.y)
        gestureRecognizer.setTranslation(CGPoint.zero, in: self.view)

        /*
         3.
         -get the the upper left hand corner of the imageView's X and Y origin to get the current location of the imageView as it's dragged across the screen.
         -you need the orangeImageView.frame.origin.x value to make sure it doesn't go beyond the left or right edges
         -you need the orangeImageView.frame.origin.y value to redraw it in Steps 6 and 8 at whatever Y position it's in when it hits either the left or right sides
        */
        let imageViewCurrentOrginXValue = self.orangeImageView.frame.origin.x
        let imageViewCurrentOrginYValue = self.orangeImageView.frame.origin.y

        // 4. get the right side of the orangeImageView. It's computed using the orangeImageView.frame.origin.x + orangeImageView.frame.size.width
        let imageViewRightEdgePosition = imageViewCurrentOrginXValue + imageViewWidth

        // 5. if the the orangeImageView.frame.origin.x touches the left edge of the screen or beyond it proceed to Step 6
        if imageViewCurrentOrginXValue <= leftSideRestrction {

            // 6. redraw the orangeImageView's frame with x: being the far left side of the screen and Y being where ever the current orangeImageView.frame.origin.y is currently positioned at
            orangeImageView.frame = CGRect(x: leftSideRestrction, y: imageViewCurrentOrginYValue, width: imageViewWidth, height: imageViewHeight)
        }

        // 7. if the the orangeImageView.frame.origin.x touches the right edge of the screen or beyond it proceed to Step 8
        if imageViewRightEdgePosition >= rightSideRestriction{

            // 8. redraw the orangeImageView's frame with x: being the rightSide of the screen - the orangeImageView's width and y: being where ever the current orangeImageView.frame.origin.y is currently positioned at
            orangeImageView.frame = CGRect(x: rightSideRestriction - imageViewWidth, y: imageViewCurrentOrginYValue, width: imageViewWidth, height: imageViewHeight)
        }
    }
}
}