CODEWITHSUNDEEP
ioscore-graphics
Quxflux
Quxflux

Reputation: 3303

Create gradient image programmatically in iOS

I'm trying to process some imagedata which comes directly from the device camera. In order to understand the CGImage structure, I'm using a buffer to create an image which doesn't work right for me (I know that I shouldn't use C code within Obj-C Code, it's just for understanding). The code is as follows:

int *outBuf = malloc(sizeof(int) * width * height);
for (int i = 0; i < width * height;i ++)
{
     outBuf[i] = (((float)i) / ((float) width * height)) * 255.f;
}
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();

CGContextRef ctx = CGBitmapContextCreate(outBuf, width, height, 8, width * 4, colorSpace, kCGImageAlphaNone);

CGImageRef img = CGBitmapContextCreateImage(ctx);
CFRelease(ref);
CGContextRelease(ctx);
free(outBuf);

CGColorSpaceRelease(colorSpace);

[view.imgView setImage: [UIImage imageWithCGImage:img]];

CGImageRelease(img);

This should create a gradient from the very first to the very last pixel, but it results in a weird graphic:

generated image

Where do the horizontal spacings come from? (I want to solve this issue, I'm aware that there are other possibilities to draw the gradient) Thanks in advance.

Upvotes: 4

Views: 3912

Answers (2)

Quxflux
Quxflux

Reputation: 3303

I've found the solution:

I was initialising the buffer with int*. Every int is 4 bytes long, but a grayscale picture just needs 1 byte per pixel. Changing the buffer to char* and modifying the CGBitmapContextCreate parameters fixed the issue:

CGBitmapContextCreate(outBuf, width, height, 8, width, colorSpace, kCGImageAlphaNone);

enter image description here

Upvotes: 3

Vlad
Vlad

Reputation: 3366

There are several approaches to implementing what you wish. Here's two examples: Please note that this is just to show you an example, you should addapt parameters/colors/etc to get exactly what you're after. Hope this helps.

1) Drawing gradient directly in draw rect. If you wish additional drawing, also call [super drawRect:rect] in your view implementation.

- (void)drawRect:(CGRect)rect {
    CGPoint center = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
    if (CGSizeEqualToSize(self.centerOffset, CGSizeZero) == NO) {
        center.x += self.centerOffset.width;
        center.y += self.centerOffset.height;
    }

    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    size_t num_locations = 2;
    CGFloat locations[2] = { 0.0, 1.0 };
    CGFloat components[8] = { 0.0, 0.0, 0.0, 0.5,   // Start color
                              0.0, 0.0, 0.0, 0.7 }; // End color

    CGColorSpaceRef rgbColorspace = CGColorSpaceCreateDeviceRGB();
    CGGradientRef gradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);
    CGGradientDrawingOptions options = kCGGradientDrawsBeforeStartLocation | kCGGradientDrawsAfterEndLocation;
    CGFloat endRadius = [UIApplication sharedApplication].keyWindow.bounds.size.height / 2;
    CGContextDrawRadialGradient(currentContext, gradient, center, 50.0f, center, endRadius, options);

    CGGradientRelease(gradient);
    CGColorSpaceRelease(rgbColorspace); 
}

2) Use CAGradient Layer

    UIColor *startEndColour = [UIColor redColor];
    UIColor *middleColor = [UIColor blueColor];

    NSArray *horizontalGradientColorsArray = [NSArray arrayWithObjects:(id)[startEndColour CGColor], (id)[middleColor CGColor],(id)[middleColor CGColor], (id)[startEndColour CGColor],nil];

    UIView *horizontalGradient1View = [[UIView alloc] initWithFrame:CGRectMake(0.f, 0.f, self.bounds.size.width, 1.f)];
    horizontalGradient1View.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleBottomMargin;
    CAGradientLayer *horizontalGradient1 = [CAGradientLayer layer];
    horizontalGradient1.frame = horizontalGradient1View.bounds;
    horizontalGradient1.colors = horizontalGradientColorsArray;
    horizontalGradient1.startPoint = CGPointMake(0, 0.5);
    horizontalGradient1.endPoint = CGPointMake(1.0, 0.5);
    [horizontalGradient1View.layer insertSublayer:horizontalGradient1 atIndex:0];
    [self addSubview:horizontalGradient1View];
    [horizontalGradient1View release];

Upvotes: 2

Related Questions