做手势时将锚点放在屏幕中央

Question

我有一个图像视图，可以响应捏合、旋转和平移手势。我希望图像的收缩和旋转是相对于放置在屏幕中间的锚点完成的，就像使用 Xcode iPhone 模拟器通过按选项键所做的一样。如果图像的中心可能被缩放和平移到不同的位置，我如何将锚点放置在屏幕中间？

这是我的缩放和旋转手势功能：

@IBAction func pinchGesture(_ gestureRecognizer: UIPinchGestureRecognizer) {
    // Move the achor point of the view's layer to the touch point
    // so that scaling the view and the layer becames simpler.
    self.adjustAnchorPoint(gestureRecognizer: gestureRecognizer)


    // Scale the view by the current scale factor.
    if(gestureRecognizer.state == .began) {
        // Reset the last scale, necessary if there are multiple objects with different scales
        lastScale = gestureRecognizer.scale
    }

    if (gestureRecognizer.state == .began || gestureRecognizer.state == .changed) {
        let currentScale = gestureRecognizer.view!.layer.value(forKeyPath:"transform.scale")! as! CGFloat
        // Constants to adjust the max/min values of zoom
        let kMaxScale:CGFloat = 15.0
        let kMinScale:CGFloat = 1.0
        var newScale = 1 -  (lastScale - gestureRecognizer.scale)
        newScale = min(newScale, kMaxScale / currentScale)
        newScale = max(newScale, kMinScale / currentScale)
        let transform = (gestureRecognizer.view?.transform)!.scaledBy(x: newScale, y: newScale);
        gestureRecognizer.view?.transform = transform
        lastScale = gestureRecognizer.scale  // Store the previous scale factor for the next pinch gesture call
        scale = currentScale // Save current scale for later use
    }
}

@IBAction func rotationGesture(_ gestureRecognizer: UIRotationGestureRecognizer) {
    // Move the achor point of the view's layer to the center of the
    // user's two fingers. This creates a more natural looking rotation.
    self.adjustAnchorPoint(gestureRecognizer: gestureRecognizer)

    // Apply the rotation to the view's transform.
    if gestureRecognizer.state == .began || gestureRecognizer.state == .changed {
        gestureRecognizer.view?.transform = (gestureRecognizer.view?.transform.rotated(by: gestureRecognizer.rotation))!
        // Set the rotation to 0 to avoid compouding the
        // rotation in the view's transform.
        angle += gestureRecognizer.rotation // Save rotation angle for later use
        gestureRecognizer.rotation = 0.0
    }
}

func adjustAnchorPoint(gestureRecognizer : UIGestureRecognizer) {
    if gestureRecognizer.state == .began {
        let view = gestureRecognizer.view
        let locationInView = gestureRecognizer.location(in: view)
        let locationInSuperview = gestureRecognizer.location(in: view?.superview)

        // Move the anchor point to the the touch point and change the position of the view
        view?.layer.anchorPoint = CGPoint(x: (locationInView.x / (view?.bounds.size.width)!), y: (locationInView.y / (view?.bounds.size.height)!))
        view?.center = locationInSuperview
    }
}

编辑

我看到人们并不急于参与其中。让我通过分享我在过去几天取得的一些进展来提供帮助。

首先，我编写了一个函数 centerAnchorPoint，它可以将图像的锚点正确地放置在屏幕的中央，而不管该锚点之前位于何处。但是，不得缩放或旋转图像才能正常工作。

func setAnchorPoint(_ anchorPoint: CGPoint, forView view: UIView) {
    var newPoint = CGPoint(x: view.bounds.size.width * anchorPoint.x, y: view.bounds.size.height * anchorPoint.y)
    var oldPoint = CGPoint(x: view.bounds.size.width * view.layer.anchorPoint.x, y: view.bounds.size.height * view.layer.anchorPoint.y)

    newPoint = newPoint.applying(view.transform)
    oldPoint = oldPoint.applying(view.transform)

    var position = view.layer.position
    position.x -= oldPoint.x
    position.x += newPoint.x

    position.y -= oldPoint.y
    position.y += newPoint.y

    view.layer.position = position
    view.layer.anchorPoint = anchorPoint
}

func centerAnchorPoint(gestureRecognizer : UIGestureRecognizer) {
    if gestureRecognizer.state == .ended {

        view?.layer.anchorPoint = CGPoint(x: (photo.bounds.midX / (view?.bounds.size.width)!), y: (photo.bounds.midY / (view?.bounds.size.height)!))
    }
}

