Clear CGContext Lines - objective-c

Once I drawn some lines over an UIImage, (like a brush application), then I want to clear them, so like a rubber. I searched a lot on this site and on Google, and I tried some codes, but I couldn't find a correct solution.
Here's the code I use to write:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
if(isDrawing == YES) {
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:mainImageView.superview];
UIGraphicsBeginImageContext(mainImageView.frame.size);
[mainImageView.image drawInRect:CGRectMake(0, 0, mainImageView.frame.size.width, mainImageView.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), dimension);
const CGFloat *components = CGColorGetComponents([color CGColor]);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), components[0], components[1], components[2], components[3]);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
mainImageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint;
} else {
//Clear current line (like a rubber would do)
}
}

In this scenario [UIColor clearColor] won't work, use CGContextClearRect(context,rect); to clear the region!

Fill desired part of the context with the [UIColor clearColor].

The correct approach is using a Bezier path that:
records every drawings ( but actually does NOT draw.. in DrawRect we will draw.. using "stroke")
has thickness, color and so on...
draws effectively on view
Clearing it (using "removeAllPoints") and invoking setNeedsDisplay will make the background reappear.
If You want to rubber-clear the path you wrote using another tool, (say You use a pencil tool to write in blue.. and a Rubber tool to clear the blue lines and make background to reappear) you can use "containsPoint:" to remove some points form bezier path.
We did in such way.
using bezier path is NOT trivial but very exciting.. :)

Related

How to detect which word touched with CoreText

