I am creating a drawing application like this, but I have one issue. The problem is that when I draw a line with one color and then draw a line with another color, it gives me combination of both colors where the lines intersect.
- (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);
CGContextStrokePath(context);
[super drawRect:rect];
[curImage release];
}
The rest of the project is available on GitHub.
Maybe have a look at blend modes.
https://developer.apple.com/library/mac/#documentation/graphicsimaging/Reference/CGContext/Reference/reference.html#//apple_ref/c/tdef/CGBlendMode
Related
I want to draw lines in a UIView with based the UIView's height. (i.e) line height should be equal to the UIView's height. For that i'm using the following code.
- (void)testDraw :(void(^)(UIImage *image, UIImage *selectedImage))done
{
CGSize imageSize = CGSizeMake(1000, self.bounds.size.height);
//Begin the animation by checking the screen is retina / ordinary
if ([[UIScreen mainScreen] respondsToSelector:#selector(scale)])
UIGraphicsBeginImageContextWithOptions(imageSize, NO, 0.0f);
else
UIGraphicsBeginImageContext(imageSize);
CGContextRef context = UIGraphicsGetCurrentContext();
for (NSInteger intSample=0; intSample < 1000; intSample++) {
if(intSample % self.samplesPerSecond == 0){
//draw separator line
[self drawLine:context fromPoint:CGPointMake(intSample, 0) toPoint:CGPointMake(intSample, self.frame.size.height) color:self.lineColor lineWidth:2.0];
}
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
CGRect drawRect = CGRectMake(0, 0, image.size.width, self.frame.size.height);
[self.progressColor set];
UIRectFillUsingBlendMode(drawRect, kCGBlendModeSourceAtop);
UIImage *tintedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
done(image, tintedImage);
}
//Draw the line based on the value received
- (void) drawLine:(CGContextRef) context fromPoint:(CGPoint) fromPoint toPoint:(CGPoint) toPoint color:(UIColor*) color lineWidth:(float) lineWidth{
CGContextBeginPath(context);
//add the lines with sizes that u want
CGContextSetAlpha(context,1.0);
CGContextSetLineWidth(context, lineWidth);
CGContextSetStrokeColorWithColor(context, [color CGColor]);
CGContextMoveToPoint(context, fromPoint.x, fromPoint.y);
CGContextAddLineToPoint(context, toPoint.x, toPoint.y);
CGContextStrokePath(context);
}
When i execute the above code with it working fine in 3.5 inch display, It's working fine. But when i run the same code in 4-inch the line height is not increasing based on the UIView. The lines are not working as like auto layouts.
Thanks in advance, Can anyone give your suggestion to fix this issue.
This seems like a dumb question or maybe I'm just tired but I'm not getting the results I want. I'm not sure I'm getting any results since I can't see my lines. Can someone please tell me what I am doing wrong?
- (void)drawCenterPlus
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 20);
[[UIColor redColor] setStroke];
CGPoint hStart;
CGPoint hEnd;
CGPoint vStart;
CGPoint vEnd;
hStart.x = self.center.x - 20.0;
hStart.y = self.center.y;
hEnd.x = self.center.x + 20.0;
hEnd.y = self.center.y;
vStart.x = self.center.x;
vStart.y = self.center.y - 20.0;
vEnd.x = self.center.x;
vEnd.y = self.center.y + 20.0;
//line 1
CGContextBeginPath(context);
CGContextMoveToPoint(context, hStart.x, hStart.y);
CGContextAddLineToPoint(context, hEnd.x, hEnd.y);
CGContextStrokePath(context);
//line 2
CGContextBeginPath(context);
CGContextMoveToPoint(context, vStart.x, vStart.y);
CGContextAddLineToPoint(context, vEnd.x, vEnd.y);
CGContextStrokePath(context);
}
Thank you in advance.
------------------------------------------------------- Additional Info ------------------------------------------
Actually this is called from viewDidLoad. I am just trying to draw a "+" in the center of the view. I've made the view a different color, so that the "+" can be seen. The "+" can be drawn in black, I just want to be able to see it. Yes, I could put a text "+" on the screen but ultimately I need to draw it inside of a rectangle.
I'm going to try again with a blank view to see if the drawing is hiding behind a subview. We'll see. Thank you again for your help.
------------------------------------------------------- Latest Method -----------------------------------------------
OK. Just a new project with one view that only has (hopefully) the red "+" in the middle of the screen. But nothing displays. What am I doing wrong?
#implementation TESTViewController
- (void)viewDidLoad
{
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 20);
[[UIColor redColor] setStroke];
CGPoint hStart;
CGPoint hEnd;
CGPoint vStart;
CGPoint vEnd;
hStart.x = self.view.center.x - 20.0;
hStart.y = self.view.center.y;
hEnd.x = self.view.center.x + 20.0;
hEnd.y = self.view.center.y;
vStart.x = self.view.center.x;
vStart.y = self.view.center.y - 20.0;
vEnd.x = self.view.center.x;
vEnd.y = self.view.center.y + 20.0;
//line 1
CGContextBeginPath(context);
CGContextMoveToPoint(context, hStart.x, hStart.y);
CGContextAddLineToPoint(context, hEnd.x, hEnd.y);
CGContextStrokePath(context);
//line 2
CGContextBeginPath(context);
CGContextMoveToPoint(context, vStart.x, vStart.y);
CGContextAddLineToPoint(context, vEnd.x, vEnd.y);
CGContextStrokePath(context);
}
Check the value of context - I'm guessing it may be nil.
If you put this code inside a UIView subclass's drawRect method it should work as you will have a valid context.
Alternatively, you could create your own UIImage context, draw the shape in that and add the image as a subview. E.g.
- (void)drawCenterPlus {
UIGraphicsBeginImageContext(self.view.frame.size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 20);
[[UIColor redColor] setStroke];
CGPoint hStart;
CGPoint hEnd;
CGPoint vStart;
CGPoint vEnd;
hStart.x = self.view.center.x - 20.0;
hStart.y = self.view.center.y;
hEnd.x = self.view.center.x + 20.0;
hEnd.y = self.view.center.y;
vStart.x = self.view.center.x;
vStart.y = self.view.center.y - 20.0;
vEnd.x = self.view.center.x;
vEnd.y = self.view.center.y + 20.0;
//line 1
CGContextBeginPath(context);
CGContextMoveToPoint(context, hStart.x, hStart.y);
CGContextAddLineToPoint(context, hEnd.x, hEnd.y);
CGContextStrokePath(context);
//line 2
CGContextBeginPath(context);
CGContextMoveToPoint(context, vStart.x, vStart.y);
CGContextAddLineToPoint(context, vEnd.x, vEnd.y);
CGContextStrokePath(context);
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
[self.view addSubview:imageView];
}
CGContextRef context = UIGraphicsGetCurrentContext(); will be nil at this point... you basically want to add this code to your drawing code, unless you want to add static views or images to represent the cross.
The current Context wont be your view object unless it is has focus, which happens automatically by the time the drawRect: method is called.
you can alternately draw to an image and add it to an image view, you can do that in did load, and the drawing will happen automatically from that point on.
How can I draw a rectangle with a border in one line?
There are separate methods like:
CGContextStrokeRect(context, someRectangle);
and
CGContextFillRect(context, someRectangle);
but is there something that does both in one?
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGPathRef path = CGPathCreateWithRect(rect, NULL);
[[UIColor redColor] setFill];
[[UIColor greenColor] setStroke];
CGContextAddPath(context, path);
CGContextDrawPath(context, kCGPathFillStroke);
CGPathRelease(path);
}
Although, I can't say it's any less verbose than stroke & fill in separate calls...
If you're just looking to save line space, you could define your own method to make two calls and place it in a utility class.
void strokeAndFill(CGContextRef c, CGRect rect)
{
CGContextFillRect(c, rect);
CGContextStrokeRect(c, rect);
}
CGContextDrawPath does it one go if you set fill and stroke color beforehand.
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColor(context, a);
CGContextSetFillColor(context, b);
CGContextDrawPath(context, rect)
I have UITableView with static cells in 4 sections done in Storyboard. However, I want to change the separator color for one section ([UIColor clearColor]). How can I do that??? Is it actually possible?
I can set the separatorColor to clearColor for the entire table, but not only for one specific section.
Screenshot of table view section:
AFAIK there is no method for this. But you can put a background image to the cell which has a separator at the bottom and set separatorstyle to UITableViewCellSeparatorStyleNone. So you have your own separator in every cell.
Maybe you can achieve your goal by setting the header text for the section to an empty string.
One approach would to create your own UIView subclass and do your own custom drawing in drawRect:. You would take this view and add it as the backgroundView of your table view cell. Something like this:
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
// Drawing code
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 1.0);
// Draw black line
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 0.0, 0.3};
CGColorRef blackColor = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, blackColor);
CGContextMoveToPoint(context, 0, rect.size.height - 1.5);
CGContextAddLineToPoint(context, rect.size.width, rect.size.height - 1.5);
CGContextStrokePath(context);
CGColorRelease(blackColor);
// Draw white bottom line
CGFloat whiteComponents[] = {1.0, 1.0, 1.0, 0.75f};
CGColorRef whiteColor = CGColorCreate(colorspace, whiteComponents);
CGContextSetStrokeColorWithColor(context, whiteColor);
CGContextMoveToPoint(context, 0, rect.size.height - 0.5);
CGContextAddLineToPoint(context, rect.size.width, rect.size.height - 0.5);
CGContextStrokePath(context);
CGColorRelease(whiteColor);
// Draw top white line
CGFloat whiteTransparentComponents[] = {1.0, 1.0, 1.0, 0.45};
CGColorRef whiteTransparentColor = CGColorCreate(colorspace, whiteTransparentComponents);
CGContextSetStrokeColorWithColor(context, whiteTransparentColor);
CGContextMoveToPoint(context, 0, 0.5);
CGContextAddLineToPoint(context, rect.size.width, 0.5);
CGContextStrokePath(context);
CGColorRelease(whiteTransparentColor);
CGColorSpaceRelease(colorspace);
}
I can draw a line by placing the following into a UIView and connecting it to a storyboard View.
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 5.0);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 1.0, 1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 10, 50);
CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
}
However, what I want to do is to draw a line whenever a button is pressed. To do this I assume I need to write some code into an IBAction. My problem is that I cannot simply place the above code into the IBAction as it gives me an error.
- (IBAction)draw:(id)sender{
//Place code here
}
My question is, how can I draw a line each time the button is pressed?
How do I connect similar code to draw a different line that will be triggered when I press a button
To draw on a UIView you have to subclass your UIView
In .h
#MyCustomView : UIView {
}
#end
in .m
#implementation MyCustomView
- (void) drawRect: (CGRect) rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 5.0);
CGColorSpaceRef colorspace = CGColorSpaceCreateDeviceRGB();
CGFloat components[] = {0.0, 0.0, 1.0, 1.0};
CGColorRef color = CGColorCreate(colorspace, components);
CGContextSetStrokeColorWithColor(context, color);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, 10, 50);
CGContextStrokePath(context);
CGColorSpaceRelease(colorspace);
CGColorRelease(color);
}
In your ViewController
-(void)methodCallCustomView{
}
- (IBAction)draw:(id)sender{
[self methodCallCustomView];
}
So you want the drawRect: method to be called when you press a button? If so, send the message setNeedsDisplay to the view that has the drawRect: code.