iOS - Math help - base image zooms with pinch gest

问题:

I have an iPad application that has a base image UIImageView (in this case a large building or site plan or diagram) and then multiple 'pins' can be added on top of the plan (visually similar to Google Maps). These pins are also UIImageViews and are added to the main view on tap gestures. The base image is also added to the main view on viewDidLoad.

I have the base image working with the pinch gesture for zooming but obviously when you zoom the base image all the pins stay in the same x and y coordinates of the main view and loose there relative positioning on the base image (whose x,y and width,height coordinates have changed).

So far i have this...

- (IBAction)planZoom:(UIPinchGestureRecognizer *) recognizer;
{
    recognizer.view.transform = CGAffineTransformScale(recognizer.view.transform, recognizer.scale, recognizer.scale);
    recognizer.scale = 1;

    for (ZonePin *pin in planContainer.subviews) {
        if ([pin isKindOfClass:[ZonePin class]]){
            CGRect pinFrame = pin.frame;

            // ****************************************
            // code to reposition the pins goes here...
            // ****************************************

            pin.frame = pinFrame;
        }
    }
}

I need help to calculate the math to reposition the pins x/y coordinates to retain there relative position on the zoomed in or out plan/diagram. The pins obviously do not want to be scaled/zoomed at all in terms of their width or height - they just need new x and y coordinates that are relative to there initial positions on the plan.

I have tried to work out the math myself but have struggled to work it through and unfortunately am not yet acquainted with the SDK enough to know if there is provision available built in to help or not.

Help with this math related problem would be really appreciated! :)

Many thanks, Michael. InNeedOfMathTuition.com

回答1:

First, you might try embedding your UIImageView in a UIScrollView so zooming is largely accomplished for you. You can then set the max and min scale easily, and you can scroll around the zoomed image as desired (especially if your pins are subviews of the UIImageView or something else inside the UIScrollView).

As for scaling the locations of the pins, I think it would work to store the original x and y coordinates of each pin (i.e. when the view first loads, when they are first positioned, at scale 1.0). Then when the view is zoomed, set x = (originalX * zoomScale) and y = (originalY * zoomScale).

I had the same problem in an iOS app a couple of years ago, and if I recall correctly, that's how I accomplished it.

EDIT: Below is more detail about how I accomplished this (I'm looking my old code now).

I had a UIScrollView as a subview of my main view, and my UIImageView as a subview of that. My buttons were added to the scroll view, and I kept their original locations (at zoom 1.0) stored for reference.

In -(void)scrollViewDidScroll:(UIScrollView *)scrollView method:

for (id element in myButtons)
{
   UIButton *theButton = (UIButton *)element;
   CGPoint originalPoint = //get original location however you want
   [theButton setFrame:CGRectMake(
       (originalPoint.x - theButton.frame.size.width / 2) * scrollView.zoomScale,
       (originalPoint.y - theButton.frame.size.height / 2) * scrollView.zoomScale,
       theButton.frame.size.width, theButton.frame.size.height)];
}

For the -(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView method, I returned my UIImageView. My buttons scaled in size, but I didn't include that in the code above. If you're finding that the pins are scaling in size automatically, you might have to store their original sizes as well as original coordinates and use that in the setFrame call.

回答2:

UPDATE...

Thanks to 'Mr. Jefferson' help in his answer above, albeit with a differing implementation, I was able to work this one through as follows...

I have a scrollView which has a plan/diagram image as a subview. The scrollView is setup for zooming/panning etc, this includes adding UIScrollViewDelegate to the ViewController.

On user double tapping on the plan/diagram a pin image is added as a subview to the scrollView at the touch point. The pin image is a custom 'ZonePin' class which inherits from UIImageView and has a couple of additional properties including 'baseX' and 'baseY'.

The code for adding the pins...

- (IBAction)planDoubleTap:(UITapGestureRecognizer *) recognizer;
{
    UIImage *image = [UIImage imageNamed:@"Pin.png"];
    ZonePin *newPin = [[ZonePin alloc] initWithImage:image];

    CGPoint touchPoint = [recognizer locationInView:planContainer];
    CGFloat placementX = touchPoint.x - (image.size.width / 2);
    CGFloat placementY = touchPoint.y - image.size.height;

    newPin.frame = CGRectMake(placementX, placementY, image.size.width, image.size.height);
    newPin.zoneRef = [NSString stringWithFormat:@"%@%d", @"BF", pinSeq++];
    newPin.baseX = placementX;
    newPin.baseY = placementY;
    [planContainer addSubview:newPin];
}

I then have two functions for handling the scrollView interaction and this handles the scaling/repositioning of the pins relative to the plan image. These methods are as follows...

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


- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    for (ZonePin *pin in planContainer.subviews) {
        if ([pin isKindOfClass:[ZonePin class]]){
            CGFloat newX, newY;

            newX = (pin.baseX * scrollView.zoomScale) + (((pin.frame.size.width * scrollView.zoomScale) - pin.frame.size.width) / 2);
            newY = (pin.baseY * scrollView.zoomScale) + ((pin.frame.size.height * scrollView.zoomScale) - pin.frame.size.height);

            CGRect pinFrame = pin.frame;
            pinFrame.origin.x = newX;
            pinFrame.origin.y = newY;
            pin.frame = pinFrame;
        }
    }
}

For reference, the calculations for position the pins, by the nature of them being pins' centres the pin image on the x axis but has the y-axis bottom aligned.

The only thing left for me to do with this is to reverse the calculations used in the scrollViewDidScroll method when I add pins when zoomed in. The code for adding pins above will only work properly when the scrollView.zoomScale is 1.0.

Other than that, it now works great! :)