I am using CoreText to layout a custom view. The next step for me is to detect which word is tapped on a touch event/gesture event. I have done research on this and found advise on how to custom label a url to receive touches - but nothing generic. Does any one have any idea on how to do this?
UPDATE:
Here is the code within my drawRect: method
self.attribString = [aString copy];
CGContextRef context = UIGraphicsGetCurrentContext();
// Flip the coordinate system
CGContextSetTextMatrix(context, CGAffineTransformIdentity);
CGContextTranslateCTM(context, 0, self.bounds.size.height);
CGContextScaleCTM(context, 1.0, -1.0);
CGMutablePathRef path = CGPathCreateMutable(); //1
CGPathAddRect(path, NULL, self.bounds );
CTFramesetterRef framesetter = CTFramesetterCreateWithAttributedString((__bridge CFAttributedStringRef)aString); //3
CTFrameRef frame = CTFramesetterCreateFrame(framesetter, CFRangeMake(0, [aString length]), path, NULL);
CTFrameDraw(frame, context); //4
UIGraphicsPushContext(context);
frameRef = frame;
CFRelease(path);
CFRelease(framesetter);
Here is where I am trying to handle the touch event
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint point = [touch locationInView:self];
CGContextRef context = UIGraphicsGetCurrentContext();
CFArrayRef lines = CTFrameGetLines(frameRef);
for(CFIndex i = 0; i < CFArrayGetCount(lines); i++)
{
CTLineRef line = CFArrayGetValueAtIndex(lines, i);
CGRect lineBounds = CTLineGetImageBounds(line, context);
NSLog(#"Line %ld (%f, %f, %f, %f)", i, lineBounds.origin.x, lineBounds.origin.y, lineBounds.size.width, lineBounds.size.height);
NSLog(#"Point (%f, %f)", point.x, point.y);
if(CGRectContainsPoint(lineBounds, point))
{
It seems that CTLineGetImageBounds is returning a wrong origin (the size seems correct) here is one example of the NSLog "Line 0 (0.562500, -0.281250, 279.837891, 17.753906)".
There is no "current context" in touchesEnded:withEvent:. You are not drawing at this point. So you can't call CTLineGetImageBounds() meaningfully.
I believe the best solution here is to use CTFrameGetLineOrigins() to find the correct line (by checking the Y origins), and then using CTLineGetStringIndexForPosition() to find the correct character within the line (after subtracting the line origin from point). This works best for simple stacked lines that run the entire view (such as yours).
Other solutions:
Calculate all the line rectangles during drawRect: and cache them. Then you can just do rectangle checks in touchesEnded:.... That's a very good solution if drawing is less common than tapping. If drawing is significantly more common than tapping, then that's a bad approach.
Do all your calculations using CTLineGetTypographicBounds(). That doesn't require a graphics context. You can use this to work out the rectangles.
In drawRect: generate a CGLayer with the current context and store it in an ivar. Then use the context from the CGLayer to calculate CTLineGetImageBounds(). The context from the CGLayer will be "compatible" with the graphics context you're using to draw.
Side note: Why are you calling UIGraphicsPushContext(context); in drawRect:? You're setting the current context to the current context. That doesn't make sense. And I don't see a corresponding UIGraphicsPopContext().

how to create curve for lines when handwriting

I'm creating an app, and in one part, I'm trying to implement hand-writing. I've used an imageView to write on, which will be saved and sent to a server as a pdf. I have implemented touch begin, move and end, and using contextAddLineToPoint, I can create the lines as user writes the stuff. However. The writing is a bit pointy, and I'm trying to create curves when user changes the direction of the writing, i.e. when a letter is written. I don't really want to implement hand-writing recognition, but just to smoothen the line being drawn.
I've created a "buffer", made up of an array, which holds two intermediate points when user moves the touch. as follow:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
lastPoint = [touch locationInView:drawImage];
NSLog(#"first touch:%#",[NSValue valueWithCGPoint:lastPoint]);
}
drawImage is the imageView I'm using to write on btw. Then goes to touch moved:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
currentPoint = [touch locationInView:drawImage];
if (movementCount<2) {
[pointHolderArray addObject:[NSValue valueWithCGPoint:currentPoint]];
movementCount ++;
NSLog(#"pointHolderArray: %#",pointHolderArray);
}else
{
NSLog(#"buffer full");
UIGraphicsBeginImageContext(drawImage.frame.size);
[drawImage.image drawInRect:drawImage.frame];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetAllowsAntialiasing(UIGraphicsGetCurrentContext(), YES);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 3.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.3, 0.5, 0.2, 1.0);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(),[[pointHolderArray objectAtIndex:0]CGPointValue].x,[[pointHolderArray objectAtIndex:0]CGPointValue].y);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), [[pointHolderArray objectAtIndex:0]CGPointValue].x,[[pointHolderArray objectAtIndex:0]CGPointValue].y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), [[pointHolderArray objectAtIndex:1]CGPointValue].x,[[pointHolderArray objectAtIndex:1]CGPointValue].y);
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), [[pointHolderArray objectAtIndex:1]CGPointValue].x,[[pointHolderArray objectAtIndex:1]CGPointValue].y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
drawImage.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = [touch previousLocationInView:drawImage];
[pointHolderArray removeAllObjects];
movementCount=0;
}
}
As you can see, every time two points have been stored, I then draw the line between them. This has made the drawing slightly harder, and the line is even more ragged.
Can anyone help with the problem, I'm very new to graphics in iOS, and not sure if I'm even using the right API, and if I should even be using an imageView.
Thanks alot in advance
How about using Pan Gesture Recognizer and GLPaint. You set something like this in viewDidLoad:
- (void)viewDidLoad
{
[super viewDidLoad];
UIPanGestureRecognizer *g = [[UIPanGestureRecognizer alloc]initWithTarget:self action:#selector(viewPanned:)];
..
Then, capture the pan movement:
-(void) viewPanned:(UIPanGestureRecognizer *)g
{
CGPoint point = [g locationInView:paintView];
// invert y for OpenGL
point.y = paintView.bounds.size.height - point.y ;
switch (g.state) {
case UIGestureRecognizerStateBegan:
prevPoint = point ;
break ;
case UIGestureRecognizerStateChanged:
[paintView renderLineFromPoint:prevPoint toPoint:point] ;
prevPoint = point ;
break ;
case UIGestureRecognizerStateEnded:
prevPoint = point ;
break ;
}
}
The 'paintView' shown here is the instance of PaintView which you can find in GLPaint example in Apple sample code. The example does not show how to change the pen size, but you can do it by setting various glPointSize.
- (void)setBrushSize:(CGFloat)size
{
if( size <= 1.0 ) {
glPointSize(10);
}
else if ( size <= 2.0 ) {
glPointSize(20);
}
else if ( size <= 3.0 ) {
glPointSize(30);
}
else if ( size <= 4.0 ) {
glPointSize(40);
}
..
Hope this helps..

Objective C: Touch Draw On UIScrollView

I am trying to make a drawing book app with different pages on it using a pageEnabled UIScrollView.
What am i gonna use?? touch events are not working.
i have this code before on touches moved:
touchSwiped = YES;
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self.view];
currentPoint.y -= 20;
UIGraphicsBeginImageContext(self.view.frame.size);
[drawView.image drawInRect:CGRectMake(0, 0, drawView.frame.size.width, drawView.frame.size.height)];
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 15.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0, 0, 0, 1.0);
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), lastPoint.x, lastPoint.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), currentPoint.x, currentPoint.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
drawView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint;
touchMoved++;
if (touchMoved == 10) {
touchMoved = 0;
}
i don't have any idea what adjustments i need to do in order to implement this.
anyone??
thanks in advance.
If you are using a UIPanGestureRecognizer as mentioned in your comments, then you have set the minimumNumberOfTouches to something greater than 1, right? Otherwise, how does it tell the difference between drawing and scrolling?
My recommendations are:
Do not use a UIScrollView unless you first figure out a way to conclusively determine if a touch is for drawing or for scrolling as intended by the user. Use a subclass of UIView instead, and then maybe use buttons to move between pages.
Or you could have a button that toggles between drawing and scrolling (paging) between the pages of your scroll view.
Check out this website for some tips and actual code to do the drawing http://www.ifans.com/forums/showthread.php?t=132024

