I see APIs in Quartz for drawing lines and circles. But all I want to do is to specify the (x,y) cartesian coordinate to color a pixel a particular value. How do I do that?
CGContextFillRect(context, CGRectMake(x,y,1,1));
Quartz is not a pixel-oriented API, and its contexts aren’t necessarily pixel buffers. If you want to draw pixmaps, create a bitmap context with CGBitmapContextCreate(). You provide a buffer, which you can manipulate directly, and can copy to another context by creating a CGImage from the same buffer using CGImageCreate() and drawing that.
Draw a very small ellipse/circle and fill it!
CGContextAddEllipseInRect(Context,(CGRectMake (x_dot, y_dot, 3.0, 3.0));
CGContextDrawPath(Context, kCGPathFill);
CGContextStrokePath(Context);
I am using this code to create a small dot (3x3 pixels) in a dotted music note.
I got a point (zero length line) to draw after setting the line-caps to kCGLineCapRound. The default line-cap has no length so can't be drawn.
The argument that a point has no size is silly. The lines have no width but we can draw those (by using the "line width" from the draw state). A point should draw in exactly the same way, and with different line caps I believe it does.
Maybe this behavior is new?
You can draw a 1-pixel-length line at the coordinate in question; that should accomplish what you want.
I'm having the same issue - i find the best solution is similar to the last, but at least it doesn't leave something that looks like a "dash"... of course, should ensure x/y are both > 0.
CGContextFillRect(context, CGRectMake(x - 0.5, y - 0.5, 1.0 , 1.0));
Swift 3 :
UIRectFill(CGRect(x: x, y: y, width: 1, height: 1))
UIRectFill()
Related
Can anyone help me to achieve this kind of animated transformation through Core Graphics. Look at the rough sketch:
This is a simple chart graphic, and I need to transform a histogramm-style bar (left shape) to a pie chart (right shape).
Literally the task is to roll a rectangle to a ring with a smooth animation. I almost found the way to do this with a tricky queue of drawings, mask clippings and affine transformations but this won't look exactly how I want it to look.
This is an interesting challenge, especially as you want to maintain the different segments. I won't give you a full answer (i.e full example code to achieving this), but I will explain what I think needs to be done to achieve the effect that you want.
Paths
First, I see both of these diagrams as a single line that is stroked (let's ignore the segments for a moment), so the challenge is going from a straight line to an enclosed circle.
I propose the following two paths, that you can animate between to achieve a nice wrapping effect.
// As we render a circle as a chain of straight line segments
// changing the count of said segments makes the circle more or less smooth
// Try this with other values, such as 8 or 32
let segments = 72
// With this segment count, the angle of each segment in the circle is
let angle = (2 * CGFloat(M_PI)) / CGFloat(segments)
// First path (straight)
let length = CGFloat(300.0)
let segmentLength = length / CGFloat(segments)
let straightPath = CGPathCreateMutable()
CGPathMoveToPoint(straightPath, nil, 0.0, 0.0)
for i in 0...segments {
CGPathAddLineToPoint(straightPath, nil, 0.0, CGFloat(i) * segmentLength)
}
// Second path (circle)
let radius = CGFloat(100.0)
let center = CGPoint(x: 104.0, y: 104.0)
let space = (x: 2.0, y: 2.0)
var circlePath = CGPathCreateMutable()
CGPathMoveToPoint(circlePath, nil, center.x + radius, center.y)
for i in 0...segments {
let x = cos(-CGFloat(i) * angle)
let y = sin(-CGFloat(i) * angle)
CGPathAddLineToPoint(circlePath, nil, center.x + radius * x, center.y + radius * y)
}
I have also uploaded a Swift plaground for you to experiment with, which you can find here
Segments
Now, handling the segments can be a bit tricky, however I propose a relatively naive implementation that might work. Mainly, CAShapeLayer has the following two properties - strokeStart and strokeEnd, which allow controlling the part of the path that is actually stroked.
With this in mind, you could create as many layers as there are segments, assign them all the same path(s) and tweak their respective strokeStart and strokeEnd properties to make it look the way you expect. Somewhat similar to what they do in this post.
Animation
Assuming you have conquered the previous two aspects, the animation aspect should be relatively straight forward, using the two types of paths you have, you can create a simple CABasicAnimation that goes from one to another. I will assume you are familiar with CoreAnimation and its usage (i.e how to properly change model values to match those that are presented etc.).
I will end my answer with a quick animation showing what the end result could look like (minus the segments), I have frozen the animation and am manipulating the timeOffset property of the layer to manually scrub through it.
I hope my answer helps you get closer to the solution you want. It is also important to emphasise that my code examples are just a beginning, you will likely need to tweak the values quite a bit to achieve a satisfying animation (for example, the length of the line should be similar to that of the circumference of the circle).
Skewing, twisting and bending are none trivial transformations on bodies.
These can't be done Core Graphics.
Better draw the chart yourself with CGContextAddArcToPoint in core graphic and mask out the inner circle.
The other (hardcore) way would be using a 3d engine - i.e. scene kit - and apply your chart as texture to it.
I just saw this recent question on SO, which gets somewhat close to what I'm asking here.
So I'm trying to typeset a mathematical equation using Core Text and NSAttributedString. It was working pretty well for expressions like x2, but then I came across a problem when I use y. Namely, 'y' has a descender which I don't know how to take into account in my drawing code:
CGContextSaveGState(context);
CGContextTranslateCTM(context, x, sizeOfGlyph.height / 2.0);
CGContextScaleCTM(context, 1.0, -1.0);
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CTLineRef line = CTLineCreateWithAttributedString((__bridge CFAttributedStringRef)attributedSubstring);
CGContextSetTextPosition(context, 0.0, 0.0);
CTLineDraw(line, context);
CFRelease(line);
CGContextRestoreGState(context);
Basically, I translate the context by half the glyph's height (as calculated here) to start the text at the baseline of the glyph. As you can imagine, this runs into problems with glyphs like 'y', because half the glyph's height isn't the baseline of the glyph. I don't think it's sufficient to use the font's descender, because I have no way of knowing whether this glyph has a descender or not. So what I'd like to find out is whether there is a way to find the descender (or any desired metrics) for a particular glyph?
Any know-how on the topic would be appreciated, I'm just getting started with Core Text.
What I ended up doing was to use the origin of the glyph returned from the image bounds function. I calculated the bounds of the glyph using the method outlined in this answer. The origin of the resulting CGRect gives the y-position of the glyph's bottom-left corner, which in the case of 'y' would be negative. So by adding together glyphRect.origin.y + glyphRect.size.height, you get the distance from the top of the glyph to the baseline.
I have one shape
var a = paper.rect(10,10,50,20);
I want to transform this shape into
var b = paper.circle(10,10,20);
Is there any way to transform these inbuilt shapes into one another. I know paths can be transformed anyhow you want them to but can shapes also be transformed?
You can do this if with a little creativity. A rectangle can be a circle if width, height and r (radius) are all the same. Then transforming a rect to a "circle" becomes:
p=Raphael(10, 50, 600, 300);
myrect=p.rect(50,50, 300,150,0).attr({"fill":"cyan"});
myrect.animate({"width":25,"height":25, "r":25}, 3000);
JSfiddle: http://jsfiddle.net/s1pz6Lzc/30/
I don't think that is possible, except if you simply fade out one shape and fade in the other one. The reason for this is that at some point in time during the conversion the shape is neither a rectangle nor a circle, while any single animated shape in SVG has to remain the same kind of shape throughout the animation, I believe.
I'm drawing the 'slices' in a custom pie chart in Core Graphics, using a UIBezierPath and the [path addArcWithCenter:radius:startAngle:endAngle:clockwise:] method. My problem is that often the pointy end of the slice actually juts past the center point, intruding into other slices space.
Is there a way to 'round' this edge?
Here is the code im using to draw the path
[path moveToPoint:center];
[path addArcWithCenter:center radius:radius startAngle:interiorAngle endAngle:totalAngle clockwise:YES];
[path addLineToPoint:center];
[path closePath];
Here is an image of the problem:
The white pointy end of the blue piece on the lower left intrudes slightly into the large blue piece in the upper right.
It's not "past" the center point. Your confusion lies in the fact that you're stroking the path. When you stroke a path, the stroke lies centered upon the path, and therefore half of the stroke is outside the path and half of the stroke is inside the path. If you want an accurate stroke, you have two options:
Fill your path with your stroke color, then construct another path that's inset into your first one by the desired line width, and then fill that path with your fill color. This will simulate an "inside" stroke, although it's not usable if your stroke or fill colors are semi-transparent.
Clip to your path, double the stroke width, and then stroke your path. The clipping will force the stroke to only draw inside the path. However, this may not look quite "accurate" at corners (not really sure) since it's doubling the stroke width rather than calculating the "desired" path.
Alternatively, you could try just setting the lineJoinStyle to something other than kCGLineJoinMiter. With the default miter style, the lines actually draw out as far as they need to from the corner in order to meet, which means they can go past 1/2 the line width. If you use kCGLineJoinRound or kCGLineJoineBevel they cannot go past 1/2 the line width. This may not be quite accurate, but it may be good enough for what you want.
I would suspect the problem is with the line width of the white line. For example, a line that is 8 points wide, would have 4 points on either side of the path.
I can't see the problem in that image (which slice is showing it?), but I can suggest that you remove the addLineToPoint: message. It isn't necessary; closePath will return to the center, since that's where you started.
I am trying to draw a line two pixels wide. How can I do this?
There is no method to set the width of your line. You do have two options though:
1) If your line is horizontal/vertical, then you can use fillRect to draw your lines.
2) You can draw multiple lines offset by a pixel in the x or y direction to make the appearance of a thicker line.
They may not be ideal, but they get the job done.
There is no methods to set the width for a line. But if you want you can draw like below code. I don't think this is correct way. But it will help you.
Graphics c = new Graphics();
c.drawLine(5, 20, width-10, 20);
c.drawLine(5, 21, width-10, 20);