func centerAnchorPoint() {

    // Position of the current anchor point
    let currentPosition = photo.layer.anchorPoint

    self.setAnchorPoint(CGPoint(x: 0.5, y: 0.5), forView: photo)
    // Center of the image
    let imageCenter = CGPoint(x: photo.center.x, y: photo.center.y)
    self.setAnchorPoint(currentPosition, forView: photo)

    // Center of the screen
    let screenCenter = CGPoint(x: UIScreen.main.bounds.midX, y: UIScreen.main.bounds.midY)

    // Distance between the centers
    let distanceX = screenCenter.x - imageCenter.x
    let distanceY = screenCenter.y - imageCenter.y

    // Find new anchor point
    let newAnchorPoint = CGPoint(x: (imageCenter.x+2*distanceX)/(UIScreen.main.bounds.size.width), y: (imageCenter.y+2*distanceY)/(UIScreen.main.bounds.size.height))

    //photo.layer.anchorPoint = newAnchorPoint
    self.setAnchorPoint(newAnchorPoint, forView: photo)

    let dotPath = UIBezierPath(ovalIn: CGRect(x: photo.layer.position.x-2.5, y: photo.layer.position.y-2.5, width: 5, height: 5))
    layer.path = dotPath.cgPath
}

这里使用函数setAchorPoint在不移动图像的情况下将锚点设置到新位置。

然后我更新了 panGesture 函数，在它的末尾插入：

if gestureRecognizer.state == .ended {
        self.centerAnchorPoint()
    }

编辑 2

好的，我会尽量简单地解释一下上面的代码。

我正在做的是：

求出照片中心到屏幕中心的距离
应用这个公式找到锚点的新位置：

newAnchorPointX = (imageCenter.x-distanceX)/screenWidth + distanceX/screenWidth

然后对 y 位置执行相同的操作。

使用setAnchorPoint函数将此点设置为新的锚点而不移动照片

如我所说，如果图像未缩放，此方法效果很好。如果是，则锚点不在中心。

奇怪的是 distanceX 或 distanceY 并不完全取决于比例值，所以这样的东西不太管用：

newAnchorPointX = (imageCenter.x-distanceX)/screenWidth + distanceX/(scaleValue*screenWidth)

编辑 3

我想出了缩放比例。看来正确的比例因子必须是：

scaleFactor = photo.frame.size.width/photo.layer.bounds.size.width

我用这个代替 scaleValue，效果非常好。

这样平移和缩放就完成了。就剩下轮换了，不过貌似是最难的

我首先想到的是将旋转矩阵应用于 X 和 Y 方向的增量，如下所示：

    let incrementX = (distanceX)/(screenWidth)
    let incrementY = (distanceY)/(screenHeight)

    // Applying rotation matrix
    let incX = incrementX*cos(angle)+incrementY*sin(angle)
    let incY = -incrementX*sin(angle)+incrementY*cos(angle)

    // Find new anchor point
    let newAnchorPoint = CGPoint(x: 0.5+incX, y: 0.5+incY)

但是这不起作用。

Answer 1

由于问题大部分在编辑中得到了回答，我不想重复太多。

大致上我对原始问题中发布的代码所做的更改：

删除了在捏合和旋转手势功能中对 adjustAnchorPoint 功能的调用。
将这段代码放在平移手势功能中，使锚点在平移照片后更新其位置：

if gestureRecognizer.state == .ended { self.centerAnchorPoint() }
更新了 centerAnchorPoint 函数以用于旋转。

一个完整的 centerAnchorPoint 函数（包括旋转）：

    func centerAnchorPoint() {
        // Scale factor
        photo.transform = photo.transform.rotated(by: -angle)
        let curScale = photo.frame.size.width / photo.layer.bounds.size.width
        photo.transform = photo.transform.rotated(by: angle)

        // Position of the current anchor point
        let currentPosition = photo.layer.anchorPoint

        self.setAnchorPoint(CGPoint(x: 0.5, y: 0.5), forView: photo)
        // Center of the image
        let imageCenter = CGPoint(x: photo.center.x, y: photo.center.y)
        self.setAnchorPoint(currentPosition, forView: photo)

        // Center of the screen
        let screenCenter = CGPoint(x: UIScreen.main.bounds.midX, y: UIScreen.main.bounds.midY)

        // Distance between the centers
        let distanceX = screenCenter.x - imageCenter.x
        let distanceY = screenCenter.y - imageCenter.y

        // Apply rotational matrix to the distances
        let distX = distanceX*cos(angle)+distanceY*sin(angle)
        let distY = -distanceX*sin(angle)+distanceY*cos(angle)

        let incrementX = (distX)/(curScale*UIScreen.main.bounds.size.width)
        let incrementY = (distY)/(curScale*UIScreen.main.bounds.size.height)

        // Find new anchor point
        let newAnchorPoint = CGPoint(x: 0.5+incrementX, y: 0.5+incrementY)

        self.setAnchorPoint(newAnchorPoint, forView: photo)
}

这里要注意的关键是必须将旋转矩阵应用于 distanceX 和 distanceY。比例因子也更新为在整个旋转过程中保持不变。

做手势时将锚点放在屏幕中央

Place anchor point at the centre of the screen while doing gestures

xcode

calayer

ios

swift