UIScrollView ImageView 顶部有别针 [英] UIScrollView ImageView with pins on top

问题描述

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

I have a UIScrollView which has a UIImageView. I want to show pins on this imageView. When I add pins as subviews of the ImageView, everything is great except for when you zoom the scale transform happens on the pins also. I don't want this behavior and want my pins to stay the same.

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

So I choose to add the Pins to another view which sits on top of the ImageView and is also a subview of the UIScrollView. The idea here if you will imagine is to have a layer which hovers over the map and won't scale yet show pins over where I plot them.

如果 ImageView 可缩放，则添加到图层视图时不会调整引脚.但是，由于 ImageView 进行了缩放变换，因此问题变成了引脚的位置与原始原点 x/y 不匹配.

The pin when added to the layer view don't cale if the ImageView scales. However, the issue then becomes the position of the pins doesn't match the original origin x/y as the ImageView has had a scale transform.

基本上，这是一个带有 Pin 图的地方的自定义地图.我试图让 Pins 浮在上面，而不是在我的 ImageView 上放大和缩小，但还记得在缩放发生时我放置它们的位置.

Basically this is a custom map of a place with Pins. I am trying to have the Pins float over and not zoom in and out over my ImageView yet remember where I placed them when the zoom happens.

一些代码:

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 图的代码.

Code to add Pin later on some event.

[iconsView addSubview:pinIcon];

我一直在尝试找出如何让我的图钉在地图上悬停而不移动时发生比例尺.

I am stuck in trying tp figure out how to to get my pins to hover on the map without moving when the scale happens.

推荐答案

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

I like your idea of keeping all the pins in a view dedicated to pins (iconsView), but I decided to just add them as subviews of what you called imageViewMap.

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

Import the QuartzCore.framework file to your project.

调用您的视图控制器 MyViewController.

Call your view controller 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 的底部中心，因为我们要在那里放置一个锚点.

I'll assume you have a pin view or a view controller called DropPinViewController. If you're just using an image, it can be a UIImageView, but my pins have labels, so I used a xib. The pin should point to the bottom center of the xib because we're going to put an anchor point there.

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

In your viewDidLoad of your MyViewController, add your pin views as subviews of imageView. Add the imageView as a subview to the scrollView. Set the content size of 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;
}

这篇关于UIScrollView ImageView 顶部有别针的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！