Calculer la couleur à un point donné sur un gradient entre deux couleurs?

donc c'est essentiellement la méthode que je voudrais écrire (dans Objective-C/Cocoa, en utilisant UIColors, mais je suis vraiment juste intéressé par le sous-jacentes de math):

+ (UIColor *)colorBetweenColor:(UIColor *)startColor andColor:(UIColor *)endColor atLocation:(CGFloat)location;

comme exemple, disons que j'ai deux couleurs, rouge pur et bleu pur. Avec un gradient linéaire entre les deux, je veux calculer la couleur qui est à, disons, la marque de 33% sur ce gradient: Example

Donc, si je devais appeler ma méthode comme ceci:

UIColor *resultingColor = [UIColor colorBetweenColor:[UIColor redColor] andColor:[UIColor blueColor] atLocation:0.33f];

j'obtiendrais le résultat couleur à 'B', et de même, en passant 0.0f comme l'emplacement retournerait la couleur 'A', et 1.0f renvoie la couleur 'C'.

donc en gros, ma question Est, Comment pourrais-je mélanger les valeurs RVB de deux couleurs et déterminer la couleur à un certain "endroit" entre elles?

32
demandé sur blabus 2014-03-06 11:43:08

3 réponses

vous interpolez simplement linéairement les canaux rouge, vert et bleu comme ceci:

double resultRed = color1.red + percent * (color2.red - color1.red);
double resultGreen = color1.green + percent * (color2.green - color1.green);
double resultBlue = color1.blue + percent * (color2.blue - color1.blue);

percent est une valeur entre 0 et 1 (location dans votre premier prototype de méthode).

45
répondu user1118321 2014-03-26 00:36:54

RVB l'espace de couleur est comme un cercle. Avec la saturation la plus élevée le long de la frontière extérieure, et le gris au milieu. En voyageant d'une couleur à l'autre, vous préféreriez faire cela, le long du même rayon (cercle) à partir du milieu; de façon à ce que la saturation et la valeur restent les mêmes. Dans ce cas, la teinte change de façon linéaire. Vous ne passerez pas dans plus de zone grise que vos couleurs gauche et droite ne le sont initialement. Vous pouvez voyager d'un anneau intérieur à un anneau extérieur, aller simple (ou vers le bas) la saturation; de nouveau linéairement. Voir ici pour le cercle de couleur (essayez par exemple paint.net)

les classes d'objectifs D'Apple (iOS) vous permettent de travailler avec d'autres spectres que RGB.

1
répondu LenArt 2016-11-28 22:12:22

une version Swift peut être utile à quelqu'un.

private struct Color {
    let r: Int
    let g: Int
    let b: Int
    func getColor() -> UIColor {
        return UIColor(red: CGFloat(r)/255.0, green: CGFloat(g)/255.0, blue: CGFloat(b)/255.0, alpha: 1)
    }

    static func getGradientColor(from: Color, to: Color, percentage: CGFloat) -> Color {
        precondition(percentage >= 0 && percentage <= 1)
        return Color(r: from.r + Int(CGFloat(to.r - from.r) * percentage),
                     g: from.g + Int(CGFloat(to.g - from.g) * percentage),
                     b: from.b + Int(CGFloat(to.b - from.b) * percentage))
    }
}
0
répondu 0xa6a 2018-06-06 01:50:44