I have an animated spritesheet which uses the following code:
TweenMax.to(".globe__globe", 5, { backgroundPosition:'0 -67280px', ease:SteppedEase.config(145)});
This means that over 5 seconds, the background position will be animated. The SteppedEase function defines that there are 145 frames. This works as expected, but at the end of the animation is simply resets back to the first frame. I need it to end on the last frame. Help?
Turns out frames are zero-indexed so if I knocked one frames-worth height off the background position and reduced frames to 145, this fixes it.
I think you meant change it to 144 frames.
So the final code would be
TweenMax.to(".globe__globe", 5,
{ backgroundPosition:'0 -67280px', ease:SteppedEase.config(144)});
Related
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 am attempting to write a function using createJS to draw an arbitrary function and I'm having some trouble. I come from a d3 background so I'm having trouble breaking out of the data-binding mentality.
Suppose I have 2 arrays xData = [-10, -9, ... 10] and yData = Gaussian(xData) which is psuedocode for mapping each element of xData to its value on the bell curve. How can I now draw yData as a function of xData?
Thanks
To graph an arbitrary function in CreateJS, you draw lines connecting all the data points you have. Because, well, that's what graphing is!
The easiest way to do this is a for loop going through each of your data points, and calling a lineTo() for each. Because the canvas drawing API starts a line where you last 'left off', you actually don't even need to specify the line start for each line, but you DO have to move the canvas 'pen' to the first point before you start drawing. Something like:
// first make our shape to draw into.
let graph = new createjs.Shape();
let g = graph.graphics
g.beginStroke("#000");
xStart = xData[0];
yStart = yourFunction(xData[0]);
g.moveTo(xStart, yStart);
for( let i = 1; i < xData.length; i++){
nextX = xData[i], but normalized to fit on your graph area;
nextY = yourFunction(xData[i]), but similarly normalized;
g.lineTo(nextX, nextY);
}
This should get a basic version of the function drawing! Note that the line will be pretty jagged if you don't have a lot of data points, and you'll have to treat (normalize) your data to make it fit onto your screen. For instance, if you start at -10 for X, that's off the screen to the left by 10 pixels - and if it only runs from -10 to +10, your entire graph will be squashed into only 20 pixels of width.
I have a codepen showing this approach to graphing here. It's mapped to hit every pixel on the viewport and calculate a Y value for it, though, rather than your case where you have input X values. And FYI, the code for graphing is all inside the 'run' function at the top - everything in the PerlinNoiseMachine class is all about data generation, so you can ignore it for the purposes of this question.
Hope that helps! If you have any specific follow-up questions or code samples, please amend your question.
Ok, I have a ScrolledWindow with inside a Viewport and a Fixed inside of that. I'm using the Builder so I'm not gonna post ALL the code if is not necessary.
I'm using a function that multiplies the given coordinates per 50, so i have a grid with 50 x 50 pixel's squares (the number of squares can variate in the config).
The real question is very simple, how I can put a background of a grid of 50 per 50 pixels? And that should be """infinite""". Preferly the lines should be of 1 px.
Note: I'm not using a grid because I need only to put Images or Icons
I used that. Mainport is the fixed element, and wres and hres are the number of squares
for i in range(self.wres):
image = gtk.Image.new_from_file("resources/Back.png")
self.mainport.put(image, i*50, 0)
for z in range(self.hres):
image2 = gtk.Image.new_from_file("resources/Back.png")
self.mainport.put(image2, i*50, z*50)
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.
Following phenomenon: my text is "Search". I create a UILabel of SmallSystemFontSize and call sizeToFit:.
The result is 39 units wide and the text looks kind of blurry.
If I adjust the width to 40 it looks perfect.
I read that the text gets blurry if you hit sub pixels, meaning the width would be something like 39.5, but it seems it has to be even.
Can somebody confirm or even explain what is going on ?
In my case, having set shouldRasterize = YES on the CGLayer of the UILabel's superview was the culprit. Removing that line made the text nice and crisp.
UIView items are positioned by their center which for a size that is odd is on a half pixel, 19.5 for a width of 39.. This alignment causes pixel averaging that causes the fuzziness.
One way is to make it an even width.
Another is to place it by the center at an even point use:
#property(nonatomic) CGPoint center
Example, for a desired position of label; at (10, 10, 39, 19) one could use:
label.center = CGPointMake(50, 20);