Cocoa Touch - オーバーレイ表示でテクスチャを追加する

Question

私はプログラマブルな背景色を持つUIViewとしてタイルのセットを持っていて、それぞれ は異なる色にすることができます。私はサイドライトのようなテクスチャをそれぞれに追加したいと思います。オーバーレイビューや他の方法でこれを行うことはできますか？

私は、それぞれのケースでカスタムイメージファイルを必要としない提案を探しています。

Answer 1

これは他のトピックからまとめられていましたが、これは誰かを助けるかもしれません。グレースケール画像を作成、通常のための任意の色で面取りタイル画像を作成して、網膜ディスプレイのために、私はPhotoshopで傾斜画像を作り、ゼロに彩度を設定する は私も作成tileBevel.png

と呼ば

+ (UIImage*) createTileWithColor:(UIColor*)tileColor { 

    int pixelsHigh = 44; 
    int pixelsWide = 46; 
    UIImage *bottomImage; 

    if([UIScreen respondsToSelector:@selector(scale)] && [[UIScreen mainScreen] scale] == 2.0) { 
     pixelsHigh *= 2; 
     pixelsWide *= 2; 
     bottomImage = [UIImage imageNamed:@"tileBevel@2x.png"];   
    } 
    else { 
     bottomImage = [UIImage imageNamed:@"tileBevel.png"]; 
    } 

    CGImageRef theCGImage = NULL; 
    CGContextRef tileBitmapContext = NULL; 

    CGRect rectangle = CGRectMake(0,0,pixelsWide,pixelsHigh); 

    UIGraphicsBeginImageContext(rectangle.size); 

    [bottomImage drawInRect:rectangle]; 

    tileBitmapContext = UIGraphicsGetCurrentContext(); 

    CGContextSetBlendMode(tileBitmapContext, kCGBlendModeOverlay); 

    CGContextSetFillColorWithColor(tileBitmapContext, tileColor.CGColor);   
    CGContextFillRect(tileBitmapContext, rectangle); 

    theCGImage=CGBitmapContextCreateImage(tileBitmapContext); 

    UIGraphicsEndImageContext(); 

    return [UIImage imageWithCGImage:theCGImage]; 

} 

これは網膜ディスプレイが使用されているかどうかを確認：網膜ディスプレイ（tileBevel@2x.png）ここ

ための1つのコードであります描画する矩形のサイズを変更し、適切なグレースケールのベースイメージを選択し、ブレンディングモードをオーバーレイに設定して、下部イメージの上に矩形を描画します。これらのすべては、BeginImageContextおよびEndImageContext呼び出しで囲まれたグラフィックスコンテキスト内で実行されます。これらは、UIImage drawRect：メソッドが必要とする現在のコンテキストを設定します。コアグラフィック関数は、現在のコンテキストを取得するための呼び出しによって取得されるパラメータとしてコンテキストを必要とします。

、結果は次のようになります。

Answer 2

あなたは元画像のアルファチャンネルを保持したい場合は、単にフィルRECTの前にジムのコードにこれを追加します。

// Apply mask 
CGContextTranslateCTM(tileBitmapContext, 0, rectangle.size.height); 
CGContextScaleCTM(tileBitmapContext, 1.0f, -1.0f); 

CGContextClipToMask(tileBitmapContext, rectangle, bottomImage.CGImage); 

Answer 3

スウィフト3のソリューション。基本的にScripteaseの追加でJimの答えに基づいています。

class func image(bottomImage: UIImage, topImage: UIImage, tileColor: UIColor) -> UIImage? { 
    let pixelsHigh: CGFloat = bottomImage.size.height 
    let pixelsWide: CGFloat = bottomImage.size.width 

    let rectangle = CGRect.init(x: 0, y: 0, width: pixelsWide, height: pixelsHigh) 
    UIGraphicsBeginImageContext(rectangle.size); 

    bottomImage.draw(in: rectangle) 

    if let tileBitmapContext = UIGraphicsGetCurrentContext() { 
     tileBitmapContext.setBlendMode(.overlay) 
     tileBitmapContext.setFillColor(tileColor.cgColor) 
     tileBitmapContext.scaleBy(x: 1.0, y: -1.0) 
     tileBitmapContext.clip(to: rectangle, mask: bottomImage.cgImage!) 
     tileBitmapContext.fill(rectangle) 
     let theCGImage = tileBitmapContext.makeImage() 
     UIGraphicsEndImageContext(); 

     if let theImage = theCGImage { 
      return UIImage.init(cgImage: theImage) 
     } 
    } 

    return nil 
}