web-dev-qa-db-fra.com

Calculer la couleur en un point donné sur un dégradé entre deux couleurs?

C'est donc essentiellement la méthode que j'aimerais écrire (en Objective-C/Cocoa, en utilisant UIColors, mais les mathématiques sous-jacentes m'intéressent vraiment):

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

Ainsi, par exemple, disons que j'ai deux couleurs, le rouge pur et le bleu pur. Étant donné un dégradé linéaire entre les deux, je souhaite calculer la couleur correspondant, par exemple, à la note de 33% sur ce dégradé: Example
Donc, si je devais appeler ma méthode comme suit:

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

J'obtiendrais la couleur résultante en 'B', et pareillement, en passant 0.0f car l'emplacement renverrait la couleur 'A' et 1.0f renverrait la couleur 'C'.

En gros, ma question est la suivante: comment puis-je mélanger les valeurs RVB de deux couleurs et déterminer la couleur à un certain "emplacement" entre elles?

ioscolorsgradientuicolor
34
blabus

Vous interpolez simplement 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);

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

46
user1118321

L'espace colorimétrique RVB est comme un cercle. Avec une saturation maximale le long de la bordure extérieure et un gris au centre. En voyageant d’une couleur à l’autre, vous préférerez de préférence le faire dans le même rayon (cercle) à partir du milieu; afin que la saturation et la valeur restent les mêmes. Dans ce cas, la teinte change de façon linéaire. Vous ne traverserez pas plus de zones grises que ne le sont initialement vos couleurs gauche et droite .. Vous pouvez vous déplacer d'un anneau intérieur à un anneau extérieur, il suffit de monter (ou de baisser) la saturation; à nouveau linéairement . Voir ici pour le cercle de couleur (essayez-le dans Paint.net, par exemple).

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

1
LenArt

une version rapide 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
0xa6a