UIScrollView ImageView 顶部有针脚

Question

我有一个 UIScrollView ，它有一个 UIImageView 。 我想在这个imageView上显示图钉。 当我将图钉添加为 ImageView 的子视图时，一切都很好，除了缩放时图钉上也会发生比例变换。 我不希望出现这种行为，并希望我的引脚保持不变。

因此，我选择将 Pins 添加到另一个视图，该视图位于 ImageView 之上，也是 UIScrollView 的子视图。 如果您能想象，这里的想法是有一个图层悬停在地图上，并且不会缩放，但会在我绘制它们的位置显示图钉。

如果 ImageView 缩放，则添加到图层视图时的图钉不会缩放。 然而，问题就变成了引脚的位置与原始原点 x/y 不匹配，因为 ImageView 进行了缩放变换。

基本上，这是带有图钉的地点的自定义地图。 我试图让 Pins 漂浮在上面，而不是在 ImageView 上放大和缩小，但记住缩放发生时我将它们放置在哪里。

一些代码：

scrollView = [[UIScrollView alloc] initWithFrame:viewRect];

scrollView.delegate = self;
scrollView.pagingEnabled = NO;
scrollView.scrollsToTop = NO;
[scrollView setBackgroundColor:[UIColor clearColor]];
scrollView.clipsToBounds = YES; // default is NO, we want to restrict drawing within our scrollview
scrollView.bounces = YES;
scrollView.autoresizingMask = UIViewAutoresizingFlexibleHeight;
scrollView.indicatorStyle = UIScrollViewIndicatorStyleWhite;

imageViewMap = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"image.png"]];

imageViewMap.userInteractionEnabled = YES;

viewRect = CGRectMake(0,0,imageViewMap.image.size.width,imageViewMap.image.size.height);

//viewRect = CGRectMake(0,0,2976,3928);

[scrollView addSubview:imageViewMap];

[scrollView setContentSize:CGSizeMake(viewRect.size.width, viewRect.size.height)];

iconsView = [[UIView alloc] initWithFrame:imageViewMap.frame];

[scrollView addSubview:iconsView];

稍后在某些事件中添加 Pin 图的代码。

[iconsView addSubview:pinIcon];

我一直在尝试弄清楚如何让我的图钉在比例发生时悬停在地图上而不移动。

Answer 1

我喜欢您将所有引脚保留在专用于引脚的视图（iconsView）中的想法，但我决定将它们添加为您所谓的 imageViewMap 的子视图。

将 QuartzCore.framework 文件导入到您的项目中。

调用您的视图控制器 MyViewController。

#import <QuartzCore/QuartzCore.h>
@interface MyViewController : UIViewController <UIScrollViewDelegate>
@property (retain) UIScrollView *scrollView;
@property (retain) UIImageView *imageView;

// 依此类推，

@implementation MyViewController

@synthesize scrollView;
@synthesize imageView;

我假设您有一个 pin 视图或一个名为 DropPinViewController 的视图控制器。 如果你只是使用图像，它可以是 UIImageView，但我的引脚有标签，所以我使用了 xib。 引脚应该指向 xib 的底部中心，因为我们要在那里放置一个锚点。

在 MyViewController 的 viewDidLoad 中，将 pin 视图添加为 imageView 的子视图。 将 imageView 作为子视图添加到滚动视图中。 设置scrollView的内容大小。

scrollView.delegate = self;

使用这些委托方法：

