How to match image shape in UIGestureRecognizer in iOS? - iphone

Question

I want to make shape match app like this.
Please check the second image of this link.
please check this link also,
I can drag and drop image but I am unable to match the exact location and unable to fill that image with another one.
Any idea or suggestions would be highly welcome.

Answer 1

//UIImageView *imageView1 (blank image with whom the image has to be matched),
//UIImageView *imageView2 (the coloured image that has to be matched)
Take a NSMutableArray positionArray, now whenever you add any new blank imageview (imageview1 ) to the screen add its additional information to the MutableArray like
UIImageView *imageview = [[UIImageView alloc] initWithFrame:CGRectMake(10,10,100,50)];
[imageview setTag:TagValue];
[imageview setImage:[UIImage imageNamed:#"blankMonkeyShapedImage.png"]];
//Incrementing the TagValue by one each time any blank imageview is added
TagValue++;
NSMutableDictionary *locationDic=[[NSMutableDictionary alloc] init];
[locationDic setValue:[NSNumber numberWithInt:imageview.tag] forKey:#"TagNumber"];
[locationDic setValue:[NSString stringWithFormat:#"Monkey~example"] forKey:#"ImageName"];
[locationDic setValue:[NSNumber numberWithFloat:imageview.frame.origin.x] forKey:#"PosX"];
[locationDic setValue:[NSNumber numberWithFloat:imageview.frame.origin.x] forKey:#"PosY"];
[locationDic setValue:[NSNumber numberWithFloat:imageview.frame.size.width] forKey:#"SizeWidth"];
[locationDic setValue:[NSNumber numberWithFloat:imageview.frame.size.height] forKey:#"SizeHeight"];
[self.view addSubview:imageview];
[positionArray addObject:locationDic];
Now whenever you add any new blank imageview you should repeat the same for it . Coming back to the UIGestureRecognizer selector method
-(void)panGestureRecognizer:(UIPanGestureRecognizer *)gesture
{
CGPoint translation = [gesture translationInView:self.view];
for (int i=0 ; i<[positionArray count]; i++)
{
NSMutableDictionary *lctionDic=[positionArray objectAtIndexPath:i];
float posX=[[lctionDic valueFor:#"PosX"] floatValue];
float posY=[[lctionDic valueFor:#"PosY"] floatValue];
float SizeWidth = [[lctionDic valueFor:#"SizeWidth"] floatValue];
float SizeHeight = [[lctionDic valueFor:#"SizeHeight"] floatValue];
if (translation.x >= posX && translation.x <= posX+SizeWidth &&
translation.y >= posY && translation.y <= posX+SizeHeight )
{
//Condition where the dragged objects position matches any previousluy placed balnk imageview.
if(gesture.view.tag==[[lctionDic valueFor:#"TagNumber"] intValue])
{
NSLog(#"Matched Image's Name is : %#",[lctionDic valueForKey:#"ImageName"]);
break;
}
else
continue;
}
}
}
Take special care at the time of allocating TagValues to the blank imageview and the toBeDragged imageview (both should be saem for same type of image).

Answer 2

That is bit tricky.
You are coder you know which image match what shape, May be you take two imageviews one with shape and other with image..
PS: I am just giving an idea.
So may be you can keep track with tags. Add gesture recogniser to drag images, so you will come to know which shape is being dragged. Now while moving just compare center of shape with center of your image current position. Make sure that you compare range and not exact center.
Hope this much info helps you :)