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.

score 5 · Answer 1 · edited May 23 '17 at 12:09

5

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 e.g. in touchesMoved:.

edited May 23 '17 at 12:09

Community

1
1

answered Jan 07 '13 at 16:16

Mundi

79,884
17
117
140

What i forgot to say is that the dark-blue is the background of the uiimageview it isn't part of the uiimage which is a transparent png. Is this important before trying this color-picking method ? – dehlen Jan 07 '13 at 16:24
No, you can check for the transparent color as long as it is reserved for the "out-of-bounds" area. – Mundi Jan 07 '13 at 16:34
isn't there any other method ? I don't get usable values because my pin-uiimageview lays on a uiview and under this view is my map-uiimageview. Maybe i can work with cgrectcointainspoint or pointInside ? This color approach is not working for me. – dehlen Jan 07 '13 at 16:49
Here is the current structure : self.view(UIView) -> mapView (UIImageView)->pinView (UIView)->dragablePinView (UIImageView). So when i try to get the pixel Color of mapView to move dragablePinView or not it fails with wired rgb values. I think this is because the pinView is between them. So any other solution ? – dehlen Jan 07 '13 at 17:06
Then don't add the `pinView` in the `mapView`, but add it above the `mapView`, so in `self.view`. Adding subviews into an `UIImageView` is bad practice – basvk Jan 08 '13 at 10:32

paiego · Accepted Answer · 2013-04-30T22:27:56.013

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;
    }
}

score 3 · Answer 3 · edited May 23 '17 at 12:24

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

edited May 23 '17 at 12:24

Community

1
1

answered Jan 07 '13 at 16:15

basvk

4,437
3
29
49

Have a look at my comments on the answer below. Do you have any other idea how to solve this ? – dehlen Jan 08 '13 at 10:24

score 1 · Answer 4 · edited May 23 '17 at 12:33

1

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.

edited May 23 '17 at 12:33

Community

1
1

answered Jan 10 '13 at 13:09

Bhavin

27,155
11
55
94

now i get results but not the right one. The colors i get are totally wired. See my edited answer for more details. – dehlen Jan 10 '13 at 14:39

raw3d · Answer 5 · 2013-01-10T18:58:32.683

1

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{


}

edited Jan 10 '13 at 18:58

answered Jan 10 '13 at 18:38

raw3d

3,475
1
22
25

Move UIImage only inside of another UIImage

5 Answers5

Linked