CODEWITHSUNDEEP
iosobjective-ccgcontextuigraphicscontext
user2498570
user2498570

Reputation: 13

iOS CGContext Edge isn't antialiased

I'm trying to draw a rectangle that has a 15 degree angle splitting two colors down the center but the line between them is pixelated. I've tried different blend options and can't seem to figure out how to make this look clean.

This is what the header looks like now

Does anyone know how I can make the line between them look clean?

if (!_backgroundImageView.image) {
  CGFloat width = CGRectGetWidth(self.bounds);
  CGFloat height = CGRectGetHeight(self.bounds);
  CGFloat tWidth = 0.26794919243f/*tan(15 degrees)*/ * height;

  UIGraphicsBeginImageContext(CGSizeMake(width, height));
  CGContextRef context = UIGraphicsGetCurrentContext();

  if (_color1) {
    CGContextSetFillColorWithColor(context, _color1.CGColor);
    CGContextMoveToPoint(context, 0, 0);
    CGContextAddLineToPoint(context, 1.0f + RoundPixelValue((width + tWidth) / 2.0f), 0);
    CGContextAddLineToPoint(context, 1.0f + RoundPixelValue((width - tWidth) / 2.0f), height);
    CGContextAddLineToPoint(context, 0, height);
    CGContextFillPath(context);
  }

  if (_color2) {
    CGContextSetFillColorWithColor(context, _color2.CGColor);
    CGContextMoveToPoint(context, width, 0);
    CGContextAddLineToPoint(context, RoundPixelValue((width + tWidth) / 2.0f) - 1.0f, 0);
    CGContextAddLineToPoint(context, RoundPixelValue((width - tWidth) / 2.0f) - 1.0f, height);
    CGContextAddLineToPoint(context, width, height);
    CGContextFillPath(context);
  }

  _backgroundImageView.image = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
}

Upvotes: 1

Views: 399

Answers (1)

Artal
Artal

Reputation: 9143

The main issue here is that you're not creating the context with the correct scale.

Instead of using UIGraphicsBeginImageContext use UIGraphicsBeginImageContextWithOptions like so:

UIGraphicsBeginImageContextWithOptions(CGSizeMake(width, height), YES, 0);

Specifying a scale of 0 sets it to the scale factor of the device screen.

This should eliminated most of the aliasing artifacts.

Upvotes: 1

Related Questions