- (void)scrollViewDidZoom:(UIScrollView *)aScrollView
{   
    for (UIView *dropPinView in imageView.subviews) {       
    CGRect oldFrame = dropPinView.frame;
    // 0.5 means the anchor is centered on the x axis. 1 means the anchor is at the bottom of the view. If you comment out this line, the pin's center will stay where it is regardless of how much you zoom. I have it so that the bottom of the pin stays fixed. This should help user RomeoF.
   [dropPinView.layer setAnchorPoint:CGPointMake(0.5, 1)];
    dropPinView.frame = oldFrame;
    // When you zoom in on scrollView, it gets a larger zoom scale value.
    // You transform the pin by scaling it by the inverse of this value.
    dropPinView.transform = CGAffineTransformMakeScale(1.0/scrollView.zoomScale, 1.0/scrollView.zoomScale);
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    return imageView;
}

Answer 2

因此，我已经实现的一件事并没有解决我的问题，但我认为它是正确的，来自这篇文章。

锚定 UIView

我的视图层次结构如下。

UIScrollView
 - UIImageView (map image)
 - IconsView (layer image to hold icons)

我需要解决的下一步是当 UIImageView 放大和缩小时，将添加到 IconsView 的图钉固定在同一位置。

我有一个 for 循环，它遍历了所有作为 IconsView 的子视图的引脚，并更新了它们的原点 X 和 Y。这是在 UIScrollView 代表的 scrollViewDidScroll< /代码> 方法。

问题是这种技术在设备上的性能很糟糕，因为当地图上有很多引脚时，需要进行太多的处理。

Answer 3

一些建议：

1) 您会注意到，在 Google 地图应用程序中，它限制了默认情况下尝试显示的图钉数量。 即使有更多可能的匹配，它也只会显示最接近中心点的结果。

2) 您可以在任何滚动或捏合操作期间短暂隐藏图钉，以便界面保持响应并在图像视图停止移动时重新绘制它们。

3) 如果您必须显示大量引脚并为其设置动画，您还可以考虑使用 CABasicAnimations 同时为引脚和背景设置动画，使用与转换背景比例相同的数学方法来转换引脚位置。 这可以通过更平滑地传播动画并在相当低的级别上运行它们来平滑显示，但会带来其他挑战和限制。

http://developer.apple.com/iphone/library/documentation/Cocoa/Conceptual/Animation_Types_Timing/Articles/PropertyAnimations.html#//apple_ref/doc/uid/TP40006672-SW1

巴尼

Answer 4

我有同样的问题，我发现手动纠正引脚位置的想法不太好。 然后，我宁愿将图钉绘制到委托函数 viewForZoomingInScrollView: 返回的视图上，并在缩放完成后更新子视图（标记）大小。

然而，它让我烦恼，这在 Google 地图应用程序中是可能的，但我无法重新创建它。

还有一件事：
当我向 UIScrollView 添加不是“viewForZoomingInScrollView”的子视图时，任何人都可以解释一下行为表现吗？ 例如：

UIImageView* marker = [[UIImageView alloc] initWithImage: myMarkerImage];
[marker setCenter: CGPointMake(250,150)];
[myScrollView addSubview: marker];

这对于初始视图和平移时似乎效果很好。 缩放时，这些子视图不会调整大小，这实际上是我们的目标，但问题是 UIView 框架原点以某种相当奇怪的方式在滚动视图上移动。 看起来，如果放大，marker.frame.size.origin 总是向左上角（超级视图的 (0,0)）移动，给人一种我们实际上正在缩小的印象。 这也很奇怪，因为“缩放中心”应该始终位于屏幕的中心，不是吗？ 嗯，我暂时不明白。

撞。 ;)

Answer 5

感谢大卫·布劳恩。 除了我必须注释掉的一行之外，您的代码可以正常工作。 我的项目涉及有一个 UIScrollView，然后是顶部的 UIImageView，显示地图，最后，在感应到双击手势后固定代码所在的位置（按钮）。 您的代码帮助我解释了缩放比例。 但限制是，当我捏​​合缩放时，每个引脚不会“粘”到我双击的绘图的特定部分。 当我注释掉这一行时，我偶然发现了解决方案：

//[dropPinView.layer setAnchorPoint:CGPointMake(0.5, 1)];

我没有完全理解，但我的代码现在可以工作了！ 我希望其他人能从我的经验中受益。 谢谢大卫！