I am having some issues understanding and using anchorPoint. As I understand it, the default anchor is (.5,.5) which applies transforms about the center of objects. However, when I placed a UIButton into a CCUIViewWrapper, I noticed that scaling it would scale about the right side of the object (i.e. if I scaled from 0 to 1, it would grow from right to left).
I wasn't sure what to make of this, but with tinkering found that I had to adjust the anchor point to (0,0) in order to make scaling occur about the center of the object. Why would this happen?
Further more, while I expect that to make the anchor be the bottom left of the object because Cocos2d is bottom left oriented for (0,0), it did not and in fact aligned the top left with my wrapper's position value.
In the end, what worked to scale about the center was to make the anchor point (0,0) and position the wrapper using the top left of the object, almost as if it were using the UIView coordinates to place the object. I'm not certain if this behavior is something occurring strictly with wrapped UIViews in CCUIViewWrappers nor do I know if this is simply correct behavior and I'm completely misunderstanding it.
Can someone clarify and explain?
I've had a similar problem with the wrapper. One of the issue here is that the wrapper attaches the view to the root window instead of the director's OpenGL view, which means it wont respect whatever autorotation the OpenGL view is using. The code looks like it is trying compensate for the difference between UIView and Cocos2d coordinates but doesn't seem to do it properly when it comes to anchor points. I ended up just using UIView coordinates in the end but I did experiment with an alternate method for setting the anchor point by using:
uiItem.center = ccp((self.anchorPoint.x - 0.5f) * self.contentSize.width, (self.anchorPoint.y - 0.5f) * self.contentSize.height);
At the start of the updateUIViewTransform method in CCUIViewWrappers before setting the view's transform. This makes anchor points behave as expected, at least for views attached directly to a layer.
Instead of using:
uiItem.center = ccp((self.anchorPoint.x - 0.5f) * self.contentSize.width, (self.anchorPoint.y - 0.5f) * self.contentSize.height);
which set the anchor point to the bottom right, I used:
uiItem.center = ccp(-uiItem.bounds.size.height/2, uiItem.bounds.size.width/2);
which set it to the center.
The reason the x and y are flipped, I'm guessing it's because my item is rotated by 90.
Related
I am developing a Ui which has a look & feel like a speedometer of vehicle which has a needle which is fixed from one end & rotate with some angle with that fixed end.
I have done some sort of code for that
self.SIV_Needle.transform =CGAffineTransformMakeRotation((CGFloat(M_PI_2)/180.0) * 80)
Its working but the imageView loss its original x & y coordinates from one end.I have tried lot of things like changing anchor point , center but doesn't seems to work well.
Responding to my comment, OP said the issue was that the control was not rotating around the desired axis. OP was not (I think) clear about what the desired axis is, nor about what the current axis is (I am using axis interchangeably to mean pivot point). There are a few potential fixes.
1) This needle thing is an ImageView, so you could do a simple hack and just make your image bigger or smaller to fix the rotation. To explain: if your needle is rotating around the center of the needle and not the ball part, then simply double the width of the image, such that the needle only takes up the right side and thus the "ball" of the needle is the pivot point.
2) Set the anchor property of the transform to wherever you want it to be rotating around. See this similar SO question & answer.
You need to translate the UI , to compensate the position change comes due to roatation
Try to change the anchor point of the needle imageView and then add the Rotation. I have not tried it, but i think it should work.
You can archive this by putting your pin image in a UIView at desired position and rotating your main UIView.
like;
let myView:UIIView = UIIView(); //set frame of UIView
let pinImgView:UIVImageView(); // set pin image and frame of required position
//--
myView.addSubview(pinImgView);
//--
myView.transform =CGAffineTransformMakeRotation((CGFloat(M_PI_2)/180.0) * 80);
I have made a sample project for this. you can take idea from it;
http://www.filedropper.com/stackover
or
http://wikisend.com/download/263926/StackOver.zip
I'm creating a car driving game for iOS, but there's a problem:
I added these lines to my ViewController.m:
_carView.transform = CGAffineTransformMakeRotation(steeringTemp-45);
steeringTemp is a float variable wich is changed by the left and right steering buttons.
But when I run the app and press the steering button, the car is rotating in an ugly way. It seems like the center point is changing everytime and the car is rotating like a triangle. I tried to set the origin to the center of the _carView, which is an image view, but it didn't work.
First of all let me tell you that you should be using radians, and not degrees. You can use this macro:
#define DEGREES_TO_RADIANS(angle) (angle * M_PI / 180.0)
And wrap it around your values:
CGAffineTransformMakeRotation(DEGRESS_TO_RADIANS(steeringTemp-45));
Second usually transforms go wrong if you:
Are rotating with the wrong anchorPoint (usually happens with clock pointers)
Don't pay attention to the order of transforms
Anchor Point
You need to make sure that your anchor point to the place you wanted. The anchorPoint defaults to the center, but you can set it to any point you like in the layer that is backed by the view. The anchor point has relative coordinates, so it goes from 0 to 1. (0,0) is your left top corner and (1,1) is your bottom right corner.
You can set it like this:
_carView.layer.anchorPoint = CGPointMake(0, 0);
Transforms order is important
Additionally, be careful if you apply more transforms you should pay attention to the order of those transforms. The previous transforms will always affect the next transforms. A rotation followed by a translation is way different than a translation followed by a rotation.
I'm trying to flip a sprite horizontally i.e.
sprite.scaleX = -1;
What I notice is that the sprite is flipped around its bottom left corner. However since I don't want to mess up my positioning of the sprite (I'd like the sprite to stay in the original place), so I tried to set its anchor point to (1,0)
sprite.anchorPoint = ccp(1,0);
My reasoning is this:
Since the sprite should be flipped around the anchorPoint, if I set the anchorPoint to its bottom right corner then that corner will then become the 'left bottom' corner of the changed sprite; and I should be able to move the sprite using that new anchorPoint just as I do with a normal sprite of anchorPoint (0,0).
However apparently it's not working as I expected. What am I missing?
Edit
What I really want to do is to flip a sprite and then be able to control its position via the left bottom corner - well the left bottom corner of the sprite that I see. I don't think I fully understand how scaleX = -1 is applied relating to the anchorPoint. If somebody can explain to me the concepts behind these parameters then that will greatly help me.
I have to correct myself on making the assertion that setting anchorPoint doesn't help. In fact, setting anchorPoint to (1,0) is exactly the solution to the problem, only that somehow some bug prevented me from recognizing it in my test.
Is it possible to get the same coordinates from UIScrollView whether it's zoomed or not.
That is, For example, consider a plain screen of 320.0F and 480.0F.
Tap on a point; view will give me something like (60.0F, 80.0F).
Zooming-in or zooming-out on the view so that it will have either bigger or smaller zoom scale but making sure the zoomed area to contain the point that was tapped which was (60.0F, 80.0F) according to previous zoom scale.
Tap on the point again, the view will give me different coordinate value.
The Thing is, I want to have the same coordinate value whether the view is zoomed or not. The idea is simple. I want to show images zoomed & interactive without changing its coordinate. Considering an UIScrollView applied of the idea with its height of 1.0 and width of 0.66, I think there would be some pros programming this way, when making an interactive app without using OpenGL, cocos2d or whatever 3D engines out there.
Do you guys have any idea if it's supported or not? Either case, please don't wait any second to reply. Thanks
You can calculate it by yourself using content size as follows,
x = (original_Width/ width_after_zooming) * point.x
y = (original_height/ height_after_zooming) * point.y
Here is a picture:
Is there a way to expand layer (the area where you draw), to be larger.
At first i thought that (0,0) is the center, but it seems that it is a starting point for layer.
I was planning to draw content at (0,0) then to translate it as necessary.
Or, must i draw whatever i have in center of layer (width/2, height/2) and then translate as necessary?
EDIT_01:
The offset of layer is made by panning gesture recognizer. That is on purpose, since app must have panning of content.
Answers
At first i thought that (0,0) is the center, but it seems that it is a starting point for layer
(0,0) in iOS begins at the top left of the layer, and gets greater going right and down. In OS X, (0,0) begins in the bottom left, and gets greater going right and up.
Is there a way to expand layer (the area where you draw), to be larger
The question I have is, do you need to? This can have performance issues, as you're rendering and storing drawing data when you don't really need to, causing more memory to be used. It looks like your layer is filling the screen correctly, it's just translated incorrectly. If you move it to the correct place, you shouldn't need to expand the layer off screen.
This doesn't mean you can't translate other layers off screen, of course you can. But really you don't want to expand the size of your drawing area to expand off screen.
Must i draw whatever i have in center of layer (width/2, height/2) and then translate as necessary?
If you want them drawn into the center, then yes. You can create your own method to translate your own co-ordinate space into the co-ordinate space of the layer, to make this easier for you.
Documentation
I'd suggest reading this, to get a greater grasp of the geometry workings of CALayer:
https://developer.apple.com/library/ios/#documentation/Cocoa/Conceptual/CoreAnimation_guide/Articles/Layers.html#//apple_ref/doc/uid/TP40006082-SW1
...and this to get an understanding of drawing techniques:
https://developer.apple.com/library/ios/#documentation/graphicsimaging/conceptual/drawingwithquartz2d/dq_layers/dq_layers.html