Custom UIView's border drawing isn't smooth - ios

I'm trying to draw a simple speech bubble using the following code:
#implementation SpeechBubbleView
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGPoint triangleHeadPoint = CGPointMake(0, rect.size.height/2.0);
float triangleHeight = 5;
float triangleWidth = 10;
float maxX = rect.size.width;
float minX = 0.0;
float maxY = rect.size.height;
float minY = 0.0;
float archTangentLine = 6.0;
float archRadius = archTangentLine;
float strokeWidth = 1.0;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, strokeWidth);
CGContextBeginPath(context);
float currentX = triangleHeadPoint.x;
float currentY = triangleHeadPoint.y;
CGContextMoveToPoint(context, currentX, currentY);
currentX += triangleWidth;
currentY += (triangleHeight / 2.0);
CGContextAddLineToPoint(context, currentX, currentY);
currentY = maxY - archTangentLine;
CGContextAddLineToPoint(context, currentX, currentY);
currentY += archTangentLine;
CGContextAddArcToPoint(context, currentX, currentY, currentX + archTangentLine, currentY, archRadius);
currentX = maxX - archTangentLine;
CGContextAddLineToPoint(context, currentX, currentY);
currentX += archTangentLine;
CGContextAddArcToPoint(context, currentX, currentY, currentX, currentY - archTangentLine, archRadius);
currentY = minY + archTangentLine;
CGContextAddLineToPoint(context, currentX, currentY);
currentY -= archTangentLine;
CGContextAddArcToPoint(context, currentX, currentY, currentX - archTangentLine, currentY, archRadius);
currentX = minX + triangleWidth + archTangentLine;
CGContextAddLineToPoint(context, currentX, currentY);
currentX -= archTangentLine;
CGContextAddArcToPoint(context, currentX, currentY, currentX, currentY + archTangentLine, archRadius);
currentY = triangleHeadPoint.y - (triangleHeight / 2.0);
CGContextAddLineToPoint(context, currentX, currentY);
CGContextClosePath(context);
[[UIColor whiteColor] setFill];
[[UIColor blackColor] setStroke];
CGContextDrawPath(context, kCGPathFillStroke);
}
#end
The result of this code is the following (not so pretty) image:
The drawing isn't as smooth as I was expecting it to be, the left side border is wider than the top, right and bottom sides, and the corners are wider than the adjacent lines.
I changed the fill color to black just to check and the result is as I was expecting:
Why does the border have a variable width? Is there a way to fix this and have a smooth border around the view?
Thanks in advance.

For future reference, I have found a way to improve the look of the border which will result in the following picture:
I simply made the border width very small (I used 0.2f) using the function CGContextSetLineWidth(context, 0.2f). And then added a shadow to the layer as following:
self.layer.shadowColor = [[UIColor blackColor] CGColor];
self.layer.shadowOffset = CGSizeMake(1.5f, 1.5f);
self.layer.shadowOpacity = 0.8f;
self.layer.shadowRadius = 1.0f;
And that's it!

Related

Drawing anti-aliased line

