i have recorded each point when user touch begin move end the ipad,and then i add these points in to a CGMutablePathRef called path, then i use following code to draw the lines(path) user touched in ipad.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetStrokeColorWithColor(context, [UIColor redColor]);
CGContextSetLineWidth(context, 2);
CGContextAddPath(context, path);
CGContextStrokePath(context);
but these lines didn't look smooth, thanks for your help
You may achieve more smoothness by using the following:
UIGraphicsBeginImageContext(self.frame.size);
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineJoin(UIGraphicsGetCurrentContext(), kCGLineJoinRound);
CGContextSetAllowsAntialiasing(UIGraphicsGetCurrentContext(), YES);
CGContextSetShouldAntialias(UIGraphicsGetCurrentContext(), YES);
CGContextSetMiterLimit(UIGraphicsGetCurrentContext(), 2.0);
But if you need to draw very smooth lines/curves, then you need to redraw lines by using UIBezierCurve or any other curving algorithms.
Edit: I did some changes in my code for smooth drawing. Check my classic board app: https://itunes.apple.com/app/id493525167
You will need to add this just after you first line.
CGContextSetAllowsAntialiasing(context, true);
I'd suggest you to use Cocos2d for perfectly smooth lines. You might want to have a look at this one. https://github.com/krzysztofzablocki/smooth-drawing
Related
So, I need to draw a series of dotted lines along an axis.
In the drawRect method I call another method to draw the axis..
In that method I save the GState draw the axis and then save the gstate again draw the dotted line when appropriate,then stroke the path restore the gstate add some thing to the axis fill the path..
The thing is now the whole thing is dotted ...
It seems the the code didn't discard the dotted line pattern when I restored the gstate ...
CGContextSaveGState(ctx);
CGContextSetFillColorWithColor(ctx, [[UIColor whiteColor] CGColor]);
.......
//draw a dased line
CGContextSaveGState(ctx);
CGContextSetLineWidth(ctx, 1.0);
CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
CGFloat const kDashedLinesLength[] = {1.0f, 0.5f};
CGContextSetLineDash(ctx, 0.0, kDashedLinesLength, 2);
CGContextMoveToPoint(ctx, LEFT_EXCLUSION_LENGTH + AXIS_LINE_WIDTH, crtYval);
CGContextAddLineToPoint(ctx, LEFT_EXCLUSION_LENGTH + AXIS_LINE_WIDTH + self.xAxis.visibleLength , crtYval);
CGContextStrokePath(ctx);
CGContextRestoreGState(ctx);
...
CGContextFillPath(ctx);
CGContextRestoreGState(ctx);
How can I make sore that only the line I need gets doted ???
I'm not sure what's wrong with your code, but it's not a bug in the context restore which works fine. Likely you have another error in the code you replaced with .....
Could be that you have unbalanced save and restores which will cause all kinds of problems - I'd check that first.
I copied and pasted it with minimal changes into a small iOS test app custom view's drawRect method and ran it and I'm seeing what I expect.
here's the little test code that works as expected:
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextSaveGState(ctx);
CGContextSetFillColorWithColor(ctx, [[UIColor blackColor] CGColor]);
CGContextSetStrokeColorWithColor(ctx, [UIColor blackColor].CGColor);
CGContextSetLineWidth(ctx, 2.0);
//draw a dased line
CGContextSaveGState(ctx);
CGContextSetStrokeColorWithColor(ctx, [UIColor blueColor].CGColor);
CGFloat const kDashedLinesLength[] = {1.0f, 2.0f};
CGContextSetLineDash(ctx, 0.0, kDashedLinesLength, 2);
CGContextMoveToPoint(ctx, 100, 100 );
CGContextAddLineToPoint(ctx, 100, 200);
CGContextStrokePath(ctx);
CGContextRestoreGState(ctx);
CGContextMoveToPoint(ctx, 200, 100 );
CGContextAddLineToPoint(ctx, 200, 200);
CGContextStrokePath(ctx);
CGContextFillPath(ctx);
CGContextRestoreGState(ctx);
}
And is the sample output:
You need to be careful to always exactly balance a Save with a Restore. I've had situations where I had one or the other too many in a totally different location of my app. Because iOS partially reuses contexts this can leave a graphics context in a weird state.
You should search your source code for all instances of a Save and a Restore and count if there are equal numbers of them.
I think I know your problem. Look at it this way: The line isn't drawn until you stroke the path. So whatever pattern is in effect when you call CGContextAddLineToPoint (for example) doesn't matter. When you call CGContextAddLineToPoint you're not drawing a line, you are simply building a path. I'm guessing that your subroutine for drawing the axes does not stroke them. The axes don't get drawn until you later call CGContextStrokePath, at which point the dashed pattern is in effect.
I am trying to make an iPhone application with erasing. I am running into 2 problems, if you have a solution for either one please answer this. I would like to erase part of an image.
1) I am currently just clearing the rect but it has a square edge. I would like it to be round, I have previously tried translating but this does not work. I also need it to translate/rotate as few times as possible to maintain the same performance.
2) In addition I wanted to know if there are any other ways of erasing. When erasing fast it is erasing ever 1/2 inch. Is there a way to stroke a path and clear the rect or something? Sorry if this is hard to understand.
CGRect circleRect = CGRectMake([touch CGPointValue].x, [touch CGPointValue].y, 25, 25);
CGContextClearRect(currentContext,circleRect);
This code should do what you're looking for:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.strokeWidth);
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextSetStrokeColorWithColor(context, [[UIColor clearColor] CGColor]);
CGContextBeginPath(context);
CGContextMoveToPoint(context, lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(context, currentPoint.x, currentPoint.y);
CGContextStrokePath(context);
CGContextFlush(context);
The key points are
1) CGContextSetLineCap(context, kCGLineCapRound), which makes it round
2) CGContextSetBlendMode(context, kCGBlendModeClear) which clears the context.
I realize this is an older question but I thought I would expand on Eric Reids answer as I was trying to use his example outside of the drawRect method and had to modify it to get it to work with a context I created in a 'touchesMoved' method in a UIView subclass.
I call this method from 'touchesMoved' and pass it the CGPoint of the touch in the view I'm drawing in.
-(void) processEraseAtPoint:(CGPoint)point
{
// setup a context with the size of our canvas view (the canvas view is the UIView instance I'm drawing into)
UIGraphicsBeginImageContext(self.canvasView.bounds.size);
// get a reference to the context we just created
CGContextRef context = UIGraphicsGetCurrentContext();
// draw the image we want to edit into this context (this is the image containing the drawing I want to erase part of)
[self.canvasView.incrementalImage drawAtPoint:CGPointZero];
// set our context options
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.canvasView.settings.brushDiameter);
CGContextSetBlendMode(context, kCGBlendModeClear);
// make the color clear since we're erasing
CGContextSetStrokeColorWithColor(context, [[UIColor clearColor] CGColor]);
// start our path in this context
CGContextBeginPath(context);
// set our first point
CGContextMoveToPoint(context, lastTouch.x, lastTouch.y);
// draw from our last point to this point
CGContextAddLineToPoint(context, point.x, point.y);
// stroke this path (in this case it's clear so it will erase what's there)
CGContextStrokePath(context);
// set our incrementalImage in the canvasView with the updated image from this context
// Note that in the canvasView 'drawRect' method I am calling
// '[self.incrementalImage drawInRect:rect]', so this new image will get drawn
// in my canvasView when I call 'setNeedsDisplay'
self.canvasView.incrementalImage = UIGraphicsGetImageFromCurrentImageContext();
// cleanup our context
CGContextFlush(context);
UIGraphicsEndImageContext();
// set our last touch point for the next line segment
lastTouch = point;
// update our view
[self.canvasView setNeedsDisplay];
}
From a source of points im drawing a line that crosses over itself using this code:
UIGraphicsBeginImageContext(CGSizeMake([delegate getTileWidth], [delegate getTileWidth]));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [[delegate GetColor] CGColor]);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetAllowsAntialiasing(context, YES);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineWidth(context, [delegate getBrushWidth]);
CGContextMoveToPoint(context, xpath[0], ypath[0]);
for (int i = 0; i <= ([CurrentLine count]-2); i++) {
CGContextAddLineToPoint(context, xpath[i],ypath[i]);
}
CGContextDrawPath(context, kCGPathStroke);
CGContextStrokePath(context);
The drawing is working just fine, but if i draw it with a alpha and the lines "crosses" itself there is no overlap.
What im getting:
(The yellow lines and numbers are for debugging)
What im getting
What i want:
Compared to the first image there is a clear "overlap" where the line crosses itself
What i want
So im wonering where i can find the setting to allow "overlap", i have read around on the CGContext refrence page and tried tons of different settings. So i think im lost...
Thx in advance :)
trying to draw circle divided to dynamically provided number of sectors. In the end my circle should look like pie.
I've created class Circle which contains number of Pies inside. Circle has method - (void)draw which calles [pie draw]; in for (Pie *pie in self.pies) loop.
Implementation of pie looks like this:
- (void)draw {
CGContextRef context = UIGraphicsGetCurrentContext();
float startAngleRads = degreesToRadians(_startAngle);
float endAngleRads = degreesToRadians(_endAngle);
CGContextBeginPath(context);
CGContextSetLineWidth(context, 1.0f);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGColorRef strokeColor = [_strokeColor CGColor];
CGContextSetStrokeColorWithColor(context, strokeColor);
CGColorRef fillColor = [_bgColor CGColor];
CGContextSetFillColorWithColor(context, fillColor);
CGContextMoveToPoint(context, _x, _y);
CGContextAddArc(context, _x, _y, _r, startAngleRads, endAngleRads, YES);
CGContextDrawPath(context, kCGPathStroke);
CGContextFlush(context);
}
This draws nice circle with sectors but without any filling of course. When I change last lines to CGContextDrawPath(context, kCGPathStrokeFill); my stroke lines disappears and only last line (last sector) stays at the screen, other parts of circle are filled with bgcolor and no stroke is visible anymore.
The question is: how can I draw completly separated "sectors" (every sector should look like triangle with Arc and Stroke and Fill). I need this because I want to toggle visibility of that sectors but at the moment I cant even figure out how to draw them correctly.
If this is important, all drawing happens on the layer with self.opaque = NO;.
Ok, found my error: had to set NO in CGContextAddArc call.
I want to clip a rectangle from cgpath with the following code. I don't get any output. What's wrong?
CGContextRef context = UIGraphicsGetCurrentContext();
CGMutablePathRef thePath = CGPathCreateMutable();
CGPathMoveToPoint(thePath,NULL,(self.x1),(self.y1));
CGPathAddLineToPoint(thePath,NULL,(self.x2),(self.y2));
CGPathAddLineToPoint(thePath,NULL,bx2,by2);
CGPathAddLineToPoint(thePath,NULL,bx1,by1);
CGContextAddPath(context, thePath);
CGContextClip(context);
CGContextSetRGBFillColor(context, 1.0, 1.0, 1.0, 1.0);
CFRelease(thePath);
I noticed that you set the fill color, but did you actually fill the path? e.g.
CGContextFillPath(context);
Do you have a current context? i.e. did you use UIGraphicsBeginImageContext() and UIGraphicsPushContext() before you execute the code shown?