web-dev-qa-db-fra.com

Dessin du dégradé sur l'image dans ios

Comment créer une couleur de dégradé ressemble à l'image suivante par programme.

enter image description here

iosobjective-cgradientlayer
10
user2823044

Quand vous dites "appliquez-le sur l'image en tant que dégradé", voulez-vous dire en tant que masque (révélant l'image en haut, en la faisant passer en fondu à transparence)? Si tel est le cas, vous pouvez appliquer ce dégradé en tant que masque, en utilisant CAGradientLayer:

CAGradientLayer *gradientMask = [CAGradientLayer layer];
gradientMask.frame = self.imageView.bounds;
gradientMask.colors = @[(id)[UIColor whiteColor].CGColor,
                        (id)[UIColor clearColor].CGColor];
self.imageView.layer.mask = gradientMask;

Ce qui précède crée un dégradé vertical simple (car la valeur par défaut est un dégradé vertical et linéaire). Mais vous avez posé des questions sur startPoint, endPoint et locations. Si, par exemple, vous vouliez que votre masque soit appliqué horizontalement, vous feriez:

gradientMask.startPoint = CGPointMake(0.0, 0.5);   // start at left middle
gradientMask.endPoint = CGPointMake(1.0, 0.5);     // end at right middle

Si vous vouliez avoir deux gradients, l'un aux 10% premiers et l'autre aux 10% restants, vous feriez:

gradientMask.colors = @[(id)[UIColor clearColor].CGColor,
                        (id)[UIColor whiteColor].CGColor,
                        (id)[UIColor whiteColor].CGColor,
                        (id)[UIColor clearColor].CGColor];
gradientMask.locations = @[@0.0, @0.10, @0.90, @1.0];

Si vous voulez un simple dégradé par lui-même (pas sous forme de masque), créez une view, puis ajoutez-y le calque de dégradé:

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor,
                    (id)[UIColor blackColor].CGColor];
[view.layer addSublayer:gradient];

Voir la référence CAGradientLayerclass .

40
Rob

Je viens d'écrire une extension UIImage pour Swift 2.0. Peut-être est-ce utile? Vous l'appelez avec un tableau de UIColor (n'importe quel nombre) et un cadre dans lequel le dégradé doit être tracé.

extension UIImage {

    class func convertGradientToImage(colors: [UIColor], frame: CGRect) -> UIImage {

        // start with a CAGradientLayer
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = frame

        // add colors as CGCologRef to a new array and calculate the distances
        var colorsRef = [CGColor]()
        var locations = [NSNumber]()

        for i in 0 ... colors.count-1 {
            colorsRef.append(colors[i].CGColor as CGColorRef)
            locations.append(Float(i)/Float(colors.count-1))
        }

        gradientLayer.colors = colorsRef
        gradientLayer.locations = locations

        // now build a UIImage from the gradient
        UIGraphicsBeginImageContext(gradientLayer.bounds.size)
        gradientLayer.renderInContext(UIGraphicsGetCurrentContext()!)
        let gradientImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        // return the gradient image
        return gradientImage
    }
}

Appelez ça comme ça:

let colors = [
    UIColor.blueColor(),
    UIColor.greenColor()
    // and many more if you wish
]
let gradientImage = UIImage.convertGradientToImage(colors, frame: navigationBar.bounds)

et appliquer avec:

.backgroundColor = UIColor(patternImage: gradientImage)

ou

.setBackgroundImage(gradientImage, forBarMetrics: .Default)
6
RyuX51
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = self.view.bounds;


gradient.startPoint = CGPointMake(1.0, 1.0); //Dark From bottom
gradient.endPoint = CGPointMake(1.0, 0);


gradient.colors = [NSArray arrayWithObjects:
                   (id)[[UIColor blackColor] CGColor],
                   (id)[[UIColor clearColor] CGColor], nil];


[self.view.layer insertSublayer:gradient atIndex:0];
2
VNAIK

C'est la meilleure approche, travaillant pour moi comme exigence

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = yourImageView.layer.bounds;

gradientLayer.colors = [NSArray arrayWithObjects:
                        (id)[UIColor colorWithWhite:1.0f alpha:1.0f].CGColor,
                        (id)[UIColor colorWithWhite:0.0f alpha:0.9f].CGColor,
                        nil];

gradientLayer.locations = [NSArray arrayWithObjects:
                           [NSNumber numberWithFloat:0.0f],
                           [NSNumber numberWithFloat:1.0f],
                           nil];

[yourImageView.layer addSublayer:gradientLayer];
1
Devendra Singh
-(void) drawGradientinBounds: (CGRect) currentBounds withColors:(NSArray*) colors andPercentages:(NSArray *)percentages andGradientDirectionIsVertical:(BOOL)isGradientDirectionVertical
{

    CGContextRef currentContext = UIGraphicsGetCurrentContext();

    CGGradientRef glossGradient;
    CGColorSpaceRef rgbColorspace;

    size_t num_locations = [percentages count];
    CGFloat locations[num_locations];
    for(int i=0;i<num_locations;i++)
        locations[i] = [[percentages objectAtIndex:i] floatValue];

    int comps = [colors count]*4;
    CGFloat components[comps];
    for(int i = [colors count]-1;i>=0;i--)
    {
        comps--;
        UIColor *c = [colors objectAtIndex:i];
        const CGFloat *cg = CGColorGetComponents([c CGColor]);
        components[comps] = cg[3];
        comps--;
        components[comps] = cg[2];
        comps--;
        components[comps] = cg[1];
        comps--;
        components[comps] = cg[0];
    }

    rgbColorspace = CGColorSpaceCreateDeviceRGB();
    glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);

    CGPoint topCenter;
    CGPoint endCenter;

    if(isGradientDirectionVertical)
    {
        topCenter = CGPointMake(CGRectGetMidX(currentBounds), currentBounds.Origin.y);
        endCenter = CGPointMake(CGRectGetMidX(currentBounds), CGRectGetHeight(currentBounds)+currentBounds.Origin.y);

    }
    else
    {
        topCenter = CGPointMake( currentBounds.Origin.x,CGRectGetMidY(currentBounds));
        endCenter = CGPointMake(CGRectGetWidth(currentBounds)+currentBounds.Origin.x,CGRectGetMidY(currentBounds));
    }
    CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, endCenter, 0);

    CGGradientRelease(glossGradient);
    CGColorSpaceRelease(rgbColorspace);
}

Et les entrées de cette méthode sont bounds, colorArray:

[NSArray arrayWithObjects:[UIColor blackColor], [UIColor whiteColor], nil]

pourcentageArray:

[NSArray arrayWithObjects:[NSNumber numberWithFloat:0.0], [NSNumber numberWithFloat:1.0], nil]
0
Lakshmi