I'm drawing a line on the screen which includes diagonal lines which in turn are drawing like this:
Notice how it doesn't look smooth at all. I've read a few articles on this and it would seem this looks the one closer to the issue I'm having, but the solution is not working for me.
Here's how I setup the layer:
- (void)viewDidLoad
{
[super viewDidLoad];
// Instantiate the navigation line view
CGRect navLineFrame = CGRectMake(0.0f, 120.0f, self.view.frame.size.width, 15.0f);
self.navigationLineView = [[HyNavigationLineView alloc] initWithFrame:navLineFrame];
// Make it's background transparent
self.navigationLineView.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.0f];
self.navigationLineView.opaque = NO;
HyNavigationLineLayer * layer = [[HyNavigationLineLayer alloc] init];
layer.shouldRasterize = YES;
layer.rasterizationScale = [UIScreen mainScreen].scale;
layer.contentsScale = [[UIScreen mainScreen] scale];
layer.needsDisplayOnBoundsChange = YES;
[[self.navigationLineView layer] addSublayer:layer];
[self.view addSubview:self.navigationLineView];
[self.navigationLineView.layer setNeedsDisplay];
}
Here's how I'm drawing in the layer:
- (void)drawInContext:(CGContextRef)ctx
{
CGFloat bottomInset = 1.0f / [[UIScreen mainScreen] scale] * 2.0f;
CGContextSetInterpolationQuality(ctx, kCGInterpolationHigh);
CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
GLfloat padding = kHyNavigationLineViewPadding * 4.0f;
GLfloat searchSpace = self.frame.size.width - padding - kHyNavigationLineViewPointerSize * 2.0f;
GLfloat x = kHyNavigationLineViewPadding * 2.0f + searchSpace * self.offset;
CGContextSetLineWidth(ctx, 2.0f);
CGContextMoveToPoint(ctx, kHyNavigationLineViewPadding, 0.0f);
CGContextAddLineToPoint(ctx, x, bottomInset);
CGContextAddLineToPoint(ctx, x + kHyNavigationLineViewPointerSize, self.frame.size.height);
CGContextAddLineToPoint(ctx, x + kHyNavigationLineViewPointerSize * 2.0f, bottomInset);
CGContextAddLineToPoint(ctx, self.frame.size.width - kHyNavigationLineViewPadding, 0.0f);
// Draw
CGContextStrokePath(ctx);
}
Any hints on how to solve this?
Edit: forgot to mention the reason I was drawing in the layer in the first place: I need to animate a property which causes this line to animate was well, so drawing in drawRect doesn't work.
Instead of using quartz to render the code, you can use UIBezierPath to render instead:
UIBezierPath* path = [UIBezierPath bezierPath];
[[UIColor whiteColor] setStroke];
GLfloat padding = kHyNavigationLineViewPadding * 4.0f;
GLfloat searchSpace = self.frame.size.width - padding - kHyNavigationLineViewPointerSize * 2.0f;
GLfloat x = kHyNavigationLineViewPadding * 2.0f + searchSpace * self.offset;
path.lineWidth = 2.0;
[path moveToPoint:CGPointMake(kHyNavigationLineViewPadding, 0)];
[path addLineToPoint:CGPointMake(x, bottomInset)];
[path addLineToPoint:CGPointMake(x + kHyNavigationLineViewPointerSize, self.frame.size.height)];
[path addLineToPoint:CGPointMake(x + kHyNavigationLineViewPointerSize * 2.0f, bottomInset)];
[path addLineToPoint:CGPointMake(self.frame.size.width - kHyNavigationLineViewPadding, 0.0f)];
[path stroke];

drawRect - Draw Star

