Adding and then moving multiple UIImages on touch

[thomaswguy]

Hi i am attempting to implement the following but struggling. Any advice would be highly appreciated


So if a user touches a blank part of the screen i would like a square to appear.

(I can do this, and have done by adding a UIImageView at the touched location using touchesBegan)

If the user touches one of the squares that has appeared i would like them to be able to move that square around.

(Even though there are tutorials on this... i am struggling... i think it is because i am trying to move an image that i have added on touch... i am attempting to move this image with touchesmoved)

So in effect the user has the option to add more squares or just move the squares that are already on the screen.

On top of that! Is it then possible to track the co-ordinates of all the squares on the screen...so you could call a method to draw lines between these co-ordinates or something similar?

This all seems like mind blowing stuff to me.so apologies if it seems like a basic question!

Thanks in advance for any responses

[Brix]

Can you show us some code on how you add/place the UIImageView on your touchBegan? Are you using something like this:

CGPoint _Touch = [touch locationInView:self.view];
UIImageView *ImageView = [[UIImageView alloc] initWithFrame:CGRectMake(_Touch.x,_Touch.y,50,50)];
ImageView.backgroundcolor = [UIColor blackColor];
[self.view addSubview:ImageView];
[ImageView release];

[thomaswguy]

Originally Posted by Brix

Can you show us some code on how you add/place the UIImageView on your touchBegan? Are you using something like this:

CGPoint _Touch = [touch locationInView:self.view];
UIImageView *ImageView = [[UIImageView alloc] initWithFrame:CGRectMake(_Touch.x,_Touch.y,50,50)];
ImageView.backgroundcolor = [UIColor blackColor];
[self.view addSubview:ImageView];
[ImageView release];

Hi Brix,

Its changed from a square to a dot now ;P

this is how i am adding the dot in touchesbegan... i have also figured out how to move the dot (which is also posted below in touchesMoved) but i am only able to move the last dot touched.... not any of the dots added previously.

@ interface

	CGPoint firstTouch;  
	CGPoint lastTouch;
	UIImage *drawImage;  
	UIImageView *dotHolder;

@implementation

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
	UITouch *touch = [touches anyObject];
	firstTouch = [touch locationInView:self]; //store current location so we know where the user first touched the screen
	lastTouch = [touch locationInView:self]; 
	

	int lastTouchUpperX = lastTouch.x + 10;
	int lastTouchLowerX = lastTouch.x - 10;
	int lastTouchUpperY = lastTouch.y + 10;
	int lastTouchLowerY = lastTouch.y - 10;
	
	//creates a radius around the last touch... if the dot falls within the radius it will collect it and move it.
	if (((dotHolder.center.x > lastTouchLowerX) && (dotHolder.center.x < lastTouchUpperX)) && ((dotHolder.center.y > lastTouchLowerY) && (dotHolder.center.y < lastTouchUpperY)))  
	{
		NSLog(@"Cant touch this dumm dumm de dumm, dummmm dum");
	}
	else
	{
	CGFloat horizontalOffset = drawImage.size.width / 2;//this is for drawing the dot
	CGFloat verticalOffset = drawImage.size.height / 2;
	UIImageView *tempDotHolder = [[UIImageView alloc] initWithFrame:CGRectMake(lastTouch.x - horizontalOffset, lastTouch.y - verticalOffset, drawImage.size.width, drawImage.size.height) ];
	tempDotHolder.image = drawImage;
	self.dotHolder = tempDotHolder;
	[tempDotHolder release];
	[self addSubview:dotHolder];
	}
	[self setNeedsDisplay]; //this indicated that the view needs to be redrawn

-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
	
	// get touch event
	UITouch *touch = [[event allTouches] anyObject];
	
	// get the touch location
	CGPoint touchLocation = [touch locationInView:self];
	
	// move the image view
	dotHolder.center = touchLocation;
}

So the above code does the following:

- If the user clicks in a blank space a dot is added to the view, this dot can be dragged around and released.

- If the user clicks on the last dot created (and within the set radius) it will pick that dot back up which can then be dragged around the screen some more.

Problems:

- Unable to "pick up" and move dots, other than the last one created.
- Not sure how to track the co-ordinates of the dots placed? Was thinking of creating an array to hold the co-ordinates of the last dots placed in touchesended ... but this would then also store the coordinates of places where dots have previously rested if a dot has then been moved from that location.

If i get any further i will post it up... but i have to tell you progress is currently very slow :P

Any guidance is highly appreciated.

Back to the grind

Cheers

Tom

[thomaswguy]

Just had a thought...

How about creating a loop that will create a different instance of the image every time the user touches a blank section of the screen?

And have a way of naming the instance differently each time e.g dotholderX, where X increments by 1 every time a new instance of the dot is created.

Although that wont really help me figure out how to move previously placed dots :S

but could be a good way to track the individual instances? Im sure there is a better way...

cheers

Tom

[mlo]

Hmm, personally I'd give each dot an id number on generation, then store the last x,y coordinate along with the id in a table ; then at the beginning of each touchesbegan you only need to parse through the array and compare the current x,y coords to the array values; if they're equal then grab that dot by it's id number if not create a new dot.

[Brix]

Try this, I can move Images but I cant prevent from adding image. Please update me also if you came up with a better solution.

[thomaswguy]

Originally Posted by Brix

Try this, I can move Images but I cant prevent from adding image. Please update me also if you came up with a better solution.

Hi Brix,

Thanks for posting up some code

I will take a look when i get to my Mac in a couple of hours. Will let you know how i get on and if i change or add anything

Mlo - i have been thinking about implementing it that way ...but have been struggling with how this might be done?

Any suggestions on the implementation of that idea?

Thanks again for the suggestions and i will keep you updated with progress or solutions!

Cheers

Tom

[mlo]

I'd probably use a UiImage for each dot and create it via code for each new instance, you can then use coregraphics to draw it (ie cgrect etc) at the given coords and store it's name and x,y coords in an array, you will need a bitmap for the image.

Now if you know the maximum number of dots you are going to allow then you could create them in IB and set up the properties and outlets ahead of time, then make them hidden until you need a new one then make the next available one visible in your code.

Not anywhere near my Mac atm so that's as much as I can think of.

icodeblog has some gaming tutorials that show you how to move round a UiImage, might be worth a look as well.

[thomaswguy]

Originally Posted by mlo

I'd probably use a UiImage for each dot and create it via code for each new instance, you can then use coregraphics to draw it (ie cgrect etc) at the given coords and store it's name and x,y coords in an array, you will need a bitmap for the image.

Now if you know the maximum number of dots you are going to allow then you could create them in IB and set up the properties and outlets ahead of time, then make them hidden until you need a new one then make the next available one visible in your code.

Not anywhere near my Mac atm so that's as much as I can think of.

icodeblog has some gaming tutorials that show you how to move round a UiImage, might be worth a look as well.

Ok thanks Mlo... if the route i am trying to take now does not work out i will have a look at using images that are already hidden in IB.

Thanks again for the code Brix i am taking a look at it now and seeing what i can do although it looks like it may take a long time !

Cheers again.

Tom

[thomaswguy]

That code really helped me out Brix, i can now move all of the dots that are on the screen, AND if i click in a blank space a new dot is created.

I used the method you used to discover which image needs to be moved (CGRectContainsPoint) which is looking for the lastTouch in the UIImageView Frame.

The only issue i am having with that is that when you move a dot too quickly it drops it because obviously the last touch managed to leave the frame of the UIImage..... not sure if this would act differently on the device?

To stop it from creating a new image every-time, and still have the ability to move all images i created a similar loop to you in Touches began.... If the user touches a UImage view it exits from the touches began method Else, create new image.... make sense? (if you want me to post the code i can)

SO! a couple of issues!

1. When i'm dragging a UIImageView, if the image runs over the top of another image, it will drop the image i am currently moving and pick up the other one! Don't have the foggiest how i might resolve this, but i'm thinking about it ... so i would be grateful for any ideas.

2. If you move your finger too fast it drops the image you are moving... i think this is because in touchesMoved we are moving UIImages if the coordinates of the current touch is within the frame of the image..and if you go to quickly it leaves the frame?? sound right?

Any help with those two points would be super helpful.

If i come up with anything i will post it here

[Brix]

Originally Posted by thomaswguy

(if you want me to post the code i can)

Yes please =)