web-dev-qa-db-ja.com

iOSで画像上にグラデーションを描画する

グラデーションカラーを作成する方法は、プログラムで次の画像のようになります。

enter image description here

iosobjective-cgradientlayer
10
user2823044

「グラデーションとして画像に適用する」とは、マスク（上部の画像を表示し、下部の画像を透明にフェードさせる）を意味しますか？その場合は、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;

上記は単純な垂直方向のグラデーションを実行します（デフォルトは垂直方向の線形グラデーションであるため）。しかし、あなたはstartPoint、endPoint、およびlocationsについて尋ねました。たとえば、マスクを水平に適用したい場合は、次のようにします。

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

最初の10％と最後の10％の2つのグラデーションが必要な場合は、次のようにします。

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];

（マスクとしてではなく）それ自体で単純なグラデーションが必要な場合は、viewを作成してから、グラデーションレイヤーを追加します。

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

CAGradientLayerクラス参照 を参照してください。

40
Rob

Swift 2.0のUIImage拡張機能を作成しました。これは、ある程度役立つかもしれません。UIColorの配列（任意の数）とグラデーションを描画するフレームを使用して呼び出します。

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
    }
}

このように呼んでください：

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

と適用する：

.backgroundColor = UIColor(patternImage: gradientImage)

または

.setBackgroundImage(gradientImage, forBarMetrics: .Default)
7
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

これが最善のアプローチであり、要件として私のために働いています

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);
}

そして、このメソッドへの入力はbounds、colorArrayです。

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

percentArray：

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