I am drawing annotations on a view. The approach i am using to draw star is below.
-(void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGFloat xCenter = rect.size.width / 2;
CGFloat yCenter = rect.size.height / 2;
float width;
if(rect.size.width > rect.size.height) {
width = rect.size.height;
} else {
width = rect.size.width;
}
double r = width / 2.0;
float flip = -1.0;
double theta = 2.0 * M_PI * (2.0 / 5.0); // 144 degrees
CGContextMoveToPoint(context, xCenter, r*flip+yCenter);
for (NSUInteger k=1; k<5; k++)
{
float x = r * sin(k * theta);
float y = r * cos(k * theta);
CGContextAddLineToPoint(context, x+xCenter, y*flip+yCenter);
}
CGContextSetStrokeColorWithColor(context, self.color.CGColor);
CGContextClosePath(context);
CGContextStrokePath(context);
}
I want to have just borders of star removing other inner lines is there any way to achieve that? (apart from using moveToPoint and addLine methods)
use this code:
-(void)drawRect:(CGRect)rect
{
int aSize = 100.0;
float color[4] = { 0.0, 0.0, 1.0, 1.0 }; // Blue
CGColorRef aColor = CGColorCreate(CGColorSpaceCreateDeviceRGB(), color);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, aSize);
CGFloat xCenter = 100.0;
CGFloat yCenter = 100.0;
float w = 100.0;
double r = w / 2.0;
float flip = -1.0;
CGContextSetFillColorWithColor(context, aColor);
CGContextSetStrokeColorWithColor(context, aColor);
double theta = 2.0 * M_PI * (2.0 / 5.0); // 144 degrees
CGContextMoveToPoint(context, xCenter, r*flip+yCenter);
for (NSUInteger k=1; k<5; k++)
{
float x = r * sin(k * theta);
float y = r * cos(k * theta);
CGContextAddLineToPoint(context, x+xCenter, y*flip+yCenter);
}
CGContextClosePath(context);
CGContextFillPath(context);
}
This will create 1 blue star
With use of the UIBezierPath you can work with that in Swift 4.
let polygonPath = UIBezierPath()
let xCenter: CGFloat = 0
let yCenter: CGFloat = 0
let w = CGFloat(300)
let r = w / 2.0
let flip: CGFloat = -1.0 // use this to flip the figure 1.0 or -1.0
let polySide = CGFloat(5)
let theta = 2.0 * Double.pi * Double(2.0 / polySide)
polygonPath.move(to: CGPoint(x: xCenter, y: r * flip + yCenter))
for i in 1..<Int(polySide) {
let x: CGFloat = r * CGFloat( sin(Double(i) * theta) )
let y: CGFloat = r * CGFloat( cos(Double(i) * theta) )
polygonPath.addLine(to: CGPoint(x: x + xCenter, y: y * flip + yCenter))
}
polygonPath.close()
You can draw star by using this code:
UIBezierPath* starPath = UIBezierPath.bezierPath;
[starPath moveToPoint: CGPointMake(90, 31)];
[starPath addLineToPoint: CGPointMake(98.11, 42.06)];
[starPath addLineToPoint: CGPointMake(111.87, 45.86)];
[starPath addLineToPoint: CGPointMake(103.12, 56.49)];
[starPath addLineToPoint: CGPointMake(103.52, 69.89)];
[starPath addLineToPoint: CGPointMake(90, 65.4)];
[starPath addLineToPoint: CGPointMake(76.48, 69.89)];
[starPath addLineToPoint: CGPointMake(76.88, 56.49)];
[starPath addLineToPoint: CGPointMake(68.13, 45.86)];
[starPath addLineToPoint: CGPointMake(81.89, 42.06)];
[starPath closePath];
[UIColor.grayColor setFill];
[starPath fill];

iOS Drawing Circles

