Move UIImage only inside of another UIImage

Question

I have an UIImage which is shown in an UIImageView . I also have another image in an UIImageView which lays above the first image. I want to be able to drag the second image only within the borders of the first image. To make my goal a bit more clearer look at this image: .

The green pin should be dragable but it should not be possible to drag the pin into the blue (outside of the map). At the moment the pin is dragable, but I don't know how to check if the pin is outside of the map.

EDIT: I used this method in my UIImageView subclass for the drag able pin:

- (UIColor *)colorAtPosition:(CGPoint)position {

CGRect sourceRect = CGRectMake(position.x, position.y, 1.f, 1.f);
CGImageRef imageRef = CGImageCreateWithImageInRect([[MapViewController sharedMapViewController]getImage].CGImage, sourceRect);

CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
unsigned char *buffer = malloc(4);
CGBitmapInfo bitmapInfo = kCGImageAlphaPremultipliedLast | kCGBitmapByteOrder32Big;
CGContextRef context = CGBitmapContextCreate(buffer, 1, 1, 8, 4, colorSpace, bitmapInfo);
CGColorSpaceRelease(colorSpace);
CGContextDrawImage(context, CGRectMake(0.f, 0.f, 1.f, 1.f), imageRef);
CGImageRelease(imageRef);
CGContextRelease(context);

CGFloat r = buffer[0] / 255.f;
CGFloat g = buffer[1] / 255.f;
CGFloat b = buffer[2] / 255.f;
CGFloat a = buffer[3] / 255.f;

free(buffer);

return [UIColor colorWithRed:r green:g blue:b alpha:a];
}

The MapViewController is the Viewcontroller where the UIIImageView for the map is. So i made this class a singleton to get the map-image. But again the values i get for the color are totally wired. Also i updated the photo because my ui got slighty different.

Answer 1

Simply check for the point where the drag is and determine the color at that point using this method.

Depending on your setup, you can do this eg in touchesMoved: .

Answer 2

Have you tried implementing the UIResponder's touch methods in your custom UIViewController and then referencing the 2 UIViews as follows?

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch* t = [touches anyObject];
    if (t.tapCount == 1 &&  [yourPinView pointInside:pt withEvent:nil])
    {
        CGPoint pt = [t locationInView:yourMapView];
        if ([self getColorOfPt:pt] != <blue>)
        {
            state = MOVING;
        }
    }
}

- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    if (MOVING == state)
    {
        UITouch* t = [touches anyObject];

        // Move the pin only if the current point color is not blue.
        if ([self getColorOfPt:pt] != <blue>)
        {
            CGRect r = yourPinView.frame;
            r.origin.x = <new point based on diff>
            r.origin.y = <new point based on diff>
            yourPinView.frame = r;
        }
    }
}

- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    UITouch* t = [touches anyObject];
    if (t.tapCount == 1 && MOVING == state)
    {
        state == NOT_MOVING;
    }
}

Answer 3

You could try an approach with picking the color at a CGPoint of the UIImage : iPhone Objective C: How to get a pixel's color of the touched point on an UIImageView? and detect if it is 'a blue color'.
And if it's a blue color, don't (re)position the pin

Answer 4

You can use the Answers of this Questions to get the pixel Color.

Get Pixel color of UIImage

How to get the RGB values for a pixel on an image on the iphone

I also found one Beautiful Tutorial : What Color is My Pixel? Image based color picker on iPhone

Then Detect if it's a Blue Color . And if it's a Blue Color then as @basvk said just don't (re)position the pin. Hope you get something from this.

Answer 5

Am just giving you an idea ..

I hope the map is an SVG file or if its jpeg it can be easily converted to SVG using Adobe Illustrator. Or there are many other options to do it.

and here you can find how to covert svg to a path..

here you can find how to convert EPS (illustrator paths) to CGPath

then you can check for the touch point to lie within the path

if([CGPathContainsPoint:myPoint]){

}
else{


}