iphone : How to rotate a rectangle image with touch events? - iphone

transform a square image or round image is easy to do...
But what if a rectangle image ???
This is the image I want to transform with touch event .
The circle center is (30 , 236) , if I touch any place on the screen
Imageview will transform the arrow to my touch point.
But the circle center still the same place .
I try to transform the image use a test angle
It will become like this ...
How to adjust the image ?
Also the code is here
- (void)viewDidLoad {
CGRect arrowImageRect = CGRectMake(20.0f, 20.0f, 15.0f, 220.0f);
arrow = [[UIImageView alloc] initWithFrame:arrowImageRect];
[arrow setImage:[UIImage imageNamed:#"arrow.png"]];
arrow.opaque = YES;
[self.view addSubview:arrow];
[super viewDidLoad];
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
UITouch *touch = [touches anyObject];
CGPoint touchPoint = [touch locationInView:self.view];
NSLog(#"Position X: %f \n, Y: %f",touchPoint.x,touchPoint.y);
CGAffineTransform transform = CGAffineTransformIdentity;
arrow.transform = CGAffineTransformRotate(transform, ?????? );
}
The ?????? part should be the last solution ...
Or Maybe I need to resize the imageview ???
Thanks for any reply or answer :-)
Webber

Here is the final solution I figure this problem
check this code
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch=[[event allTouches]anyObject];
[self transformSpinnerwithTouches:touch];
}
-(void)transformSpinnerwithTouches:(UITouch *)touchLocation
{
CGPoint touchLocationpoint = [touchLocation locationInView:self.view];
CGPoint PrevioustouchLocationpoint = [touchLocation previousLocationInView:self.view];
//origin is the respective piont from that i gonna measure the angle of the current position with respective to previous position ....
CGPoint origin;
origin.x = arrow.center.x;
origin.y = arrow.center.y;
CGPoint previousDifference = [self vectorFromPoint:origin toPoint:PrevioustouchLocationpoint];
CGAffineTransform newTransform = CGAffineTransformScale(arrow.transform, 1, 1);
CGFloat previousRotation = atan2(previousDifference.y, previousDifference.x);
CGPoint currentDifference = [self vectorFromPoint:origin toPoint:touchLocationpoint];
CGFloat currentRotation = atan2(currentDifference.y, currentDifference.x);
CGFloat newAngle = currentRotation- previousRotation;
temp1 = temp1 + newAngle;
//NSLog(#"temp1 is %f",temp1);
//NSLog(#"Angle:%F\n",(temp1*180)/M_PI);
newTransform = CGAffineTransformRotate(newTransform, newAngle);
[self animateView:arrow toPosition:newTransform];
}
-(void)animateView:(UIView *)theView toPosition:(CGAffineTransform) newTransform
{
arrow.transform = newTransform;
}
-(CGPoint)vectorFromPoint:(CGPoint)firstPoint toPoint:(CGPoint)secondPoint
{
CGFloat x = secondPoint.x - firstPoint.x;
CGFloat y = secondPoint.y - firstPoint.y;
CGPoint result = CGPointMake(x, y);
//NSLog(#"%f %f",x,y);
return result;
}

From the documentation about transform method:
The origin of the transform is the value of the center property, or the layer’s anchorPoint property if it was changed. (Use the layer property to get the underlying Core Animation layer object.) The default value is CGAffineTransformIdentity.
So you should be able to set the center of your rotation this way!
And for determining the rotation angle, use the atan2 or atan2f function:
float angleInRadians = atan2f(touchPoint.y-circleCenter.y , touchPoint.x-circleCenter.x);

You can re set the center after transform.
CGPoint centerBeforeTransform = view.center;
//your transform code
view.center = centerBeforeTransform;

Related

CALayer Resize is slow

I am having some performance issues with some code that I have written for resizing a CALayer using touch. It works fine but the animation is far from snappy enough and lags behind the touch location.
CGPoint startPoint;
CALayer *select;
- (CGRect)rectPoint:(CGPoint)p1 toPoint:(CGPoint)p2 {
CGFloat x, y, w, h;
if (p1.x < p2.x) {
x = p1.x;
w = p2.x - p1.x;
} else {
x = p2.x;
w = p1.x - p2.x;
}
if (p1.y < p2.y) {
y = p1.y;
h = p2.y - p1.y;
} else {
y = p2.y;
h = p1.y - p2.y;
}
return CGRectMake(x, y, w, h);
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *t1 = [[[event allTouches]allObjects]objectAtIndex:0];
CGPoint loc = [t1 locationInView:self];
startPoint = loc;
lastPoint = CGPointMake(loc.x + 5, loc.y + 5);
select = [CALayer layer];
select.backgroundColor = [[UIColor blackColor]CGColor];
select.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
[self.layer addSublayer:select];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *t1 = [[[event allTouches]allObjects]objectAtIndex:0];
CGPoint loc = [t1 locationInView:self];
select.bounds = [self rectPoint:startPoint toPoint:loc];
}
Is there a better way of achieving this?
The lag is because you are changing the bounds property of the layer, which is an animatable property.
With CALayers (the CA stands for core animation...) any change to an animatable property will be animated by default. This is called implicit animation. The default animation takes 0.25 seconds, so if you are updating it frequently, say during processing of touches, this will add up and cause a visible lag.
To prevent this, you must declare an animation transaction, turn off implicit animations, then change the properties:
[CATransaction begin];
[CATransaction setDisableActions:YES];
layer.bounds = whatever;
[CATransaction commit];
Accepted answer in Swift 3/4:
CATransaction.begin()
CATransaction.setDisableActions(true)
layer.bounds = whatever
CATransaction.commit()
Worth mentioning that this also applies to .frame properties, for example when you're resizing an AVPlayerLayer:
override func layoutSubviews() {
CATransaction.begin()
CATransaction.setDisableActions(true)
playerLayer.frame = self.bounds
CATransaction.commit()
}

How to restrict uilabel to be dragged within a particular frame only?

I have added one label in imageview and added Pangesture for dragging label.With this code label is dragged within the whole.but i want to restrict the label drag within the frame of uiimageview only.
How can i achieve this? The code for adding lable and gesture is as below.
lblQuote=[[UILabel alloc]init];
lblQuote.frame=CGRectMake(130,380, 400,100);
lblQuote.userInteractionEnabled=TRUE;
lblQuote.backgroundColor=[UIColor clearColor];
lblQuote.userInteractionEnabled=TRUE;
lblQuote.lineBreakMode=UILineBreakModeWordWrap;
lblQuote.font=[UIFont systemFontOfSize:40.0];
lblQuote.tag=500;
lblQuote.text=#"";
CGSize maximumLabelSize = CGSizeMake(296,9999);
CGSize expectedLabelSize = [strQuote sizeWithFont:lblQuote.font
constrainedToSize:maximumLabelSize
lineBreakMode:lblQuote.lineBreakMode];
//adjust the label the the new height.
int nooflines=expectedLabelSize.height/16.0;
lblQuote.numberOfLines=nooflines;
// CGRect newFrame = lblQuote.frame;
//newFrame.size.height = expectedLabelSize.height;
// yourLabel.frame = newFrame;
lblQuote.textAlignment=UITextAlignmentCenter;
UIPanGestureRecognizer *gesture = [[[UIPanGestureRecognizer alloc]
initWithTarget:self
action:#selector(labelDragged:)] autorelease];
[lblQuote addGestureRecognizer:gesture];
- (void)labelDragged:(UIPanGestureRecognizer *)gesture
{
UILabel *label = (UILabel *)gesture.view;
CGPoint translation = [gesture translationInView:label];
// move label
label.center = CGPointMake(label.center.x + translation.x,
label.center.y + translation.y);
// reset translation
[gesture setTranslation:CGPointZero inView:label];
}
I tried moving label on touches event.code is as below:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint pointMoved = [touch locationInView:imgView2];
lblQuote.frame=CGRectMake(pointMoved.x, pointMoved.y, lblQuote.frame.size.width, lblQuote.frame.size.height);
}
But movement is not as smooth as pan gesture recognizer.sometimes touch is in another direction and label movement in some other direction and sometimes more or less movement than touch.
Well this is totally depends on your logics although i wrote a code for you, hope this will help you!!
Make sure your UILabel UserIntraction is set to be YES; and use touch began and touch moved methods instead of pangesture.... see this now
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event allTouches]anyObject];
if([touch view] == lblName)
{
NSLog(#"touch on label");
CGPoint pt = [[touches anyObject] locationInView:lblName];
startLocation = pt;
// startLocation is a CGPoint declare globaly in .h..and lblName is your UILabel
}
}
- (void) touchesMoved:(NSSet *)touches withEvent: (UIEvent *)event
{
UITouch *touch = [[event allTouches]anyObject];
if([touch view] == lblName)
{
CGPoint pt = [[touches anyObject] previousLocationInView:lblName];
CGFloat dx = pt.x - startLocation.x;
CGFloat dy = pt.y - startLocation.y;
CGPoint newCenter = CGPointMake(lblName.center.x + dx, lblName.center.y + dy);
//now put if condition for dragging in specific area
CGFloat min_X = lblName.center.x + dx - lblName.frame.size.width/2.0;
CGFloat max_X = lblName.center.x + dx + lblName.frame.size.width/2.0;
CGFloat min_Y = lblName.center.y + dy - lblName.frame.size.height/2.0;
CGFloat max_Y = lblName.center.y + dy + lblName.frame.size.height/2.0;
if((min_X >= imageView.frame.origin.x && max_X <= imageView.frame.origin.x + imageView.frame.size.width) && (min_Y >= imageView.frame.origin.y && max_Y <= imageView.frame.origin.y + imageView.frame.size.height))
{
lblName.center = newCenter;
}
}
}