I am trying to create the circles below in my iOS app. I know how to make the circles but am not entirely sure on how to get the points along the arc. It has to be in code not an image. Below is also the code I currently have.
- (void)drawRect:(CGRect)rect
{
CGPoint point;
point.x = self.bounds.origin.x + self.bounds.size.width/2;
point.y = self.bounds.origin.y + self.bounds.size.height/2;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGRect circle = CGRectMake(point.x/2,point.y-point.x/2,point.x,point.x);
CGContextAddEllipseInRect(context, circle);
CGContextStrokePath(context);
for (int i = 0; i<8; i++) {
CGRect circleMini = CGRectMake(??????,??????,point.x/4,point.x/4);
CGContextAddEllipseInRect(context, circleMini);
CGContextStrokePath(context);
}
}
UPDATED TO ANSWER
float cita = 0;
for (int i = 0; i<8; i++) {
CGPoint pointCir = CGPointMake(point.x/2 + radius * cos(cita) , (point.y-point.x/2) + radius * sin(cita) );
CGRect circleMini = CGRectMake(pointCir.x,pointCir.y,radius/4,radius/4);
CGContextAddEllipseInRect(context, circleMini);
CGContextStrokePath(context);
cita += M_PI / 4.0;
}
If (x,y) is the center and r is the radius of your big circle, the center of the i-th external circle will be:
center(i) = ( x + r * cos(cita) , y + r * sin(cita) )
Start cita in 0 and increment it PI/4 radians for the next circle (or 45 degrees)
Working implementation
CGFloat cita = 0;
CGFloat bigCircleRadius = point.x / 2.0;
CGFloat smallCircleRadius = bigCircleRadius / 4.0;
for (int i = 0; i < 8; i++) {
CGPoint smallCircleCenter = CGPointMake(point.x + bigCircleRadius * cos(cita) - smallCircleRadius/2.0 , point.y + bigCircleRadius * sin(cita) - smallCircleRadius / 2.0 );
CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius,smallCircleRadius);
CGContextAddEllipseInRect(context, smallCircleRect);
CGContextStrokePath(context);
cita += M_PI / 4.0;
}
Edit: Added implementation and renamed variables.
- (void)drawRect:(CGRect)rect
{
const NSUInteger kNumCircles = 8u;
CGFloat height = CGRectGetHeight(rect);
CGFloat smallCircleRadius = height / 10.0f;
CGRect bigCircleRect = CGRectInset(rect, smallCircleRadius / 2.0f, smallCircleRadius / 2.0f);
CGFloat bigCircleRadius = CGRectGetHeight(bigCircleRect) / 2.0f;
CGPoint rectCenter = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 2.0f);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextAddEllipseInRect(context, bigCircleRect);
CGContextStrokePath(context);
CGFloat alpha = 0;
for (NSUInteger i = 0; i < kNumCircles; i++)
{
CGPoint smallCircleCenter = CGPointMake(rectCenter.x + bigCircleRadius * cos(alpha) - smallCircleRadius/2.0f , rectCenter.y + bigCircleRadius * sin(alpha) - smallCircleRadius / 2.0f );
CGRect smallCircleRect = CGRectMake(smallCircleCenter.x,smallCircleCenter.y,smallCircleRadius,smallCircleRadius);
CGContextAddEllipseInRect(context, smallCircleRect);
CGContextStrokePath(context);
alpha += M_PI / (kNumCircles / 2.0f);
}
}

Draw line between two moveable circles in objective-c (iPad)

I'm new to objective-c and am trying to draw a line between moveable circles in Objective-c. I already have code that generates circles. Here is an image that I'd like to create in my app.
http://images.sciencedaily.com/2004/04/040407083832.jpg
Here's my code.
CircleViewController.m
- (void)viewDidLoad
{
[super viewDidLoad];
for (int i=0; i<5; i++) {
CGRect circleFrame = CGRectMake(arc4random() % 500, arc4random() % 500, (arc4random() % 200)+50 , (arc4random() % 200)+50);
CircleView *cirleView = [[CircleView alloc] initWithFrame: circleFrame];
cirleView.backgroundColor = [UIColor clearColor];
CGFloat hue = ( arc4random() % 256 / 256.0 ); // 0.0 to 1.0
CGFloat saturation = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from white
CGFloat brightness = ( arc4random() % 128 / 256.0 ) + 0.5; // 0.5 to 1.0, away from black
UIColor *color = [UIColor colorWithHue:hue saturation:saturation brightness:brightness alpha:1];
cirleView.circleColor = color;
[self.view addSubview:cirleView];
}
}
CircleView.m
-(void) drawCircle:(CGPoint)p withRadius:(CGFloat)radius inContext:(CGContextRef)contex
{
UIGraphicsPushContext(contex);
CGContextBeginPath(contex);
CGContextAddArc(contex, p.x, p.y, radius, 0, 2*M_PI, YES);
CGContextSetLineWidth(contex, 2.0);
CGContextAddLineToPoint(contex, p.x, p.y);
CGContextDrawPath(contex, kCGPathFillStroke);
UIGraphicsPopContext();
}
- (void)drawRect:(CGRect)rect
{
CGFloat size = self.bounds.size.width/2;
if(self.bounds.size.height < self.bounds.size.width) size = self.bounds.size.height / 2;
size *= 0.90;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 5.0);
[_circleColor setStroke];
[_circleColor setFill];
CGPoint point1;
point1.x = self.bounds.origin.x + self.bounds.size.width/2;
point1.y = self.bounds.origin.y + self.bounds.size.height/2;
[self drawCircle:point1 withRadius:size inContext:context];
UITapGestureRecognizer *singleFingerTap =
[[UITapGestureRecognizer alloc] initWithTarget:self
action:#selector(handleSingleTap:)];
[self addGestureRecognizer:singleFingerTap];
}
Thank you for your help.
Drawing a line:
-(void) drawLine (CGRect circleViewRect1, CGRect circleViewRect2)
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetStrokeColorWithColor(context, [UIColor blackColor].CGColor);
//line width
CGContextSetLineWidth(context, 1.0);
CGContextMoveToPoint(context, circleViewRect1.center.x + circleViewRect1.bounds.width/2,circleViewRect1.center.y + circleViewRect1.bounds.height/2); //start from first circle radius
CGContextAddLineToPoint(context, circleViewRect2.center.x + circleViewRect2.bounds.width/2,circleViewRect2.center.y + circleViewRect2.bounds.height/2); //draw to this point
// and now draw the Path!
CGContextStrokePath(context);
}
Note:This is only useful if two circle's centers fall in horizontal line. Also, assume that circleViewRect1 is at the left of circleViewRect2. You must figure out the values for other use cases ie if they are at positioned at different angles etc.

