Question

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; 
}

Answer 1

Found it, my algorithm was slightly incorrect with the starting of the lines