I'm drawing a straight line and I want to make it in such a way that when touch movement is small (e.g 10 pixel), the starting point(fromPoint) will follow the touch rather than staying at the first touch.
- (void)drawRect:(CGRect)rect {
CGPoint fromPoint;
CGPoint toPoint;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 1.0, 1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextMoveToPoint(context, fromPoint.x, fromPoint.y);
CGContextAddLineToPoint(context, toPoint.x, toPoint.y);
CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
}
//touch event
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch* touch = [touches anyObject];
fromPoint = [touch locationInView:self];
toPoint = [touch locationInView:self];
[self setNeedsDisplay];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch* touch = [touches anyObject];
toPoint = [touch locationInView:self];
// ***** not working ******
// when touch movement is small (e.g 10 pixel), the starting point will follow the touch rather than staying at the first touch
if (fabs(_draw.toPoint.x - _draw.fromPoint.x) < 10 && fabs(_draw.toPoint.y - _draw.fromPoint.x) < 10){
UITouch* touch = [touches anyObject];
fromPoint = [touch locationInView:self];
toPoint = [touch locationInView:self];
};
//************************//
[self setNeedsDisplay];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch* touch = [touches anyObject];
toPoint = [touch locationInView:self];
[self setNeedsDisplay];
}
UPDATE: The purpose is to make a slight adjustment of the starting point, when a magnifying glass is implemented.
It's not working because unless you move your finger very fast, you aren't able to differentiate between small movements and big movements.
You could try starting a timer in touchesBegan, and use that to work out the speed of movement, from which you can set some parameters between a slow and a fast touch.
You could even use a UIPanGestureRecognizer which will work out the velocity for you.
Related
I wanna draw the transparent area with brush, but my code work not very well.I think someone can help me here. My code :
// Handles the start of a touch
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
CGRect bounds = [self bounds];
UITouch *touch = [[event touchesForView:self] anyObject];
if (![image isPointTransparent:[touch locationInView:self]]
|| ![image isPointTransparent:[touch previousLocationInView:self]])
{
return;
}
firstTouch = YES;
// Convert touch point from UIView referential to OpenGL one (upside-down flip)
location = [touch locationInView:self];
location.y = bounds.size.height - location.y;
}
// Handles the continuation of a touch.
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
CGRect bounds = [self bounds];
UITouch *touch = [[event touchesForView:self] anyObject];
if (![image isPointTransparent:[touch locationInView:self]]
|| ![image isPointTransparent:[touch previousLocationInView:self]])
{
return;
}
// Convert touch point from UIView referential to OpenGL one (upside-down flip)
if (firstTouch)
{
firstTouch = NO;
previousLocation = [touch previousLocationInView:self];
previousLocation.y = bounds.size.height - previousLocation.y;
}
else
{
location = [touch locationInView:self];
location.y = bounds.size.height - location.y;
previousLocation = [touch previousLocationInView:self];
previousLocation.y = bounds.size.height - previousLocation.y;
}
// Render the stroke
[self renderLineFromPoint:previousLocation toPoint:location];
}
// Handles the end of a touch event when the touch is a tap.
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
CGRect bounds = [self bounds];
UITouch *touch = [[event touchesForView:self] anyObject];
if (![image isPointTransparent:[touch locationInView:self]] || ![image isPointTransparent:[touch previousLocationInView:self]])
{
return;
}
if (firstTouch)
{
firstTouch = NO;
previousLocation = [touch previousLocationInView:self];
previousLocation.y = bounds.size.height - previousLocation.y;
[self renderLineFromPoint:previousLocation toPoint:location];
}
}
The important thing to know is that you should do your actual drawing in the drawRect: of your UIView. So the renderLineFromPoint:toPoint: method in your code should just be building up an array of lines and telling the view to redraw each time, something like this:
- (void)renderLineFromPoint:(CGPoint)from toPoint:(CGPoint)to
{
[lines addObject:[Line lineFrom:from to:to]];
[self setNeedsDisplay];
}
This assumes that you have a Line class which has 2 CGPoint properties. Your drawRect: may look something like this:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBStrokeColor(context, 0.0f, 0.0f, 0.0f, 1.0f);
for (Line *line in lines) {
CGContextMoveToPoint(context, line.from.x, line.from.y);
CGContextAddLineToPoint(context, line.to.x, line.to.y);
CGContextStrokePath(context);
}
}
If you do it like this (without OpenGL) there is no need to flip the y-axis.
The only thing left is to implement the isPointTransparent: method. It's difficult to know from your code how this should work.
I am trying to make a "feeling app" which has an image which will change its color up to that location where the user touches it. I implemented UIPanGestureRecognizer for that and found the touch but was unable to change the color of that particular part of the image.
try this block of code....
you want to change color means change the stokeColor and you want to change size of the brush means see the commented line
#pragma mark touches stuff...
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
lastTouch = [touch locationInView:imageView];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
currentTouch = [touch locationInView:imageView];
CGColorRef strokeColor = [UIColor brownColor].CGColor;
UIGraphicsBeginImageContext(imageView.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
[imageView.image drawInRect:CGRectMake(0, 0, imageView.frame.size.width, imageView.frame.size.height)];
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, 10); // u can change the brush size here
CGContextSetStrokeColorWithColor(context, strokeColor); // u need to change this to required color
CGContextSetBlendMode(context,kCGBlendModeDarken ); // try the various blend modes
CGContextBeginPath(context);
CGContextMoveToPoint(context, lastTouch.x, lastTouch.y);
CGContextAddLineToPoint(context, currentTouch.x, currentTouch.y);
CGContextStrokePath(context);
imageView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastTouch = [touch locationInView:imageView];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
lastTouch = [touch locationInView:imageView];
}
i hope this will help you...
I'm having trouble in points when i'm using a quad curve point.. I want to set the opacity to my lines but i also see points here it is..
here are my codes..
CGPoint midPoint(CGPoint p1,CGPoint p2)
{
return CGPointMake ((p1.x + p2.x) * 0.5,(p1.y + p2.y) * 0.5);
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event//upon touches
{
UITouch *touch = [touches anyObject];
previousPoint1 = [touch locationInView:self.view];
previousPoint2 = [touch locationInView:self.view];
currentTouch = [touch locationInView:self.view];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event//upon moving
{
UITouch *touch = [touches anyObject];
previousPoint2 = previousPoint1;
previousPoint1 = currentTouch;
currentTouch = [touch locationInView:self.view];
CGPoint mid1 = midPoint(previousPoint2, previousPoint1);
CGPoint mid2 = midPoint(currentTouch, previousPoint1);
UIGraphicsBeginImageContext(CGSizeMake(1024, 768));
[imgDraw.image drawInRect:CGRectMake(0, 0, 1024, 768)];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineCap(context,kCGLineCapRound);
CGContextSetLineWidth(context, slider.value);
CGContextSetBlendMode(context, blendMode);
CGContextSetRGBStrokeColor(context,red, green, blue, 0.5);
CGContextBeginPath(context);
CGContextMoveToPoint(context, mid1.x, mid1.y);
CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
CGContextStrokePath(context);
imgDraw.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsGetCurrentContext();
endingPoint=currentTouch;
}
any answer will be appreciated.
What you need to do is keep the list of all points the user has entered so far, and always redraw all of them as part of the same path.
You'll need an array to store the points in. Something like
CGPoint points[kMaxNumPoints];
instead of previousPoint1/2, etc. Then in touchesMoved:, you'll iterate over the points in a loop. Something like this:
CGContextBeginPath (context);
CGContextMoveToPoint (context, points [ 0 ].x, point [ 0 ].y);
for (int i = 1; i < currNumPoints; i++)
{
// I wasn't sure from your example if you wanted the mid point here instead of the
// previous point. But you get the idea.
CGContextAddQuadCurveToPoint (context, points [ i - 1 ].x, points [ i - 1 ].y, point [ i ].x, point [ i ].y);
}
CGContextStrokePath (context);
Using core graphics , I am trying to draw a line, in that when I try to add shadow is creates lin and bubbles inside the line, see the image, I am not able to solve the issue. please find my code below
-(void)drawRect:(CGRect)rect
{
[curImage drawAtPoint:CGPointMake(0, 0)];
CGPoint mid1 = midPoint(previousPoint1, previousPoint2);
CGPoint mid2 = midPoint(currentPoint, previousPoint1);
CGContextRef context = UIGraphicsGetCurrentContext();
[self.layer renderInContext:context];
CGContextMoveToPoint(context, mid1.x, mid1.y);
CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
CGContextSetShadow(context, CGSizeMake(-16.00, -5.0f), 5.0f);
CGContextStrokePath(context);
[super drawRect:rect];
[curImage release];
}
Below is the touchesMoved method.
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
previousPoint2 = previousPoint1;
previousPoint1 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];
// calculate mid point
CGPoint mid1 = midPoint(previousPoint1, previousPoint2);
CGPoint mid2 = midPoint(currentPoint, previousPoint1);
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, mid1.x, mid1.y);
CGPathAddQuadCurveToPoint(path, NULL, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
CGRect bounds = CGPathGetBoundingBox(path);
CGPathRelease(path);
CGRect drawBox = bounds;
//Pad our values so the bounding box respects our line width
drawBox.origin.x -= self.lineWidth * 2;
drawBox.origin.y -= self.lineWidth * 2;
drawBox.size.width += self.lineWidth * 4;
drawBox.size.height += self.lineWidth * 4;
UIGraphicsBeginImageContext(drawBox.size);
[self.layer renderInContext:UIGraphicsGetCurrentContext()];
curImage = UIGraphicsGetImageFromCurrentImageContext();
[curImage retain];
UIGraphicsEndImageContext();
[self setNeedsDisplayInRect:drawBox];
}
CGPoint midPoint(CGPoint p1, CGPoint p2)
{
return CGPointMake((p1.x + p2.x) * 0.5, (p1.y + p2.y) * 0.5);
}
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
previousPoint1 = [touch previousLocationInView:self];
previousPoint2 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];
[self touchesMoved:touches withEvent:event];
}
Here the issue arrives when I try to add the line
CGContextSetShadow(context, CGSizeMake(-16.00, -5.0f), 5.0f);
Please help me out from the issue, thanks in advance. please see editing question with methods .
It would appear you are drawing a series of segments as quad curves. The bubbles would be where the previous segment and the current segment overlap. Since your segment line is a solid red, you don't notice the overlap, but it shows up in the shadows as darker regions.
Try setting your stroke color to have and alpha of 0.5 (or some such translucency). I think (know) you will see the overlapping segments will also show a similar effect as the the shadow.
To solve it, you will want to draw the segment as a continuous path for each line. I'm guessing you are using touchesBegan:withEvent: / touchesMoved:withEvent / touchesEnded:withEvent: to obtain the points of the lines?
In that case, when touchesBegan:withEvent: is called, start your new path. During touchesMoved:withEvent render the new path over the current image. Commit the path to a UIImage in touchesEnded:withEvent:. At this point you may discard the path until touchesBegan:withEvent: is called again with the next stroke.
Update
In your code snippets you end up rendering the whole view three times every run loop. That's a lot of drawing overhead. I quickly put together some code that demonstrates what I am talking about above. It is not tested code, but it should be mostly right:
Update 2
I had a bit of time to write and test some code that will do what you are seeking based on my latest two comments. This code is from the view controller instead of the view itself, but with a little modification, you can move in the view if you like. As such, I added an UIImageView as a subview to the generic UIView to hold and display the image (and maintained a reference to in the view controller), and made the view controller the first responder in order to receive the touch events. Lots of hard coded values that you can clean up when integrating into your own project:
static
UIImage *CreateImage( CGRect rect, NSArray *paths )
{
UIGraphicsBeginImageContextWithOptions(rect.size, NO, 1.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat colorComponents[4] = {0.0,0.0,0.0,0.0};
CGContextSetFillColor(context, colorComponents);
CGContextFillRect(context, rect);
for ( id obj in paths ) {
CGPathRef path = (CGPathRef)obj;
CGContextAddPath(context, path);
}
CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, 5.0);
CGContextSetShadow(context, (CGSize){-8.0,40}, 5.0);
CGContextBeginTransparencyLayer(context, NULL);
CGContextDrawPath(context, kCGPathStroke);
CGContextEndTransparencyLayer(context);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
static
CGPoint MidPoint( CGPoint pt1, CGPoint pt2 )
{
return (CGPoint){(pt1.x+pt2.x)/2.0,(pt1.y+pt2.y)/2.0};
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesBegan:touches withEvent:event];
CGPoint location = [[touches anyObject] locationInView:self.view];
myPath = CGPathCreateMutable();
CGPathMoveToPoint(myPath, NULL, location.x, location.y);
[self.paths addObject:(id)myPath];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesMoved:touches withEvent:event];
UITouch *touch = [touches anyObject];
CGPoint previousLocation = [touch previousLocationInView:self.view];
CGPoint location = [touch locationInView:self.view];
CGPoint midPoint = MidPoint(previousLocation, location);
CGPathAddQuadCurveToPoint(myPath, NULL, midPoint.x, midPoint.y, location.x, location.y);
self.imageView.image = CreateImage(self.view.bounds, self.paths);
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
[super touchesEnded:touches withEvent:event];
UITouch *touch = [touches anyObject];
CGPoint previousLocation = [touch previousLocationInView:self.view];
CGPoint location = [touch locationInView:self.view];
CGPoint midPoint = MidPoint(previousLocation, location);
CGPathAddQuadCurveToPoint(myPath, NULL, midPoint.x, midPoint.y, location.x, location.y);
self.imageView.image = CreateImage(self.view.bounds, self.paths);
CGPathRelease(myPath);
myPath = nil;
}
the problem is you have multiple lines which lie above each other. So the shadows of both overlap and you get a darker color.
For something that easy like your line drawings you can simply copy the whole drawing code and redraw with a different color and a view pixel offset (instead of the shadow). E.g. you save the curves into an array and draw them separately later.
EDIT:
ok #gschandler describes the problem great too.
But you may also like to have a look at the Transparency Layer documentation. Group the elements together and apply a shadow for the group.
Another way round to this is to create an array of points on touch move events, and then draw them..
Create an array of points :
-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
[pointArray release]; pointArray = nil;
pointArray=[[NSMutableArray alloc] init];
UITouch *touch = [touches anyObject];
[bufferArray removeAllObjects];
previousPoint1 = [touch previousLocationInView:self];
previousPoint2 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];
}
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
previousPoint2 = previousPoint1;
previousPoint1 = [touch previousLocationInView:self];
currentPoint = [touch locationInView:self];
[pointArray addObject: [NSValue valueWithCGPoint:previousPoint2]];
[pointArray addObject:[NSValue valueWithCGPoint:previousPoint1]];
[pointArray addObject:[NSValue valueWithCGPoint:currentPoint]];
[self setNeedsDisplay];
}
-(void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
}
-(void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, self.lineColor.CGColor);
CGContextSetShadow(context, CGSizeMake(-16.00, -5.0f), 5.0f);
for(int i = 1 ; i < [pointArray count]-1;i++)
{
CGPoint mid1 = midPoint([pointArray objectAtIndex:i+1], [pointArray objectAtIndex:i]);
CGPoint mid2 = midPoint([pointArray objectAtIndex:i+2], [pointArray objectAtIndex:i+1]);
CGContextMoveToPoint(context, mid1.x, mid1.y);
CGContextAddQuadCurveToPoint(context, previousPoint1.x, previousPoint1.y, mid2.x, mid2.y);
i+=2;
}
CGContextStrokePath(context);
}
You can manage multiple lines with multiple dimensional array :)
For various reasons, I've moved these methods from a UIView subclass to my viewcontroller. And I finally got it working, except for one thing. Not only am I able to drag the UIImageviews I've programmatically created, but the actual view controllers view is draggable too. Creating this much undesired effect. I guess it's the fact that it's touches anyobject, and the background itself is an object. I'm just not sure how exclude the background. I would think that it would need the "UserInteraction enabled", but I guess not? I only want it to make UIImageViews draggable. Please forgive my noobness. I'm still learning.
I have all the imageviews i'd want "touchable" in an NSMutableDictionary called "letterDictionary". Would it be possible to only have touch apply to what's in the dictionary?
http://imgur.com/W08dI
- (void) touchesBegan:(NSSet*)touches withEvent:(UIEvent*)event {
UITouch *touch = [touches anyObject];
touchPoint = [touch locationInView:self.view];
movingLetter = [touch view];
CGPoint pointInside = [touch locationInView:[touch view]];
if ([movingLetter pointInside:pointInside withEvent:event]) touchedInside = YES;
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
if (touchedInside) {
UITouch *touch = [touches anyObject];
CGPoint newPoint = [touch locationInView:self.view]; // get the new touch location
movingLetter.center = CGPointMake(movingLetter.center.x + newPoint.x - touchPoint.x, movingLetter.center.y + newPoint.y - touchPoint.y);
touchPoint = newPoint;
}
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
if (touchedInside) {
UITouch *touch = [touches anyObject];
CGPoint newPoint = [touch locationInView:self.view];
movingLetter.center = CGPointMake(movingLetter.center.x + newPoint.x - touchPoint.x, movingLetter.center.y + newPoint.y - touchPoint.y);
if (CGRectIntersectsRect([movingLetter frame], [placeHolder frame]))
{
movingLetter.center = placeHolder.center;
}
}
touchedInside = NO;
}
- (void)touchesCancelled:(NSSet *)touches withEvent:(UIEvent *)event {
touchedInside = NO;
}
You have the view that was touched,
UITouch *touch = [touches anyObject];
touchPoint = [touch locationInView:self.view];
movingLetter = [touch view];
just test to see if it is the class you are looking for (e.g. a UIImageView) then return
UITouch *touch = [touches anyObject];
if (![[touch view] isKindOfClass:[UIImageView class]])
{
return;
}
In this touchesBegen Method :
-(void)touchesBegan:(NSSet* )touches withEvent:(UIEvent *)event
{
[self.view endEditing:YES];
UITouch *touch = [touches anyObject];
_previousPoint1 = [touch previousLocationInView:self.main_uiview];
_previousPoint2 = [touch previousLocationInView:self.main_uiview];
_currentPoint = [touch locationInView:self.main_uiview];
[self touchesMoved:touches withEvent:event];
self.bezierPath = [UIBezierPath bezierPath];
[self.bezierPath moveToPoint:_currentPoint];
}
TouchesMove Method
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent* )event
{
UITouch *touch = [touches anyObject];
_previousPoint2 = _previousPoint1;
_previousPoint1 = [touch previousLocationInView:self.main_uiview];
_currentPoint = [touch locationInView:self.main_uiview];
lastPoint = _currentPoint;
[_bezierPath addLineToPoint:lastPoint];
// calculate mid point
CGPoint mid1 = midPoint4(_previousPoint1, _previousPoint2);
CGPoint mid2 = midPoint4(_currentPoint, _previousPoint1);
UIGraphicsBeginImageContextWithOptions(self.bg_imageview.frame.size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context,brush);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context,kCGLineJoinRound);
[self.bg_imageview.image drawInRect:CGRectMake(0, 0, self.bg_imageview.frame.size.width, self.bg_imageview.frame.size.height)];
CGContextMoveToPoint(context, mid1.x, mid1.y);
// Use QuadCurve is the key
CGContextAddQuadCurveToPoint(context, _previousPoint1.x, _previousPoint1.y, mid2.x, mid2.y);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetStrokeColorWithColor(context,[UIColor blackColor].CGColor);
CGContextSetLineWidth(context, 3.0);
CGContextStrokePath(context);
self.bg_imageview.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();}