Striped Lines appear out of nowhere

I am trying to code a routine that would allow me to create a UIImage that is a rectangle filled with stripes on a gradient background.
My code is below and works fine for most of the cases I tried it out. Interestingly, and this is the hook, it doesn't work when I pass it 21 as height and 5 as stripedWidth.
Once I do this, the stripes appear as they should... horizontally.. but vertically they start at like (y=) -40 and end at about (y=) 4 or so. To see this better, each this image showing the effect in question:
Has anyone any idea why this is happening, or even better, what I can do against it?
-(UIImage*) stripedTextureWithStartingColor:(UIColor*) startColor withEndingColor:(UIColor*) endColor withHeight:(NSUInteger) height withStripeWidth:(NSUInteger) stripeWidth withStripeColor:(UIColor*) stripedColor {
CGSize size = CGSizeMake(2 * stripeWidth, height);
UIGraphicsBeginImageContext(size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
#try {
CGContextSetAllowsAntialiasing(context, true);
CGContextSetShouldAntialias(context, true);
NSArray* colors = [NSArray arrayWithObjects:(id) startColor.CGColor, (id) endColor.CGColor, nil];
CGFloat locations[2];
locations[0] = 0.0;
locations[1] = 1.0;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef) colors, locations);
CGColorSpaceRelease(colorSpace);
CGContextDrawLinearGradient(context, gradient, CGPointZero, CGPointMake(0, size.height - 1), 0);
CGGradientRelease(gradient);
CGContextFillPath(context);
int lineWidth = (int) stripeWidth;
CGContextSetLineWidth(context, lineWidth / 2);
int lineCount = (float) size.height / (float) lineWidth;
lineCount -= 2;
for (int i=0; i<lineCount; i++) {
CGContextSetStrokeColorWithColor(context, stripedColor.CGColor);
float x1 = -size.height + i * 2 * lineWidth - lineWidth;
float y1 = size.height - 1 + lineWidth;
float x2 = -size.height + i * 2 * lineWidth + size.height - lineWidth;
float y2 = -lineWidth;
CGContextMoveToPoint(context, x1, y1);
CGContextAddLineToPoint(context, x2, y2);
CGContextStrokePath(context);
}
UIColor* lineTopColor = [[UIColor whiteColor] colorWithAlphaComponent:0.9];
UIColor* lineBottomColor = [[UIColor darkGrayColor] colorWithAlphaComponent:0.5];
CGContextSetStrokeColorWithColor(context, lineTopColor.CGColor);
CGContextMoveToPoint(context, 0, 0);
CGContextAddLineToPoint(context, size.width + 1, 0);
CGContextStrokePath(context);
CGContextSetStrokeColorWithColor(context, lineBottomColor.CGColor);
CGContextMoveToPoint(context, 0, size.height - 1);
CGContextAddLineToPoint(context, size.width + 1, size.height - 1);
CGContextStrokePath(context);
}
#finally {
CGContextRestoreGState(context);
}
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
Found it, my algorithm was slightly incorrect with the starting of the lines

Resources