How To select all the targets with touches rect in cocos2d

i want to select my targets using touches rect
am creating my unselected dots by coding like these:-
targets1 = [[NSMutableArray alloc] init];
for(int i=0;i<3;i++)
{
for (int y=0; y<3; y++) {
CCTexture2D *texture =
[[CCTextureCache sharedTextureCache] addImage:#"UnselectedDot.png"];
block = [CCSprite spriteWithTexture:texture rect:CGRectMake(0,0,82,82)];
CGFloat xoffset = ((block.contentSize.width)*10) + (((block.contentSize.height)-175)*y);
block.position = ccp( (i*82)+80,xoffset);
[bg1 addChild:block];
[targets1 addObject:block];
}
}
below is my sample output .
now i need to select all the dots by touches method. i written coding like these:-
- (void)update:(ccTime)dt {
// NSLog(#"%#",targets1);
for (CCSprite *sprite in targets1) {
CGRect dotrect = CGRectMake(sprite.position.x,
sprite.position.y-95,
sprite.contentSize.width,
sprite.contentSize.height);
CGFloat x = location.x;
CGFloat y = location.y;
CGFloat width = (location1.x - location.x);
CGFloat height = -(location1.y - location.y);
CGRect touchrect = CGRectMake (x, y, width,height);
NSLog(#"dotrect = %f,%f,%f,%f",dotrect.origin.x,dotrect.origin.y,dotrect.size.width,dotrect.size.height );
NSLog(#"touch rect = %f,%f,%f,%f,%f,%f",touchrect.origin.x,touchrect.origin.y,touchrect.size.width,touchrect.size.height,location1.x,location1.y);
if( CGRectContainsRect(dotrect, touchrect))
{ //collision detection
NSLog(#"am touched dot ");
}
}
}
- (BOOL)ccTouchBegan:(UITouch *)touch withEvent:(UIEvent *)event {
location = [touch locationInView:[touch view]];
location = [[CCDirector sharedDirector] convertToGL:location];
NSLog(#"am touched began");
return YES;
}
- (void)ccTouchEnded:(UITouch *)touch withEvent:(UIEvent *)event {
location1 = [touch locationInView:[touch view]];
location1 = [[CCDirector sharedDirector] convertToGL:location1];
location1 = [self convertToNodeSpace:location1];
}
as per above coding my concept is :- using touches began and touches ended am making rectangle here.. inside these touchrect my unselected dot rect came means collsison detected.. then i can do my stuffs there. but its not colliding all.
am not getting were am making mistake.
Edit :1
now i got why coillision not working... actually insidemy touches rect having multiple rect.. so only ... here, am using rectcontainsrect.. tahts the problem.. any other method to rect having several rect for colllsion detection..
Try using:
CGPoint location=[touch locationInView:[touch view]];
location = [self convertTouchToNodeSpace:touch];
CGRectContainsPoint([dot boundingBox], location);
inside the CCTouch.. methods (as you wish depending on what you want to do).

Rotate image on center using one finger touch

I want to rotate the below image on a center point using one finger touch...
And i want to display the value of the image with the label when I rotate the image using touch.
I have done the image rotation but the problem is that how to set the value of the image according to rotation.
The angle of the rotation is increase so i can not set the value.
Can any one help me?
The code is below
float fromAngle = atan2(firstLoc.y-imageView.center.y,
firstLoc.x-imageView.center.x);
NSLog(#"From angle:%f",fromAngle);
float toAngle = atan2( currentLoc.y-imageView.center.y,
currentLoc.x-imageView.center.x);
NSLog(#"to Angle:%f",toAngle);
// So the angle to rotate to is relative to our current angle and the
// angle through which our finger moved (to-from)
float newAngle =angle+(toAngle-fromAngle);
NSLog(#"new angle:%.2f",newAngle);
CGAffineTransform cgaRotate = CGAffineTransformMakeRotation(newAngle);
imageView.transform=cgaRotate;
angle = newAngle;
Can any one help me ?
Wasn't totally sure what you were after; but try out this code.
If you create a new View-based Application project called 'Rotation' and replace the code in RotationViewController.h and .m for the following you'll get a green block that you can rotate using your calculations. You can replace the green block UIView with your UIImageView, or anything else you want to spin.
RotationViewController.h
#import <UIKit/UIKit.h>
#interface RotationViewController : UIViewController
{
UIView* m_block;
UILabel* m_label;
CGPoint m_locationBegan;
float m_currentAngle;
}
- (float) updateRotation:(CGPoint)_location;
#end
RotationViewController.m
#import "RotationViewController.h"
double wrapd(double _val, double _min, double _max)
{
if(_val < _min) return _max - (_min - _val);
if(_val > _max) return _min - (_max - _val);
return _val;
}
#implementation RotationViewController
- (void)viewDidLoad
{
[super viewDidLoad];
CGRect blockFrame = CGRectMake(0, 0, 200, 200);
m_block = [[UIView alloc] initWithFrame:blockFrame];
m_block.backgroundColor = [UIColor greenColor];
m_block.center = self.view.center;
[self.view addSubview:m_block];
[m_block release];
CGRect labelFrame = CGRectMake(0, 0, 320, 30);
m_label = [[UILabel alloc] initWithFrame:labelFrame];
m_label.text = #"Loaded";
[self.view addSubview:m_label];
}
- (void) touchesBegan:(NSSet *)_touches withEvent:(UIEvent *)_event
{
UITouch* touch = [_touches anyObject];
CGPoint location = [touch locationInView:self.view];
m_locationBegan = location;
}
- (void) touchesMoved:(NSSet *)_touches withEvent:(UIEvent *)_event
{
UITouch* touch = [_touches anyObject];
CGPoint location = [touch locationInView:self.view];
[self updateRotation:location];
}
- (void) touchesEnded:(NSSet *)_touches withEvent:(UIEvent *)_event
{
UITouch* touch = [_touches anyObject];
CGPoint location = [touch locationInView:self.view];
m_currentAngle = [self updateRotation:location];
}
- (float) updateRotation:(CGPoint)_location
{
float fromAngle = atan2(m_locationBegan.y-m_block.center.y, m_locationBegan.x-m_block.center.x);
float toAngle = atan2(_location.y-m_block.center.y, _location.x-m_block.center.x);
float newAngle = wrapd(m_currentAngle + (toAngle - fromAngle), 0, 2*3.14);
CGAffineTransform cgaRotate = CGAffineTransformMakeRotation(newAngle);
m_block.transform = cgaRotate;
int oneInFifty = (newAngle*50)/(2*3.14);
m_label.text = [NSString stringWithFormat:#"Angle: %f 1in50: %i", newAngle, oneInFifty];
return newAngle;
}
#end

How should I interact with the geometry of a UIView, disregarding any transforms applied?

I have a view that I would like the user to rotate around its center, by tapping and holding somewhere and just move their finger round and round.
I have all the geometry worked out; What I do is store the initial touch angle relative to the center as offsetAngle, then my touchesMoved method looks like this:
- (void) touchesMoved: (NSSet *)touches withEvent:(UIEvent *)event {
self.transform = CGAffineTransformMakeRotation(0);
CGPoint location = [[touches anyObject] locationInView: self];
CGPoint actualCenter = [self convertPoint: self.center fromView: self.superview];
CGPoint relativeTouch = [MathHelper translatePoint:location relativeTo: actualCenter];
CGPoint zero = CGPointMake(0, 0);
float angle = [MathHelper getAngleForPoint:zero andPoint:relativeTouch];
self.transform = CGAffineTransformMakeRotation(offsetAngle-angle);
}
The ugly bit is the first line, where I have to restore the rotation in order to get the correct event positions in the view. If I don't that, then the locations jump all over the place as there's no continuity, since the view is rotating...
Another issue is when you want to manipulate a view's frame (eg. moving it down), when the view has a transform applied:
- (IBAction)toggleSettingsView {
BOOL state = [settingsSwitch isOn];
float height = optionsView.bounds.size.height;
CGRect polygonFrame = polygonView.frame;
[UIView beginAnimations:#"advancedAnimations" context:nil];
[UIView setAnimationDuration:0.3];
if (state) {
optionsView.alpha = 1.0;
polygonFrame.origin.y += height;
} else {
optionsView.alpha = 0.0;
polygonFrame.origin.y -= height;
}
polygonView.frame = polygonFrame;
[UIView commitAnimations];
}
This distorts the view heavily.
I must mention that both the CGTransform and the CALayer transform have the same effect.
This smells like I'm doing something wrong, but I don't know what I should be doing.
I would use the coordinate system of the superview, since it is unaffected by the rotation:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
CGPoint location = [[touches anyObject] locationInView:self.superview];
CGPoint relativeTouch = [MathHelper translatePoint:location relativeTo:self.center];
CGPoint zero = CGPointMake(0, 0);
float angle = [MathHelper getAngleForPoint:zero andPoint:relativeTouch];
self.transform = CGAffineTransformMakeRotation(offsetAngle-angle);
}
Just save the original transform in an ivar and call it a day.