Draw and Erase Lines with Touch

I have a background image (ImageBG) and a foreground image (ImageFG) in separate UIImageViews. They are the same size and, as the name implies, ImageBG is behind ImageFG so you can't see ImageBG.
If the user starts to "draw" on them, instead of a line appearing where the user touches the screen, I want that portion of ImageFG to become transparent and reveal ImageBG.
The closest thing I can think of is a scratch-and-win.
I know how to do the drawing on a graphics context, but when I draw a transparent line (alpha = 0), well... I get a transparent line on top of whatever is currently in my graphics context, so basically nothing is drawn. This is what I use to set the stroke color.
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 1.0, 0.0, 0.0, 0.0)
What am I doing wrong? I know this is possible because there are apps out there that do it.
Any hints, tips or direction is appreciated.
So you have a layer that is some image like the grey stuff you want to scratch off, you write this image (in this example scratchImage which is a UIImageView and its UIImage .image )to the graphics context. You then stroke it with the blend mode set to kCGBlendModeClear then you save that image (with the cleared paths). This will reveal an image that you have underneath perhaps in another UIImageView. Note that in this instance, self is a UIView.
So outside touchesMoved create a variable to hold a CGPoint
CGPoint previousPoint;
CGPoint currentPoint;
Then in touchesBegan, set it to the previous point.
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
previousPoint = [touch locationInView:self];
}
In touchesMoved, write the image to the context, stroke the image with the clear blend mode, save the image from the context, and set the previous point to the current point.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
currentPoint = [touch locationInView:self];
UIGraphicsBeginImageContext(self.frame.size);
//This may not be necessary if you are just erasing, in my case I am
//adding lines repeatedly to an image so you may want to experiment with moving
//this to touchesBegan or something. Which of course would also require the begin
//graphics context etc.
[scratchImage.image drawInRect:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height)];
CGContextSaveGState(UIGraphicsGetCurrentContext());
CGContextSetShouldAntialias(UIGraphicsGetCurrentContext(), YES);
CGContextSetLineCap(UIGraphicsGetCurrentContext(), kCGLineCapRound);
CGContextSetLineWidth(UIGraphicsGetCurrentContext(), 5.0);
CGContextSetRGBStrokeColor(UIGraphicsGetCurrentContext(), 0.25, 0.25, 0.25, 1.0);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, nil, previousPoint.x, previousPoint.y);
CGPathAddLineToPoint(path, nil, currentPoint.x, currentPoint.y);
CGContextSetBlendMode(UIGraphicsGetCurrentContext(), kCGBlendModeClear);
CGContextAddPath(UIGraphicsGetCurrentContext(), path);
CGContextStrokePath(UIGraphicsGetCurrentContext());
scratchImage.image = UIGraphicsGetImageFromCurrentImageContext();
CGContextRestoreGState(UIGraphicsGetCurrentContext());
UIGraphicsEndImageContext();
previousPoint = currentPoint;
}

How to implement the color wheel inside the UIView?

I searched the web site, and I found how to draw a color wheel...
Math behind the Colour Wheel
But I would like to implement it by drawing on the UIView. But how can I do using the Quartz technology? I should draw from by dots or lines? Thank you
Maybe its use for you.
CGContext*** functions to draw dots or lines, and UIGraphicsGetImageFromCurrentImageContext to get UIImage item.
-(void) drawPoint:(CGPoint)point {
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), point.x, point.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), point.x, point.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
}
-(void) drawLineFrom:(CGPoint)start
to:(CGPoint)end {
CGContextBeginPath(UIGraphicsGetCurrentContext());
CGContextMoveToPoint(UIGraphicsGetCurrentContext(), start.x, start.y);
CGContextAddLineToPoint(UIGraphicsGetCurrentContext(), end.x, end.y);
CGContextStrokePath(UIGraphicsGetCurrentContext());
}
Draw UIImage to UIView.
UIColor* backColor = [UIColor colorWithPatternImage:your_image_from_cgcontext];
view.backgroundColor = backColor;