缩放 UIViews 组但保持其位置 [英] Scale group of UIViews but keeping its position

问题描述

我正在尝试使用捏合手势(在基本视图上)一次缩放多个 UIView.虽然它看起来很直接，但我很难让它正常工作.

I am trying to scale multiple UIViews at once with the pinch gesture(On the base view). Though it looked straight forward, I am facing hard time getting it working properly.

假设我有 3 个这样堆叠的视图

Assume I have 3 views stacked like this

----------------------------------------------
|                                            |
|    -------                      --------   |   
|    |     |                      |      |   |
|    |  V1 |   ---------------    |      |   |
|    |     | X |     v2      |  Y |   v3 |   |
|    -------   ---------------    |      |   |
|                                 --------   |
---------------------------------------------

在捏合时，我通过使用缩放属性计算变换来缩放 3 个视图中的每一个

On pinch, I am scaling each of the 3 views by calculating the transform using the scale propery

CGAffineTransform v1Transform =  CGAffineTransformScale( v1.transform,recognizer.scale, recognizer.scale);
v1.transform = v1Transform
CGAffineTransform v2Transform =  CGAffineTransformScale( v2.transform,recognizer.scale, recognizer.scale);
v2.transform = v2Transform
CGAffineTransform v3Transform =  CGAffineTransformScale( v3.transform,recognizer.scale, recognizer.scale);
v3.transform = v3Transform

并使用当前比例更改每个视图的中心，如下所示

And change the center of each view using the current scale, like this

   CGPoint v1Center = CGPointMake(v1.center.x * recognizer.scale,  node.imgView.center.y * recognizer.scale);
   CGPoint v2Center = CGPointMake(v2.center.x * recognizer.scale,  node.imgView.center.y * recognizer.scale);
   CGPoint v3Center = CGPointMake(v3.center.x * recognizer.scale,  node.imgView.center.y * recognizer.scale);
  v1.cente = v1Center;
  v2.center = v2Center;
  v3.center = v3Center;

虽然这会均匀地缩放 3 个视图中的每一个，但我觉得中心点太偏了，并且缩放看起来更奇怪.请检查以下问题的屏幕截图

Though this scales each of the 3 views uniformly, I feel the center point is too off and the scaling looks weirder. please check the below screen capture of the issue

如您所见，尽管比例按预期工作并且所有 3 个视图一起缩放.中心仍然是一个问题.我希望从所有 3 个视图的实际位置进行缩放，我不希望它们在 gif 中像这样移动.

As you can see, though the scale works as expected and all 3 views scale together. Center is still an issue. I want the scale to be done from all 3 views actual place, I dont want them to move like this in the gif.

有办法吗?非常感谢任何帮助

Is there a way? any help is much appreciated

推荐答案

如果我理解正确，您希望在缩放一组元素时采用通常的行为，即它们从所有选定元素的中心进行缩放.

If I understood correctly, you want the usual behavior when scaling a group of elements, which is for them to scale from the center of all selected elements.

>

我以前做过这个，它是在 Swift 中的，它使用了我创建的库的一些扩展，名为 CGMath*，但作为伪代码应该足够好了:

I've done this before, it's in Swift and it uses some extensions of a library I made called CGMath*, but it should be good enough as pseudocode:

let scale = recognizer.scale
//  Reset the scale of the recognizer. We'll scale the views by the change in the last tick.
recognizer.scale = 1
//  Get the center of all selected views as a CGPoint
let center = views.map { $0.center }.reduce(CGPoint.zero, +) / CGFloat(views.count)
views.forEach {
    //  Scale the view
    $0.scale *= scale
    //  Get the distance from this view to the center of all views, this is a CGPoint
    let distance = $0.center - center
    //  Multiply the distance by the scale and add it to the center of all views. Set that as the view's center.
    $0.center = center + (distance * scale)
}

*CGMath 中的扩展使得加减点成为可能.

*the extensions in CGMath are what make it possible to add and subtract points.

这篇关于缩放 UIViews 组但保持其位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！