I am trying to better understand touches by writing a few liner which which would track touches:
- (void)drawRect:(CGRect)rect {
NSLog (#"My draw");
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextMoveToPoint(context, prev.x, prev.y);
CGContextAddLineToPoint(context, cur.x, cur.y);
CGContextStrokePath(context);
return;
}
- (void) touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
prev = [touch previousLocationInView:self];
cur = [touch locationInView:self];
[self setNeedsDisplayInRect:CGRectMake (prev.x, prev.y, fabs (cur.x-prev.x), fabs (cur.y - prev.y) )];
}
It clear that my setNeedsDisplay is not correct, as it only works for movement from positive to negative coordinates (from upper left to lower right). With this questions:
It appears that I have to individually write setNeedsDisplay for 4 different cases of potential movement directions (from pos X, Y to neg X,Y, from pos X to neg X, etc). Is this a correct approach, or I am missing some fundamental piece?
Even for the correct movement the line is not solid, but rather broken (depends on the speed of finger tracking). Why is not is solid line to track movement?
Thanks!
setNeedsDisplay does not immediately call drawRect. In fact, touchesMoved may be called several times before the next time the view is drawn, which is why you are seeing broken lines.
Your call to CGRectMake should be:
CGRectMake (MIN(cur.x, prev.x), MIN (cur.y, prev.y), fabs (cur.x-prev.x), fabs (cur.y - prev.y))
In my code, I generalize this with a function to make a rect from any two points, e.g.:
CGRect rectWithPoints(CGPoint a, CGPoint b)
{
return CGRectMake(
MIN (a.x, b.x),
MIN (a.y, b.y),
fabs (a.x - b.x),
fabs (a.y - b.y));
}
Related
I'm trying to make the boxes move only in horizontal and vertical lines following the touchesMoved event.
I could easily check on every touch event if the center of the box is in the center of the current grid block and then allow a direction change. But that will require the touches to be very precise, and could also lead to bugs because of speedy fingers etc. and then miss the touch event.
What I essential would like to do is make the box move correctly in the grid, even though your touch path is not "perfect". See image below, blue lines indicates box movement, green line is the path of the touch. The box needs to follow the grid closest to the touch path, so it looks like your moving it.
How can i accomplish this?
Edit: Forgot to mention that the movement of the box should be smooth, not jump from grid to grid.
Video
Bonus info: I will also need to flicks boxes left/right up/down with touch momentum, and of course have some sort of collision detection, so boxes can't move through other boxes on the grid. Am I better off with a 2d physics engine?
Smooth animation based on hacker2007 answer:
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *aTouch = [touches anyObject];
CGPoint location = [aTouch locationInView:gridContainerView];
for (UIView *subView in gridContainerView.subviews) {
if (conditionForBeingAGridBlock && CGRectContainsPoint(subview.frame, touchPoint))
{
[UIView beginAnimations:#"Dragging A DraggableView" context:nil];
self.frame = CGRectMake(0, location.y, subview.frame.size.width, subview.frame.size.height);
[UIView commitAnimations];
}
}
}
This will move the view you are dragging under your finger, you can add checks yourself to make sure that it doesn't go where it can't. But this will get your a smooth dragging animation.
Seems the problem is what you're setting the frame to in your anitamion:
Currently every time you move the square a little bit you get a new rect here:
CGRect rect = [self.grid getCellRect:self.grid.gridView x:cell.x y:cell.y];
Then in your animation you do this:
self.frame = rect;
Then you animate the box to that rect. So if you move your finger really quickly then you will get that 'skip' effect. If you change it to this:
self.frame = CGRectMake(location.x - self.bounds.size.width / 2, location.y - self.bounds.size.height / 2, self.bounds.size.width, self.bounds.size.height);
try this approach assuming your grid blocks are located in gridContainerView
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
for (UITouch *touch in touches) {
CGPoint touchPoint = [touch locationInView: gridContainerView];
for (UIView *subView in gridContainerView.subviews) {
if (conditionForBeingAGridBlock &&
CGRectContainsPoint(subview.frame, touchPoint)) {
box.frame = subview.frame;
}
}
}
}
just like the path in the picture
(new users aren't allowed to post images, sorry i can only give the link)
http://cdn.dropmark.com/30180/3bd0f0fc6ee77c1b6f0e05e3ea14c821f8b48a82/questiong1-1.jpg
Thanks a lot for any help
Try this on touches event delegate (if you want to rotate the view with touch event)-
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
touches = [event allTouches];
UITouch *touch = [[event allTouches] anyObject];
CGPoint Pageposition = [touch locationInView:self];
CGPoint prevPoint = [[[touches allObjects] objectAtIndex:0] previousLocationInView:self];
CGPoint curPoint = [[[touches allObjects] objectAtIndex:0] locationInView:self];
float prevAngle = atan2(prevPoint.x, prevPoint.y);
float curAngle= atan2(curPoint.x, curPoint.y);
float angleDifference = curAngle - prevAngle;
CGAffineTransform newTransform3 = CGAffineTransformRotate(self.transform, angleDifference);
self.transform = newTransform3;
}
use transform rotation , and tell me if it works..
Please look at my answer for this question about "rotating a label around an arbitrary point" for a more detailed explanation about using the an anchor point when rotating (ignore the keyframe animation answers since they are more complicated and not the "right tool for this job" even though the answers says so).
In short: set the anchor point to the point (in the unit-coordinate system of your views layer) to the point outside of your view and just apply a normal rotation animation.
EDIT: One thing to remember
The frame of your layer (which is also the frame of your view) is calculated using the position, bounds and anchor point. Changing the anchorPoint will change where your view appears on screen. You can counter this by re-setting the frame after changing the anchor point (this will set the position for you). Otherwise you can set the position to the point you are rotating to yourself. The Layer Geometry and Transforms (linked to in the other question) also mentions this.
The code that I provided in that answer (generalized to a UIView and Core Animation instead of UIView-animations):
#define DEGREES_TO_RADIANS(angle) (angle/180.0*M_PI)
- (void)rotateView:(UIView *)view
aroundPoint:(CGPoint)rotationPoint
duration:(NSTimeInterval)duration
degrees:(CGFloat)degrees {
CABasicAnimation *rotationAnimation = [CABasicAnimation animationWithKeyPath:#"transform"];
[rotationAnimation setDuration:duration];
// Additional animation configurations here...
// The anchor point is expressed in the unit coordinate
// system ((0,0) to (1,1)) of the label. Therefore the
// x and y difference must be divided by the width and
// height of the view (divide x difference by width and
// y difference by height).
CGPoint anchorPoint = CGPointMake((rotationPoint.x - CGRectGetMinX(view.frame))/CGRectGetWidth(view.bounds),
(rotationPoint.y - CGRectGetMinY(view.frame))/CGRectGetHeight(view.bounds));
[[view layer] setAnchorPoint:anchorPoint];
[[view layer] setPosition:rotationPoint]; // change the position here to keep the frame
CATransform3D rotationTransform = CATransform3DMakeRotation(DEGREES_TO_RADIANS(degrees), 0, 0, 1);
[rotationAnimation setToValue:[NSValue valueWithCATransform3D:rotationTransform]];
// Add the animation to the views layer
[[view layer] addAnimation:rotationAnimation
forKey:#"rotateAroundAnchorPoint"]
}
I'm currently working on a iPad project where I need the functionality to let the user write on a piece of paper with a stylus.
I've tested a couple of styluses and found out that the bamboo was the best. They also have a free application which you can use to write.
The problem I'm facing is that the method I use does not delivers smooth curves. The bamboo paper app provides perfect looking lines. This is the code I have so far:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
UIGraphicsBeginImageContext(self.frame.size);
// draw accumulated lines
if ([self.lines count] > 0) {
for (Line *tempLine in self.lines){
CGContextSetAlpha(context, tempLine.opacity);
CGContextSetStrokeColorWithColor(context, tempLine.lineColor.CGColor);
CGContextSetLineWidth(context, tempLine.lineWidth);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextAddPath(context, tempLine.linePath);
CGContextStrokePath(context);
}
}
//draw current line
CGContextSetAlpha(context, self.currentLine.opacity);
CGContextSetStrokeColorWithColor(context, self.currentLine.lineColor.CGColor);
CGContextSetLineWidth(context, self.currentLine.lineWidth);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextBeginPath(context);
CGContextAddPath(context, self.currentLine.linePath);
CGContextStrokePath(context);
UIGraphicsEndImageContext();
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint cPoint = [touch locationInView:self];
CGPathMoveToPoint(self.currentLine.linePath, NULL, cPoint.x, cPoint.y);
[self setNeedsDisplay];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint currentPoint = [touch locationInView:self];
CGPathAddLineToPoint(self.currentLine.linePath, NULL, currentPoint.x, currentPoint.y);
[self setNeedsDisplay];
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
CGPoint cPoint = [touch locationInView:self];
CGPathAddLineToPoint(self.currentLine.linePath, NULL, cPoint.x, cPoint.y);
[self setNeedsDisplay];
[self.lines addObject:self.currentLine];
Line *nextLine = [[Line alloc] initWithOptions:self.currentLine.lineWidth color:self.currentLine.lineColor opacity:self.currentLine.opacity];
self.currentLine = nextLine;
[nextLine release];
}
Here are the images that makes it clear what problem I'm facing. This is the image what gets generated when writing with the code provided above:
This is the image if I write the same thing on the Mamboo paper app:
Does anyone have an idea how to get the nice writing like in the mamboo app?
Instead of joining the points using straight lines (CGPathAddLineToPoint) you should try using bezier curves: CGPathAddCurveToPoint or CGPathAddQuadCurveToPoint.
This is what will do the smoothing.
If you are not familliar with bézier curves, you will probably find the wikipedia page about Bézier curves interesting (not specifically the math equations, but look at the sketches and animated images). It will give your the general idea of how control points affect the smoothing of the lines around the key points of your line.
For your case, Quadratic curves (only one control point for each subsegment between two of your key points) should be sufficient.
(One line from P0 to P1, smoothed using control point P1)
One example (out of the box, only a suggestion out of my mind, never tested, adapt the coefficients to your needs) to compute this control point C between each of your keypoints A and B is to make the AC being, say, 2/3rd of the length of AB, and (AB,AC) making an angle of 30 degrees or sthg similar.
You may even propose in the settings of your app to adjust the smoothing strengh with a slider, which will impact the values you choose to compute each control points and see which coefficients fits best.
I'm developing a basic drawing app that has a few classes. One of these is a "Line" class that stores some info on a line the user can draw. When the user drags round the screen, a line is created for each movement of their finger, so a line is drawn following their finger. I store all the line objects in an NSArray and redraw each time something changes. However, since the array just keeps getting bigger, and eventually starts to slow down. Is there any way to just draw the new lines, or a better storage mechanism for the lines?
EDIT:
Read the answer below, but setNeedsDisplayInRect: doesn't seem to be working. I am calling it like so:
-(void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
for (UITouch *t in touches) {
//add line to array w/ x and y values from touch
[self setNeedsDisplayInRect:[self rectForLine:line]];
}
}
-(CGRect)rectForLine:(Line*)line {
CGFloat x1 = [line begin].x;
CGFloat y1 = [line begin].y;
CGFloat x2 = [line end].x;
CGFloat y2 = [line end].y;
CGFloat originX = (x1>x2) ? x1 : x2;
CGFloat originY = (y1<y2) ? y1 : y2;
CGFloat diffX = ((x1>x2) ? x1 : x2) - originX;
CGFloat diffY = ((y1>x2) ? y1 : y2) - originY;
return CGRectMake(originX, originY, diffX, diffY);
}
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 10.0);
CGContextSetLineCap(context, kCGLineCapRound);
//[[UIColor blackColor] set];
for (Line *line in completeLines) {
if (CGRectContainsPoint(rect, [line begin]) && CGRectContainsPoint(rect, [line end])) {
//draw line onto the screen
}
}
If a "line" is just a pair of points in your data model, that's not the part slowing you down.
Your perf problem is that you're redrawing the whole thing every line that gets added, which is O(n^2) or very specifically a Schlemiel-the-Painter's algorithm.
The simplest improvement, assuming you're drawing inside the -drawRect: of a UIView, is probably to only invalidate and redraw the rect that contains the new line. Based on the start and end points, you can create the invalid rect to send to -setNeedsDisplayInRect:, and then in your drawRect, look at all your lines, and only draw the ones that fall inside the rect. This bounds your draw performance to the size of the lines and to a much lesser degree, the drawing that's "already there".
I would like to develop an app when the user can draw lines... but I do not want to draw straight lines but want to show the line as the users draws it. When the user gets from point A to B I would like to straighten the line (if the users wants this).
To be able to do this I want to change my view into a grid starting at 0,0 (top left) and ending at 320,480 (for iPhone) and 768,1024 (for iPad) (bottom right).
For this question I have point A at 10,10 and point B at 100,100.
My question:
- How do I create this grid?
- How do I create these points?
- How do I draw this line without straightening it?
- How do I draw the straighten line?
My problem is that I am familiar with creating "normal" UI apps. I am not familiar with Open-GL ect.
I hope someone can help me with this.
Best regards,
Paul Peelen
You subclass your UIView and override the - (void)drawRect:(CGRect)rect method.
In there you grab a graphics context:
CGContextRef context = UIGraphicsGetCurrentContext();
And you use that to make Core Graphics calls, like:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextBeginPath (context);
for (k = 0; k < count; k += 2) {
CGContextMoveToPoint(context, s[k].x, s[k].y);
CGContextAddLineToPoint(context, s[k+1].x, s[k+1].y);
}
CGContextStrokePath(context);
Look up the Quartz 2D Programming Guide for all the details.
You can drag straight line when user drag it based on starting and ending point draw a line using UIBezierPath and CAShapeLayer:
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event allTouches] anyObject];
startingPoint = [touch locationInView:baseHolderView];
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
endingPoint = [touch locationInView:baseHolderView];
[self makeLineLayer:baseHolderView.layer lineFromPointA:startingPoint toPointB:endingPoint];
}
-(void)makeLineLayer:(CALayer *)layer lineFromPointA:(CGPoint)pointA toPointB:(CGPoint)pointB
{
CAShapeLayer *line = [CAShapeLayer layer];
UIBezierPath *linePath=[UIBezierPath bezierPath];
[linePath moveToPoint: pointA];
[linePath addLineToPoint:pointB];
line.path=linePath.CGPath;
line.fillColor = nil;
line.opacity = 2.0;
line.strokeColor = [UIColor blackColor].CGColor;
[layer addSublayer:line];
}
Hope this will help to achieve your goal.