使用具有许多点随机颜色的渐变来绘制图片

Question

任务是创建一个由代表不同颜色的许多点的渐变组成的图像。例如，在点之间绘制渐变不是问题，但是在这两个点的线附近可以是具有改变这两点之间的梯度的效果的另一点。感谢任何帮助。

Answer 1

您可能希望查看Core Graphics ...我已经在Core Graphics梯度渲染下面发布了两个示例。

1D具有多种颜色的线性渐变

此方法将创建一个具有简单一维线性渐变（从上到下）的图像，该图像具有给定的颜色数组，均匀间隔。您可以在gradLocs[]中设置自己的值来自定义自己的间距。

-(UIImage*) gradientImageWithSize:(CGSize)size withColors:(NSArray*)colors {

    // Start context
    UIGraphicsBeginImageContext(size);
    CGContextRef c = UIGraphicsGetCurrentContext();


    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
    NSUInteger colorCount = [colors count];
    CGFloat gradLocs[colorCount];

    for (int i = 0; i < colorCount; i++) gradLocs[i] = i/colorCount; // Even spacing of colors.

    // Create a simple linear gradient with the colors provided.
    CGGradientRef grad = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, gradLocs);
    CGColorSpaceRelease(colorSpace);

    // Draw gradient with multiply blend mode over the source image
    CGContextDrawLinearGradient(c, grad, CGPointZero, (CGPoint){0, size.height}, 0);
    CGGradientRelease(grad);

    // Grab resulting image from context
    UIImage* resultImg = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return resultImg;
}

用法：

NSArray* colors = @[(id)[UIColor redColor].CGColor, (id)[UIColor greenColor].CGColor, (id)[UIColor purpleColor].CGColor, (id)[UIColor blueColor].CGColor];
[self gradientImageWithSize:(CGSize){500, 500} withColors:colors];

具有多种颜色的2D渐变

这种方法虽然不是生成2D渐变的非常精确的方法，但绝对是通过Core Graphics最简单的方法。 radius参数定义距离颜色影响点的距离。为此，我创建了一个自定义对象来存储给定点的渐变信息：

/// Defines a simple point for use in a gradient
@interface gradPoint : NSObject

/// The color at the given point
@property (nonatomic) UIColor* color;

/// The position of the point
@property (nonatomic) CGPoint point;

/// The radius of the point (how far the color will have influence)
@property (nonatomic) CGFloat radius;

@end

@implementation gradPoint

+(instancetype) pointWithColor:(UIColor*)color point:(CGPoint)point radius:(CGFloat)radius {
    gradPoint* p = [[self alloc] init];
    p.color = color;
    p.point = point;
    p.radius = radius;
    return p;
}

@end

然后，渐变生成方法获取这些gradPoint个对象的大小和数组。

-(UIImage*) gradient2DImageWithSize:(CGSize)size gradPointArray:(NSArray*)gradPoints {

    UIGraphicsBeginImageContextWithOptions(size, YES, 0);

    CGContextRef c = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(c, [UIColor whiteColor].CGColor);
    CGContextFillRect(c, (CGRect){CGPointZero, size});

    CGContextSetBlendMode(c, kCGBlendModeMultiply);

    CGFloat gradLocs[] = {0, 1};
    CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();

    for (gradPoint* point in gradPoints) {
        NSArray* colors = @[(id)point.color.CGColor, (id)[UIColor whiteColor].CGColor];
        CGGradientRef grad = CGGradientCreateWithColors(colorSpace, (__bridge CFArrayRef)colors, gradLocs);
        CGContextDrawRadialGradient(c, grad, point.point, 0, point.point, point.radius, 0);
        CGGradientRelease(grad);
    }

    CGColorSpaceRelease(colorSpace);

    UIImage* i = UIGraphicsGetImageFromCurrentImageContext();

    UIGraphicsEndImageContext();

    return i;
}

用法：

CGFloat gradRadius = frame.size.height;

NSArray* gradPoints = @[
                   [gradPoint pointWithColor:[UIColor redColor] point:CGPointZero radius:gradRadius],
                   [gradPoint pointWithColor:[UIColor cyanColor] point:(CGPoint){0, frame.size.height} radius:gradRadius],
                   [gradPoint pointWithColor:[UIColor yellowColor] point:(CGPoint){frame.size.height, 0} radius:gradRadius],
                   [gradPoint pointWithColor:[UIColor greenColor] point:(CGPoint){frame.size.height, frame.size.height} radius:gradRadius]
                   ];


UIImage* gradImage = [self gradient2DImageWithSize:(CGSize){gradRadius, gradRadius} gradPointArray:gradPoints];

此方法最适合使用正方形图像，并将半径设置为高度/宽度。

示例输出：