How i access the array of CGPoints to draw the graph? - iphone

I have the code in which i want to develop the graph.The code is,
NSArray *coordinate = [[NSArray alloc] initWithObjects: #"42,213", #"75,173", #"108,153", #"141,133", #"174,113", #"207,73", #"240,33", nil];
CGContextSetRGBFillColor(ctx, 255, 0, 0, 1.0);
CGContextSetLineWidth(ctx, 8.0);
for(int intIndex = 0; intIndex < [coordinate count]; fltX1+=33, intIndex++)
{
CGContextMoveToPoint(ctx, fltX1+37, fltY2+18);
CGPoint point = [[coordinate objectAtIndex:intIndex] CGPointValue];
CGContextAddLineToPoint(ctx, point);
CGContextStrokePath(ctx);
}
I the above code goes in to debugger at the line of CGPoint point = [[coordinate objectAtIndex:intIndex] CGPointValue].
How i drawing the line in the graph using above code????????
Now i changing the above code as fllows,
Hi,glorifiedHacker,I already guessing above sentence.
But, now i changing the my code like,
CGContextSetRGBFillColor(ctx, 255, 0, 0, 1.0);
CGContextSetLineWidth(ctx, 8.0);
NSArray *coordinate1 = [[NSArray alloc] initWithObjects:#"42",#"75",#"108",#"141",#"174",#"207",#"240",nil];
NSLog(#"The points of coordinate1: %#", coordinate1);
NSArray *coordinate2 = [[NSArray alloc] initWithObjects:#"213",#"173",#"153",#"133",#"113",#"73",#"33",nil];
for(int intIndex = 0; intIndex < [coordinate1 count], intIndex < [coordinate2 count]; fltX1+=33, intIndex++)
{
CGContextMoveToPoint(ctx, fltX1+37, fltY2+18);
NSString *arrayDataForCoordinate1 = [coordinate1 objectAtIndex:intIndex];
NSString *arrayDataForCoordinate2 = [coordinate2 objectAtIndex:intIndex];
CGContextAddLineToPoint(ctx, (float *)arrayDataForCoordinate1, (float *)arrayDataForCoordinate2);
//NSLog(#"CGPoints of drawing the bar: %#", point);
}
CGContextClosePath(ctx);
CGContextStrokePath(ctx)
But it still given me error on same line.

Your graphics context likely doesn't have a path for you to add lines to at this point. Try wrapping your for loop in the appropriate "begin path" and "close path" function calls.
CGContextBeginPath(ctx);
for(int intIndex = 0; intIndex < [coordinate count]; fltX1 += 33, intIndex++) {
CGContextMoveToPoint(ctx, fltX1+37, fltY2+18);
CGPoint point = [[coordinate objectAtIndex:intIndex] CGPointValue];
CGContextAddLineToPoint(ctx, point.x, point.y);
}
CGContextClosePath(ctx);
CGContextStrokePath(ctx);
Also, note that I moved the "stroke path" call outside of the for loop until you have closed the path.

Instead of typecasting an (NSString *) to a (float *) try [myString doubleValue]. If you have strings of the form "{x,y}" you can use CGPointFromString to convert directly to a point. If you can, avoid strings altogether and keep the original data as numeric types. If you must use an NSArray, that could be NSNumber pairs or NSValue of CGPoint.

I the above code goes in to debugger at the line of CGPoint point = [[coordinate objectAtIndex:intIndex] CGPointValue].
Because NSStrings don't respond to CGPointValue messages. You can see this for yourself by looking at the NSString documentation (or the Debugger Console, which will contain an exception message telling you this).
How i drawing the line in the graph using above code????????
Parse the strings yourself using NSScanner, or use the NSPointFromString function, or use a C array (not an NSArray) of NSPoints/CGPoints.
On an unrelated note:
for(int intIndex = 0; intIndex < [coordinate count]; fltX1+=33, intIndex++)
{
CGContextMoveToPoint(ctx, fltX1+37, fltY2+18);
Don't just drop random numeric literals into your code. You will have no idea what these numbers mean six months from now, and if you ever want to change, say, the horizontal offset of the graph, you will have to replace the number 37 everywhere in your app (except where it isn't the horizontal offset of the graph), not to mention any numbers that are 37 plus some other offset.
Instead, give these numbers names using something like this:
enum {
MyDistanceBetweenPoints = 33,
MyGraphOffsetX = 37,
MyGraphOffsetY = 18,
};
This way, if you want to change the horizontal offset of the graph, you don't need to hunt down every last relevant numeric literal; you need only change the definition of MyGraphOffsetX.
You can also use the current transformation matrix to offset the graph, thereby eliminating the additions from every CGContextMoveToPoint call and eliminating the risk that you'll forget an addition.

Related

Draw lines between points(multiple)

with the help i am able to draw circle with the coordinated using:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 5.0);
CGContextSetStrokeColorWithColor(context,[UIColor grayColor].CGColor);
/**** Get values from reponse and fill it in this array. ******/
NSArray *objectCoords = [NSArray arrayWithObjects: #"{{20,80},{5,5}}", #"{{120,60},{5,5}}", #"{{60,84},{5,5}}", #"{{80,88},{5,5}}", #"{{100,93},{5,5}}", #"{{20,20},{5,5}}", #"{{160,70},{5,5}}", #"{{128,68},{5,5}}", #"{{90,60},{5,5}}", #"{{110,80},{5,5}}", nil];
for (NSString* objectCoord in objectCoords) {
CGRect coord = CGRectFromString(objectCoord);
// Draw using your coord
CGContextAddEllipseInRect(context, coord);
}
Now what i am trying to achieve is draw lines between the points(circle),as shown in the attached image.I know we can draw a line between 2 points, but here in this case, the lines needs to be drawn between one to multiple point/circle .Please suggest me to achieve this result.
You can just draw multiple lines. First, come up with a model to represent between which points you want to draw lines. For example, you could have an array of lines, where each line is defined, itself, as an array with the indices of two points, the starting point and the ending point.
For example, if you want to draw lines from point 1 to 3, 4, and 5, and from point 3 to 4 and 5, and between 4 and 5, you could do something like:
CGContextSetLineWidth(context, 1.0);
NSArray *lines = #[#[#(1), #(3)],
#[#(1), #(4)],
#[#(1), #(5)],
#[#(3), #(4)],
#[#(3), #(5)],
#[#(4), #(5)]];
for (NSArray *points in lines) {
NSInteger startIndex = [points[0] integerValue];
NSInteger endIndex = [points[1] integerValue];
CGRect startRect = CGRectFromString(objectCoords[startIndex]);
CGRect endRect = CGRectFromString(objectCoords[endIndex]);
CGContextMoveToPoint(context, CGRectGetMidX(startRect), CGRectGetMidY(startRect));
CGContextAddLineToPoint(context, CGRectGetMidX(endRect), CGRectGetMidY(endRect));
}
CGContextDrawPath(context, kCGPathStroke);
There are tons of different ways of doing it, but just come up with some model that represents where you want to draw the lines, and then iterate through that model to draw all of the individual lines.
If you wanted to have every point draw lines to the three closest points (which is not what your picture does, but it's what you asked for in a subsequent comment), you can:
build array of indices, indices in your objectCoords array; and
now iterate through each point in objectCoords:
build new array of indices, sortedIndices, sorted by the distance that the point represented by that index is from the current object in objectCoords; and
draw the three closest lines.
Thus:
// build array of indices (0, 1, 2, ...)
NSMutableArray *indices = [NSMutableArray array];
[objectCoords enumerateObjectsUsingBlock:^(id obj, NSUInteger idx, BOOL *stop) {
[indices addObject:#(idx)];
}];
// now go through all of the points in objectCoords
[objectCoords enumerateObjectsUsingBlock:^(NSString *obj, NSUInteger idx, BOOL *stop) {
// build new array of indices sorted by distance from the current point
NSArray *sortedIndices = [indices sortedArrayUsingComparator:^NSComparisonResult(id obj1, id obj2) {
CGFloat distance1 = [self distanceFromPointAtIndex:idx
toPointAtIndex:[obj1 integerValue]
usingObjectCoords:objectCoords];
CGFloat distance2 = [self distanceFromPointAtIndex:idx
toPointAtIndex:[obj2 integerValue]
usingObjectCoords:objectCoords];
if (distance1 < distance2)
return NSOrderedAscending;
else if (distance1 > distance2)
return NSOrderedDescending;
return NSOrderedSame;
}];
// now draw lines to the three closest indices
// (skipping 0, because that's probably the current point)
for (NSInteger i = 1; i < 4 && i < [sortedIndices count]; i++) {
NSInteger index = [sortedIndices[i] integerValue];
CGRect startRect = CGRectFromString(objectCoords[idx]);
CGRect endRect = CGRectFromString(objectCoords[index]);
CGContextMoveToPoint(context, CGRectGetMidX(startRect), CGRectGetMidY(startRect));
CGContextAddLineToPoint(context, CGRectGetMidX(endRect), CGRectGetMidY(endRect));
}
}];
CGContextSetLineWidth(context, 1);
CGContextDrawPath(context, kCGPathStroke);
And this uses the following method to calculate the distance between two points:
- (CGFloat)distanceFromPointAtIndex:(NSInteger)index1 toPointAtIndex:(NSInteger)index2 usingObjectCoords:(NSArray *)objectCoords
{
CGRect rect1 = CGRectFromString(objectCoords[index1]);
CGRect rect2 = CGRectFromString(objectCoords[index2]);
return hypotf(CGRectGetMidX(rect1) - CGRectGetMidX(rect2), CGRectGetMidY(rect1) - CGRectGetMidY(rect2));
}
Using the objectCoords in your original example, that yields:
This is a little unrelated to your original question, but rather than an array of strings, like so:
NSArray *objectCoords = #[#"{{20,80},{5,5}}",
#"{{120,60},{5,5}}",
#"{{60,84},{5,5}}",
#"{{80,88},{5,5}}",
#"{{100,93},{5,5}}",
#"{{20,20},{5,5}}",
#"{{160,70},{5,5}}",
#"{{128,68},{5,5}}",
#"{{90,60},{5,5}}",
#"{{110,80},{5,5}}"];
I might suggest employing an array of NSValue objects:
NSArray *objectCoords = #[[NSValue valueWithCGRect:CGRectMake(20,80,5,5)],
[NSValue valueWithCGRect:CGRectMake(120,60,5,5)],
[NSValue valueWithCGRect:CGRectMake(60,84,5,5)],
[NSValue valueWithCGRect:CGRectMake(80,88,5,5)],
[NSValue valueWithCGRect:CGRectMake(100,93,5,5)],
[NSValue valueWithCGRect:CGRectMake(20,20,5,5)],
[NSValue valueWithCGRect:CGRectMake(160,70,5,5)],
[NSValue valueWithCGRect:CGRectMake(128,68,5,5)],
[NSValue valueWithCGRect:CGRectMake(90,60,5,5)],
[NSValue valueWithCGRect:CGRectMake(110,80,5,5)]];
Then, when you're extracting the CGRect value, instead of:
CGRect rect = CGRectFromString(objectCoords[index]);
You would do:
CGRect rect = [objectCoords[index] CGRectValue];
I know this looks more cumbersome, but using NSValue is going to be more efficient (which is useful when doing a lot or repeated calculations of distances).
Even better, you might want to define your own model object that more intuitively defines a point that you want to chart, e.g.:
#interface ChartPoint : NSObject
#property (nonatomic) CGPoint center;
#property (nonatomic) CGFloat radius;
#end
and
#implementation ChartPoint
+ (instancetype) chartPointWithCenter:(CGPoint)center radius:(CGFloat)radius
{
ChartPoint *chartPoint = [[ChartPoint alloc] init];
chartPoint.center = center;
chartPoint.radius = radius;
return chartPoint;
}
- (CGFloat)distanceToPoint:(ChartPoint *)otherPoint
{
return hypotf(self.center.x - otherPoint.center.x, self.center.y - otherPoint.center.y);
}
#end
And then you can create an array of them like so:
NSArray *objectCoords = #[[ChartPoint chartPointWithCenter:CGPointMake(20,80) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(120,60) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(60,84) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(80,88) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(100,93) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(20,20) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(160,70) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(128,68) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(90,60) radius:5],
[ChartPoint chartPointWithCenter:CGPointMake(110,80) radius:5]];
But this
avoids inefficient CGRectFromString;
avoids needing to do those repeated CGRectGetMidX and CGRectGetMidY calls to determine the center of the CGRect; and, most importantly,
more accurately represents what your objects really are.
Obviously, when you want to draw your points, instead of doing:
NSString *string = objectCoords[idx];
CGRect *rect = CGRectFromString(string);
CGContextAddEllipseInRect(context, rect);
You'd do:
ChartPoint *point = objectCoords[idx];
CGContextAddArc(context, point.center.x, point.center.y, point.radius, 0, M_PI * 2.0, YES);

Setting Buttons frame(only x & y position) from array of CGPoints

1)I have an array of length 10 and named 'pointArrar'.This array contain CGPoints on its each index
2)Also I have 10 buttons.
Now I want to set Buttons frame(only x & y position) from array of CGPoints.I just want to know how to set buttons x and y position from CGPoint contained in array.
Well its very logical.
Lets say your array is like
NSArray * pointArrar = [NSArray arrayWithObjects:
[NSValue valueWithCGPoint:CGPointMake(5.5, 6.6)],
[NSValue valueWithCGPoint:CGPointMake(7.7, 8.8)],
nil];
Then to add to your various buttons you need to simply put all the points into a loop like
for(int i=0; i<[pointArrar count] ; i++)
{
NSValue *val = [pointArrar objectAtIndex:i];
CGPoint p = [val CGPointValue];
[Button setCenter:p];
}
Here all the points have been added to your button. Hope this works for you :)
As i understand you want to use NSArray and it do not store any structures. So you can you NSValue to wrap you points and to add them to array. Here is an example..
NSArray *points = [NSArray array];
// wrap your point using NSValue
NSValue *pointValue = [NSValue valueWithCGPoint:CGPointMake(x,y)];
[points addObject:pointValue];
/// ... add points
// get your point back...
CGPoint point = [[points objectAtIndex:index] CGPointValue];
button.frame = CGRectMake(point.x, point.y, button.frame.size.width, button.frame.size.height;

Coloring In between CGPaths

I am building a drawing type tool into my app.
It takes a touch points from the user and draws lines between the points. If the user creates 3 touch points or greater, it joins the last point to the first point.
An extract of the code is :
startPoint = [[secondDotsArray objectAtIndex:i] CGPointValue];
endPoint = [[secondDotsArray objectAtIndex:(i + 1)] CGPointValue];
CGContextAddEllipseInRect(context,(CGRectMake ((endPoint.x - 5.7), (endPoint.y - 5.7)
, 9.0, 9.0)));
CGContextDrawPath(context, kCGPathFill);
CGContextMoveToPoint(context, startPoint.x, startPoint.y);
CGContextAddLineToPoint(context, endPoint.x, endPoint.y);
CGContextStrokePath(context);
I wish to "color in " the area contained within these paths.
What should I look at?
You need to use the CGContextFillPath API. You should be careful of how you define the path, though:
Start by calling CGContextMoveToPoint on the initial point
Proceed by drawing all segments except the closing one with CGContextAddLineToPoint
Close the path with CGContextClosePath. Do not add line to point on the final segment.
The call of CGContextFillPath will produce a path colored with the fill color that you have previously set.
Here is an example:
CGPoint pt0 = startPoint = [[secondDotsArray objectAtIndex:0] CGPointValue];
CGContextMoveToPoint(context, pt0.x, pt0.y);
for (int i = 1 ; i < noOfDots ; i++) {
CGPoint next = [[secondDotsArray objectAtIndex:i] CGPointValue];
CGContextAddLineToPoint(context, next.x, next.y);
}
CGContextClosePath(context);
CGContextFillPath(context);

How to implement undo in a drawing app

Below is the code snippet of painting. I can do undo in a vector drawing just like storing points and remove the highest one from mutable array then redrawing.However, it does not function properly in a raster drawing.
If I use UIGraphicsGetCurrentContext() as a context reference, undo works well. But the context of CGBitmapContextCreate() does not when issue undo action.
- (id)initWithFrame:(CGRect)frame {
objArray = [[NSMutableArray alloc] init];
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
canvas = CGBitmapContextCreate(NULL, drawImage.frame.size.width, drawImage.frame.size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGColorSpaceRelease(colorSpace);
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGImageRef imgRef = CGBitmapContextCreateImage(canvas);
CGRect r = self.bounds;
CGContextDrawImage(context, CGRectMake(0, 0, r.size.width, r.size.height), imgRef);
if(ok) {
for (int i = 0; i < [objArray count]; i++) {
CGPoint point = [[[objArray objectAtIndex: i] objectAtIndex:0] CGPointValue];
CGContextMoveToPoint(canvas, point.x, point.y);
for (int j = 0; j < [[objArray objectAtIndex:i] count]; j++) {
point = [[[objArray objectAtIndex: i] objectAtIndex:j] CGPointValue];
CGContextAddLineToPoint(canvas, point.x, point.y);
CGContextStrokePath(**canvas**);
CGContextMoveToPoint(**canvas**, point.x, point.y);
}
}
}
CGImageRelease(imgRef);
}
- (void)undo:(id) sender {
NSLog(#"click");
if([objArray count] > 0)
[objArray removeLastObject];
ok = YES;
[self setNeedsDisplay];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
NSMutableArray *points = [NSMutableArray array];
UITouch *touch = nil;
if (touchPoint) {
touch = [touches member:touchPoint];
}
end = [touch locationInView:self];
[points addObject:[NSValue valueWithCGPoint:start]];
[points addObject:[NSValue valueWithCGPoint:end]];
[objArray addObject:points];
CGContextMoveToPoint(**canvas**, start.x, start.y);
CGContextAddLineToPoint(**canvas**, end.x, end.y);
CGContextSetLineCap(**canvas**, kCGLineCapRound);
CGContextSetLineWidth(**canvas**, 40.0);
CGContextStrokePath(**canvas**);
start = end;
[self setNeedsDisplay];
}
With raster drawing you're changing the pixels in the canvas each time, there are no objects like there are in a vector drawing.
As a result the only "state" you have is the canvas itself. In order to allow for undo you actually need to save a copy of the canvas before each change. Right before you make the change you'll copy the old bitmap context and then make the change. If the user chooses to undo then you'll just copy the saved context over the normal one. If you want to allow for multiple undos you'll have to save multiple copies.
Obviously this can become memory intensive. Technically you don't actually have to save the whole canvas, just the part that has changes on it, with a record of the position of the changed section. If changes are small then you'll save quite a bit of memory, but some changes can affect the whole canvas, not saving anything.
You could potentially save even more memory with algorithms that store changed pixels, but the processing overhead isn't likely worth it.
Assumming you're storing the image in an Image object, create a stack:
Stack undoStack = ...
Stack redoStack = ...
The high memory solution
As the user makes changes you to the image, you can store the next image (w the changes), and the next and the next and so on. When the user wants to undo, you restore the images by popping from the undoStack and pushing onto the redo stack:
void undo(){
redoStack.push(undoStack.pop());
}
To redo, use the same process, but backwards.
The low memory solution
The concent is the same as above, but now instead of storing the whole image, you can XOR the modified image with the previous one (or with the original one) and store only the pixels that have changed and coordinates at which these changes occur. You might even consider quad tree packing of this new XORed image to save memory if the changes are not great.

Draw underlined / strikethrough text ( MULTILINE STRING )?

I have to draw underlined-multiline text with all types of text alignment. I have searched on forums and got some results like:
http://davidjhinson.wordpress.com/2009/11/26/underline-text-on-the-iphone/
http://forums.macrumors.com/showthread.php?t=561572
But all draw text for single line only. while i have multi-line text. The situation even become worse when the text alignment is centered. I searched and found that in iphone-sdk-3.2 there are some core-text attributes for underlining a text but no idea how to use that. Besides if I use these my problem would not be solved fully.
As I have to draw strikethrough text also.
Anybody having idea about this please help.
What about this. This works good for me what you all think, if this needs some optimisation?
CGContextSetFillColorWithColor(c, [[UIColor blackColor] CGColor]); //THE TEXT COLOR OF THE STRING TO BE DRAWN.
UIFont *fontName = [UIFont fontWithStyle:#"Arial-BoldMT" andFontSize:13];
if(FontOverLayUnderLine || FontOverLayStrikeThrough){
NSArray *stringsArray = [textString componentsSeparatedByCharactersInSet:[NSCharacterSet newlineCharacterSet]];
CGContextSetStrokeColorWithColor(c, [appDel.textDisplayStyle.fillColor CGColor]);
CGContextSetLineWidth(c, 1.0);
CGSize stringSize;
NSString *stringToDraw;
for (int i = 0 ; i < [stringsArray count]; i++) {
stringToDraw = [stringsArray objectAtIndex:i];
if(![[stringToDraw stringByTrimmingCharactersInSet:[NSCharacterSet whitespaceCharacterSet]] isEqualToString:#""]){
stringSize = [stringToDraw sizeWithFont:fontName forWidth:rect.size.width lineBreakMode:UILineBreakModeCharacterWrap];
float x = rect.origin.x + (rect.size.width-stringSize.width)/2 + 7;
float y = 4 + stringSize.height*i;
[stringToDraw drawAtPoint:CGPointMake(x, y) forWidth:stringSize.width withFont:fontName lineBreakMode:UILineBreakModeCharacterWrap];
if(FontOverLayUnderLine)
y += (1.05) * stringSize.height*i +1;
else
y += (stringSize.height/2)+1;
CGContextMoveToPoint(c, x, y);
CGContextAddLineToPoint(c, x+stringSize.width, y);
CGContextStrokePath(c);
}
}
}
Hope this works good for all.
Thanks,
Madhup
Use Core Text.
I searched and found that in iphone-sdk-3.2 there are some core-text attributes for underlining a text but no idea how to use that.
That's what the documentation is for.