I have a UIView, which I'm drawing manually in the 'drawRect'-Function.
It is basically a coordinate system, which has 'Values' on the Y-Axis and 'Time' on the 'X-Axis'.
Due to space issues, I want the Timestamps to be vertical, instead of horizontal.
For this purpose, I use:
CGContextSaveGState(ctx); //Saves the current graphic context state
CGContextRotateCTM(ctx, M_PI_2); //Rotates the context by 90° clockwise
strPos = CGContextConvertPointToUserSpace(ctx, strPos); //SHOULD convert to Usercoordinates
[str drawAtPoint:strPos withFont:fnt]; //Draws the text to the rotated CTM
CGContextRestoreGState(ctx); //Restores the CTM to the previous state.
ctx (CGContextRef), strPos (CGPoint) and str (NSString) are variables, that have been initialized properly and correctly for 'horizontal text', with a width of the text height.
While this code works flawlessly on the iPhone 3, it gives me a complete mess on the iPhone 4 (Retina), because the CGContextConvertPointToUserSpace function produces completely different results, even though the coordinate system of the iPhone is supposed to remain the same.
I also tried using CGAffineTransform, but only with the same results.
To summarize my question: How do I draw a text to a calculated position in the parent coordinate system (0, 0 being top left)?
After studying the Apple docs regarding Quartz 2D once more, I came to realize, that the rotation by Pi/2 moves all my writing off screen to the left.
I can make the writing appear in a vertical line by translating the CTM by +height.
I'll keep trying, but would still be happy to get an answer.
Edit: Thanks to lawicko's heads-up I was able to fix the problem. See Answer for details.
I would like to thank lawicko for pointing this out.
During my tests I made two mistakes...but he is of course correct. Using CGContextShowTextAtPoint is the most simple solution, since it doesn't require the rotation of the entire CTM.
Again, THANK you.
Now, for the actual answer to my question.
To draw a rotated text at position x/y, the following code works for me.
CGAffineTransform rot = CGAffineTransformMakeRotation(M_PI_2); //Creates the rotation
CGContextSelectFont(ctx, "TrebuchetMS", 10, kCGEncodingMacRoman); //Selects the font
CGContextSetTextMatrix(ctx, CGAffineTransformScale(rot, 1, -1)); //Mirrors the rotated text, so it will be displayed correctly.
CGContextShowTextAtPoint(ctx, strPos.x, strPos.y, TS, 5); //Draws the text
ctx is the CGContext, strPos the desired position in the parent coordinate system, TS a char array.
Again, thank you lawicko.
I probably would've searched forever if not for your suggestion.
Maybe this answer will help someone else, who comes across the same problem.
Related
Trying to optimize a falling sand simulation and I'm implementing optimizations that the noita devs talked about in their GDC talk. At around 10:45 they talk about how they use dirty rects. I've started trying to implement a similar system.
Currently, I am able to create a dirty rect that covers the particles that need updating. I do this by every time a valid particle(particle is not air or solid like a wall) is set inside a chunk, I call a function to update the dirty rect giving the placed particles position as an argument. From there, I can easily calculate the new min/max of the rectangle from this position.
Here's a gif of that working.
and here's the code for updating the rect:
public void UpdateDirtyRect(int2 newPos)
{
minX = Math.Min(minX, newPos.x);
minY = Math.Min(minY, newPos.y);
maxX = Math.Max(maxX, newPos.x);
maxY = Math.Max(maxY, newPos.y);
dirtyrect = .(.(minX, minY), .(maxX, maxY));
//Inflate by two pixels. Not doing this will cause the rect to not change size as particles update
dirtyrect=dirtyrect.Inflate(2);
}
The problem, as can be seen in the gif, is that I currently have no way to shrink the dirty rect. I can do a few things, such as detecting when a particle is erased/replaced with air/solid particle on the boundary edge of the dirty rect, but I'm unsure on what to do from there.
Here’s one approach that might work for you.
Keep the dirty rectangle updated by the previous frame.
Compute the dirty rectangle updated by one frame only.
Combine these two rectangles into a single one that contains both of them.
Use the rectangle from step 3 to update the screen.
Replace the previous frame rectangle with the one you have computed on step 2. Not the combined one you computed on step 3, doing so would cause the same problem you’re describing.
I want to draw either the lower or the upper half of an elliptical arc using Win2D in a C++/winrt app. I can draw the curve, but it includes a diagonal line at its start that looks as if I had begun with a straight line segment - as if the figure didn't begin at the arc but rather some distance down and to the right. How I can restrict drawing to just the arc? Here is the code and an image of the result:
float2 arcSize(100, 6);
auto pathBuilder = CanvasPathBuilder(drawingSession.Device());
pathBuilder.BeginFigure(244, 175);
//Starting at 3 o"clock, sweep pi radians, that is, to 9:00
pathBuilder.AddArc(arcSize,50,6,0.0, 3.14);
pathBuilder.EndFigure(CanvasFigureLoop::Open); //Don't close path
auto geometry = CanvasGeometry::CreatePath(pathBuilder);
session.DrawGeometry(geometry,244, 175, Colors::Black(),1.5);
OK, thanks to that hint from Inspectable I have the solution: the problem lies in where the path begins. In my code I had mistakenly used the proposed arc size as the first argument to AddArc when really that should be the arc center coordinates. And the BeginFigure in the case of this arc must be the point lying at the right edge, at what would be 3:00 in a circle. With the ArcCenter correct in relation to the BeginFigure then AddArc doesn't draw the extra line.
[Update:] p.s. The x and y coordinates for the DrawGeometry call should be zero in this case; that draws it at its original coordinates from BeginFigure, not offset. Maybe this p.s can gain me another -1 for this question.
I'm adding an array of SKSpriteNodes (640px wide) directly to my SKScene:
for (backgroundTile in backgroundTiles) {
backgroundTile.anchorPoint = CGPointMake(0.0, 0.0);
backgroundTile.position = CGPointMake(BG_TILE_X_POS, tilePlacementPositionY);
[self addChild:backgroundTile];
tilePlacementPositionY += tileHeight;
}
(BG_TILE_X_POS is 0.0)
But despite having an X position of 0.0 and their anchor points being set to (0.0,0.0) they still hang off the left side of the screen by 150px.
I can compensate that by giving them an X position of 150 and have also tried:
self.size = view.bounds.size;
…but that only enlarges the visible parts of the sprites so that they fill the screen; cropping off the top sprite.
I assume I'm making a rookie mistake but, looking through the documentation, nothing's striking me as obvious (which I guess it should be).
So, how do I position the sprites flush to the left edge? Any help would be appreciated.
Thanks.
I'd overlooked the obvious. I'd only created placeholder sprites at x2 resolution but stored them in their image sets as 1x resolution. Finally, with the setting:
self.size = view.bounds.size;
everything behaves as expected.
Silly mistake. I was convinced the problem was with the code, not the assets.
I'm drawing a line on iOS by stroking a path onto a CALayer. How can I stroke this line with an increasing lineWidth (stroke width), so that the left end of the line is thinner than the right end? (It really has to be a line, not a shape or closed path, since I'm going to be using the strokeEnd property.)
Thank you for your help!
Use a draw function. It's pretty annoying to get used to at first, but it does its job. If you need anymore help just leave comment
-(void)draw{
float lineHeight = 5;//change this as you see fit, like set it equal to an incrementing/decrementing variable of your choice...
glEnable(GL_LINE_SMOOTH);
glLineWidth(lineHeight); // change this as you see fit
glColor4ub(255,255,255,255); // change these as you see fit :)
ccDrawLine(ccp(10,310), ccp(30,310)); // these numbers are probably off, you'll have to mess with these to get it in the right position :)
[super draw];
}
I'm trying to make a simple app where a chart is drawn with a line and X axis. I want to fill parts of the view enclosed by chart and X axis with gradient. To fill them I use the following code
CGContextSaveGState(c);
CGContextAddPath(c, CGContextCopyPath(c));
CGContextClip(c);
CGContextDrawLinearGradient(c, g, previousPointOfIntersection, intersectionPoint, 0);
CGContextRestoreGState(c);
every time the line crosses the X axis. However, the problem is that the gradient fills the whole view between previous point of intersection and current one.
Is this a right way to draw a gradient for a part of view enclosed by lines?
I'd be very happy to hear any suggestions regarding my problem :)
P.S. here's the code of my class http://pastebin.com/wYiHkuVi
I'd say you don't have the path in the context that you think you do.
If you've "stroked" the path for your graph it's been used up.
Replace your Add Path with:
CGContextAddEllipseInRect(c, self.bounds);
to see if you get some clipping occurring.
If so, then you need to rebuild your path here instead of the AddPath/Ellipse code.