I'm attempting to draw two lines -- I understand that 0 is suppose to start at the corner, but for me it seems off. I know it isn't the code that's wrong and I've tried doing negative numbers for the x-coordinate, but the line disappears.
Those who wanted the size of my frames:
2014-03-29 21:12:28.294 touchScreenClockTest[5178:70b] height = 568.000000
2014-03-29 21:12:28.295 touchScreenClockTest[5178:70b] width = 320.000000
What I want it to look like:
What it looks like:
// Draw the top line
CGContextRef drawTopLine = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(drawTopLine, [UIColor whiteColor].CGColor);
// Draw them with a 2.0 stroke width so they are a bit more visible.
CGContextSetLineWidth(drawTopLine, 1.5);
CGContextMoveToPoint(drawTopLine, 0,5); //start at this point
CGContextAddLineToPoint(drawTopLine, 300, 5); //draw to this point
// and now draw the Path!
CGContextStrokePath(drawTopLine);
// Draw the bottom line
CGContextRef drawBotLine = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(drawBotLine, [UIColor whiteColor].CGColor);
// Draw them with a 2.0 stroke width so they are a bit more visible.
CGContextSetLineWidth(drawBotLine, 1.5);
CGContextMoveToPoint(drawBotLine, 0, 30); //start at this point
CGContextAddLineToPoint(drawBotLine, 300, 30); //draw to this point
// and now draw the Path!
CGContextStrokePath(drawBotLine);
Also one more question. I wanted to know how to put the navigation button on my own. I have the image of the navigation, but I didn't know what I would need to call to place the image UIView? (since I don't have a storyboard)
Related
I'm trying to implement something like code-editor. I base my work on CYRTextVIew. Everything works fine except for line numbers and cursor drawing.
First of all it has a bug, which doesn't erase previous cursor position, which results in drawing multiple ones, looks like so:
Here is the code related to that:
- (void)drawRect:(CGRect)rect
{
// Drag the line number gutter background. The line numbers them selves are drawn by LineNumberLayoutManager.
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect bounds = self.bounds;
CGFloat height = MAX(CGRectGetHeight(bounds), self.contentSize.height) + 200;
// Set the regular fill
CGContextSetFillColorWithColor(context, self.gutterBackgroundColor.CGColor);
CGContextFillRect(context, CGRectMake(bounds.origin.x, bounds.origin.y, self.lineNumberLayoutManager.gutterWidth, height));
// Draw line
CGContextSetFillColorWithColor(context, self.gutterLineColor.CGColor);
CGContextFillRect(context, CGRectMake(self.lineNumberLayoutManager.gutterWidth, bounds.origin.y, 0.5, height));
if (_lineCursorEnabled)
{
self.lineNumberLayoutManager.selectedRange = self.selectedRange;
NSRange glyphRange = [self.lineNumberLayoutManager.textStorage.string paragraphRangeForRange:self.selectedRange];
glyphRange = [self.lineNumberLayoutManager glyphRangeForCharacterRange:glyphRange actualCharacterRange:NULL];
self.lineNumberLayoutManager.selectedRange = glyphRange;
[self.lineNumberLayoutManager invalidateDisplayForGlyphRange:glyphRange];
}
[super drawRect:rect];
}
I changed one line to this:
[self.lineNumberLayoutManager invalidateDisplayForGlyphRange:NSMakeRange(0, self.text.length)];
And it fixed that. But never mind: both approaches are painfully slow when it comes to UITextView scrolling. It is completely not suitable for production, since working with UITextView is uncomfortable. I also would love to add "error" functionality later, so I could draw red cursor in the places where error occurs.
So the question is, what is the best and the most efficient way to achieve that type of functionality?
Why I told about the bug? I told this to underline that my requirement is to have dynamically positioned cursor, which points only to current line, and you also should note that cursor rect may be much longer that regular line width if line doesnt fit into TextView's frame's width (i.e. line 8 and 9).
I am creating a custom view to display month and date, and basically this is what it looks like:
However, I also want to add a small triangle point down just beneath the blue month label on top. So I added the following code in drawRect
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextBeginPath(context);
CGContextMoveToPoint(context, 30 - 5.0, 20);
CGContextAddLineToPoint(context, 30 + 5.0, 20);
CGContextAddLineToPoint(context, 30, 20 + 4.0);
CGContextAddLineToPoint(context, 30 - 5.0, 20);
CGContextSetRGBFillColor(context, 0, 118/255.0, 166/255.0, 1.0);
CGContextFillPath(context);
}
This is basically drawing over the white date label to add the small triangle to my custom view, and it does work. But it has an unexpected side effect of shading the date label itself. The effect is as following:
Also if you zoom in the image you can see that the round corners are also filled in by a black color. It looks like some layer properties are messed up maybe? What exactly is happening?
Thank you very much!
My goal is to create an UILabel with the top left corner red (a visible triangle with a side of 10-15 points). How can I do it?
I tried subclassing an UILabel and to override drawRect but I had no success. Not only I didn't get any red corner I also lost the label.text that is showed if I do not override drawRect.
-(void) drawRect: (CGRect) rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx,0,0);
CGContextMoveToPoint(ctx,10,0);
CGContextMoveToPoint(ctx,0,10);
CGContextClosePath(ctx);
CGContextSetRGBFillColor(ctx,50,0,0,1);
CGContextFillPath(ctx);
}
Thanks!
Nicola
P.s. I wanted to add an image of the label I want to create but I need a reputation of at least 10 point to add it :(
As always, it would have been sufficient to read the documentation of the function you're using. You made assumptions instead, which turned out to be wrong (no surprise).
The CGContextMoveToPoint() function begins a new subpath without drawing. If you want to draw a line, then... well... use the function that draws a line:
CGPoint points[] = {
CGPointMake(0, 0),
CGPointMake(10, 0),
CGPointMake(0, 10),
CGPointMake(0, 0)
};
CGContextAddLines(ctx, points, sizeof(points) / sizeof(points[0]));
I am really strugggling with Quartz2D for more then 10 days please help me understand few concepts I will be really grateful, please look at this code and screenshot url.
This code draw image with border and write text to it and the image become whole new image with border and text.
//part 1
CGSize cgs = CGSizeMake(250.0, 400.0);
UIGraphicsBeginImageContext(cgs);
CGRect rectangle = CGRectMake(0,0,cgs.width,cgs.height);
CGRect imageRect = CGRectInset(rectangle, 5.4, 5.4);
imageRect.size.height -= 100;
UIImage *myImage = [UIImage imageNamed:#"BMW.jpg"];
[myImage drawInRect:imageRect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 10.0);
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextStrokeRect(context, rectangle);
//
//part 2
1. CGRect contextRect = rectangle;
2. CGContextTranslateCTM(context, 0, contextRect.size.height);
3. CGContextScaleCTM(context, 1, -1);
4. float w, h;
5. w = contextRect.size.width;
6. h = contextRect.size.height;
7. CGContextSelectFont (context, "Helvetica-Bold", 25,
kCGEncodingMacRoman);
8. CGContextSetCharacterSpacing (context, 5);
9. CGContextSetRGBFillColor(context, 0.0, 1.0, 1.0, 1.0);
10. CGContextSetRGBStrokeColor(context, 1.0, 0.0, 0.0, 1.0);
11. CGContextShowTextAtPoint(context, 45, 50, "Quartz 2D", 9);
//
//part 3
UIImage *testImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[testImg drawAtPoint:CGPointMake(35, 10)];
//
http://i40.tinypic.com/140aptv.png
part 1 and part 3 of the code is very clear to me
problem is regarding part 2
on line 2 and 3 coordinates are transformed so the text do not display
upside down, but uiimage already take care of this internally, why it
didn't transformed to upside down? why it is still displaying in
correct position after transform is applied for text using same
context? I am asking this because when uiimage coordinates are already
modified then this coordinate transform will not make uiimage again
upside down?
on line 9 and 10 fillcolor and strokecolor methods are called and
fillcolor changes the text color, but strokecolor not doing any thing
to text why? And why without CGContextSaveGState it modified the
color of text not the border color?
regarding these both points I mentioned above the common confusion is
why its working perfectly why this code didn't need
CGContextSaveGState and CGContextRestoreGState. How it is possible
that context is modified and it didn't effect the perviously drawing
item like blue border in this case and coordinates transformation for
text.
Please correct me if I am lacking in any way to make you understand my points.
Thanks in advance,
Regards.
Quartz 2D uses the "painter's model." That means, you draw one thing, and it's done. Then you draw another thing, and it goes on top of what you drew before. Then you draw another thing and that goes on top, etc. If I pick up a stamp, dip it in paint and press it to paper, then turn it over and do it again to another part of the paper, the first stamped image doesn't flip over just because I flipped the stamp.
Every time you see "stroke" or "draw," you're modifying the final image. Later changes to the context don't effect that.
CGSize cgs = CGSizeMake(250.0, 300.0);
UIGraphicsBeginImageContext(cgs);
CGRect rectangle = CGRectMake(0,0,cgs.width,cgs.height);
UIImage *myImage = [UIImage imageNamed:#"BMW.jpg"];
[myImage drawInRect:rectangle];
[myImage release];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 5.0);
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextStrokeRect(context, rectangle);
UIImage *testImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[testImg drawAtPoint:CGPointMake(35, 10)];
i want to give gap between image and rectangle borders in which image is drawn, like 5 on left 5 on top and 5 on right but around 30 on bottom because its the space for text that user will write and user can also select that he/she want text on top so in that case top gap will be 30 and bottom gap will be 5. Here is the code it is inside subclass of uiview in drawrect method.
using this code border and image are tightly bound together, i am unable to give gap between border and image. Any idea how can i do that?
Thanks in advance.
First of all, you have a serious bug. This line is wrong:
[myImage release];
You don't own myImage, so you should not release it. You need to read “Memory-Management Rules” in Cocoa Core Competencies. Or you should turn on ARC (automatic reference counting), and then the compiler will take care of releasing things for you. Since ARC is supported since iOS 4.0, you should almost certainly be using it if you're developing a new app.
Regarding your image drawing, you just need to modify the rectangle in which you're drawing the image. For example, you can leave a 5 pixel border on top, left, and right, and a 30 point border on the bottom like this:
CGRect imageRect = CGRectInset(rectangle, 5, 5); // move 5 points in on all sides
imageRect.size.height -= 25; // make it another 25 points shorter
[myImage drawInRect:imageRect];
If you want the 30 point border on top, you also need to modify imageRect.origin.y.