ios - 用很多点随机颜色的渐变画图

Question

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

Answer 1

您可能需要查看 Core Graphics ...我在下面发布了两个 Core Graphics 渐变渲染示例。

---

具有多种颜色的一维线性渐变

此方法将创建一个具有简单一维线性渐变(从上到下)和给定颜色数组且所有颜色均匀分布的图像。您可以通过在 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 渐变的非常准确的方法，但绝对是通过 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];

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

示例输出: