I am looking to spin a UILabel 45 degrees (to the right) on it's anchor point (the center of the UILabel) and put it on the right of the table cell so it looks like a diagonal ribbon across the table cell, from the bottom-right of the cell up and toward the left until it hits the top of the cell.
To do this (in a diagonal) I do the following:
Get the height of the table cell. This gives me (in an triangle with sides a,b,c) "c". So, "c" is one leg of the triangle. Because I want it to be a 45 degree triangle that also gives me leg "a" of the triangle.
Now the easy part: I know all three angles of this triangle. "C" (angle across from side c) is 45 degrees, "B" (angle across from side "b") is 90 (cos it is the right top corner of the cell's content view...and we know those are right-angles. Angle "A" (angle across from side "a") is also 45.
Side "b" is the side i am having fits with... What formula do i use to get length of side "b" such that it is wide enough to go (when diagonal) across the height of the cell's contentview from the bottom right until it hits the top of the cell? I know for a 44pt high cell, the length of this UILabel when diagonal should be around 60-ish pts...but the formula is escaping me.
When using a online calculator Triangle Calculator and using the drop-down for angle-angle-side, I feed in the following numbers: A: 45,B: 45, C: 44, and this gives: 62.2254 for the side length...which is fine...but my table cell is not always 44pts high so i need a formula i can put in objective-c. I have read up on the Law of Sines, but my High-School Trig years are SO behind me.
I hope all this is clear. If not, please let me know. Thanks in advance.
If I understand you correctly you will always have triangle with one right angle and two other 45 degrees. If short side (both of them will have same length) of such triangle is X, then long side is square root from 2*X*X
Related
I am making a Breakout Game and the Game generates rows from how ever many bricks I want in that row. But I cannot get the rows to start in the center. How would I achieve this, here is my current code.
I've tried numerous things, but the closest I got was to get them all to be in the middle, but the should spread out from the middle.
What I would like to achieve should look something like this.
If you have the maximum row size available, a simple way is to include an offset when you calculate the x coordinate.
let maxRow = ... // whatever the maximum row size is
let padding = (maxRow - row) / 2 // how many blocks to skip on the left
for i in 1...row {
// your block creation loop
let x = 15 + (i + padding) * Int(brick.size.width)
// make the brick at x, y
}
If things might not divide evenly (e.g., if maxRow is 15 like it seems to be in your pictures, but row could be 4) then you have to decide on what behavior you'd like. The above will keep bricks aligned because the integer division in calculating padding will truncate; the left and right padding won't be the same. If you use floating division and get a padding like 3.5, you'd get perfectly centered rows but odd rows and even rows would have different alignment.
If your problem is that you want things to appear in an animated way (like in your picture), then things are more complicated. Instead of generating based on the sequence 1, 2, ..., row, it's probably easier to think about generating from the sequence 0, +1, -1, +2, -2, ... After generating the center brick, you'd do the generation of additional bricks in pairs. The x coordinates would be calculated as xCenter + i * Int(brick.side.width).
You're adding the bricks into a parent SKNode (using addChild(_:)). Everything added in that parent node is relative to its coordinate space.
Try adding a brick at y: 0 and see where will it be positioned. If your scene has the anchorPoint at 0.5, you will likely see the brick in the center of the screen. From there, you go up or down (positive or negative y values) to show other rows.
To better understand how the coordinate system works, see About SpriteKit Coordinate Systems.
It's the same for the x axis. If your bricks start from left to right, that means the parent node has its origin to the left of the screen.
To start from the middle, you need to know the middle point. One option is to make a container node, position that in the center of the screen, and add all the bricks there. Like that, the bricks can start at (0, 0).
let middle = CGPoint(x: scene!.size.width / 2, y: scene!.size.height / 2)
let container = SKNode()
container.position = middle
// inside makeBricks(), add everything inside container:
container.addChild(brick)
It really depends on how you set up your node hierarchy.
I would like to layout 5 buttons (that have a circular image) in a circular pattern (a kind of pentagon shape) in iOS. Ultimately it will also work on iPad, but at the moment, I'm just trying to get it working on iPhone.
So far, I have just tried putting them into a UIView and using constraints to lay them out via IB. However, when I rotate the device to landscape the layout gets messed up.
Here is a picture of the kind of layout I mean in IB which should ideally adapt to fit both iPhone portrait and landscape.
If I fix the height and width, it's clearly too big for iPhone:
I guess I need to find a way to have it maintain it's aspect ratio as a square and aligned to the middle of the parent view.
If I constrain to the top layout guide with horizontal space and vertical space it just looks like this:
I just can't seem to get my head around the right way to do this.
Any thoughts and pointers in the right direction greatly appreciated.
Many thanks.
You need to update your approach,
Logic : Use parametric equations to get points ( button centres ) along circumference of circle, Update constraints when screen rotates ( take outlets of constraints to modify ).
These formulae will give point ( x, y ) along circumference ( Centres of buttons / leading & top constraint of buttons )
x = cx + r * cos(a)
y = cy + r * sin(a)
Where,
r is the radius, ( in your case half of screen size )
cx,cy the origin, ( in your case centre of view )
and a the angle from 0..2PI radians or 0..360 degrees. ( Angle between two buttons 360/5 because there are 5 buttons )
I have used this formula in one of the control i have developed..
https://github.com/AdityaDeshmane/iOSCircularMenu
Check method - (void)setButtonFrames in following file
https://github.com/AdityaDeshmane/iOSCircularMenu/blob/master/iOSCircularMenu/CustomCircularMenuControlFiles/ADCircularMenuViewController.m
I have an application built with SceneKit that is currently displaying several nodes. I can figure out which node is pressed and want to use that to make a label appear below the Node that was touched. Now, when I set the label's center the following way...
nameLabel.center = CGPointMake(CGFloat(result.node.position.x), CGFloat(result.node.position.y+20)
…it appears in the upper left corner since the node is on (1, 0). What I figured is that the sceneView's (0, 0) is in the center of the screen while the actual physical display's (0, 0) is in the top left corner.
Is there a way to convert the two different numbers into each other? (I could hardcode since I know where the Node's are or create a separate label for each Node but that is not really a perfect solution.)
Thanks in advance :)
You can use the projectPoint: method:
var projected = view.projectPoint(result.node.position))
//projected is an SCNVector3
//projected.x and y are the node's position in screen coordinates
//projected.z is its depth relative to the near and far clipping planes
nameLabel.center = CGPointMake(CGFloat(projected.x), CGFloat(projected.y+20)
View geometry in UIKit specifies that it acts on an axis starting from the top left corner (0,0) and increasing in x and y as you travel toward the bottom right.
UIOffsetMake() is used a lot in UIKit Dynamics, and I was wondering if it follows a similar model. It's used to specify, relative to the center of the UIView, where you want the point where the view gets pushed to originate from.
If I specify UIOriginMake(5.0, -5.0) does it change it from the center to further in the bottom right? As in it goes down 5 vertically and 5 over horizontally? Or does it follow the traditional UIView model where that would indicate it goes 5 points over horizontally and 5 points up vertically?
I have no reason to think it doesn't follow UIView's model, but I wasn't positive and I wanted to make sure.
You'll find the answer in the docs for the UIOffset struct:
The components are positive for right or down, negative for left or up.
How to traverse the peg through all the squares in a Monopoly type board Game ?
I have written a function for the movepegbutton which on click moves the peg to the destination position which it gets from the random generated number.
This is what I have written so far for the Move peg Button.
(IBAction)movePegButton:(id)sender
{
self.pegDestinationPositionIndex = self.pegCurrentPositionIndex + self.randomNumber;
if (self.pegDestinationPositionIndex > [self.boardCordinatesArray count] - 1)
{
self.pegDestinationPositionIndex = self.pegDestinationPositionIndex - [self.boardCordinatesArray count];
}
[self animatePeg];
self.pegCurrentPositionIndex = self.pegDestinationPositionIndex;
}
This is what I have written to animate the peg.
(void)animatePeg
{
int destinationXCord = [[[self.boardCordinatesArray objectAtIndex:self.pegDestinationPositionIndex] objectForKey:#"x"]intValue];
int destinationYCord = [[[self.boardCordinatesArray objectAtIndex:self.pegDestinationPositionIndex] objectForKey:#"y"]intValue];
[UIView animateWithDuration:1.0 animations:^{
self.peg.center = CGPointMake(destinationXCord, destinationYCord);
}];
}
So far the peg moves correctly to the destination square but it is not traversing through all the squares in its way, for e.g. if it is 8X8 square, for first run dice rolls 6, the peg moves correctly to 6th square, for second run dice rolls 5, the peg moves correctly to the destination square but it directly jumps over to that position diagonally, it doesn't traverse the squares which it has in its way.
I am stuck here, how should i do it ??
So your peg is supposed to walk in a square, ei. follow the edge of the board, but instead cuts corners, am I right?
If I am so, then the answer is very straight forward. To make sure that the peg follows the squares lain on the board, you must make it move to every square in the path from source square to destination square, otherwise it will simply cut the corner and go straight for the destination square.
If the player rolls a 4, and is standing on square 9 and must reach square 13. Then instead of making the peg move directly to square 13, I would force the peg to go first to 10, then 11, then 12 and then at last square 13.
Of course if the squares are aligned in a square manor, that is; four edges, then some optimization could be done, and only split up the path if a corner is in between the source square and the destination square.
And of course this optimization could also be applied even though the squares are not aligned in a square like manor, just as long as it follows some path, and you know where the 'corners' are.
Edit:
To try and test my paint skills and to try and visualize the problem at hand, I have created something within paint.
What you are doing in the presented code is Case 1. You are doing a single animation when moving the peg. What you really want do is Case 2, here your function -(void)animatePeg; should recognize that the destination square is more than 1 square away, and therefore not do a single move animation, but a series of move animations, to be more precise, the number of animations is always indexOfDestinationSquare - indexOfSourceSquare. So in the illustrated case, the peg should do a total of eight move animations instead of only one.
Case 3 shows how this process could be optimized by recognizing the direction of the move, and only split when going around a corner.
I hope this clarifies what approach I would take. To do this approach you need to extend your -(void)animatePeg; function to be able to split up the single move into a series of moves, and then animate the moves one-by-one.