Just My Life & My Work

[iOS] 一張圖多顏色 (One Image Multi Color)

2020 年 10 月 19 日

看標題還不知道要做什麼，那麼就直接來寫程式！

其實一張圖多顏色 (One Image Multi Color)，就是想要只提供一張圖片，就能呈現多樣顏色，這有什麼好處？就不用設計師出許多不同顏色的圖囉！

原本給的圖是土色，圖案上還有些許木頭紋路，我們來嘗試改變它的Tint Color～

初始化ImageView，設定Image的UIImageRenderingMode為UIImageRenderingModeAlwaysTemplate。

/**
 Theme: One Image Multi Color
 IDE: Xcode 12
 Language: Objective C
 Date: 109/10/15
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

- (void)testImage {
    
    UIImageView *imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"happy day"]];
    imageView.tintColor = [UIColor blackColor];
    [self.view addSubview:imageView];
    imageView.center = CGPointMake(200, 100);
    
    UIImageView *imageView2 = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"happy day"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]];
    imageView2.tintColor = [UIColor blackColor];
    [self.view addSubview:imageView2];
    imageView2.center = CGPointMake(200, 300);
    
    UIImageView *imageView3 = [[UIImageView alloc] initWithImage:[[UIImage imageNamed:@"happy day"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate]];
    imageView3.tintColor = [UIColor greenColor];
    [self.view addSubview:imageView3];
    imageView3.center = CGPointMake(200, 500);
}

呈現在螢幕上如是～看起來紋路不見了呢！

201124更新

若只想在UIImage上做處理，可以使用⋯⋯

/**
 Theme: One Image Multi Color
 IDE: Xcode 12
 Language: Objective C
 Date: 109/11/24
 Author: HappyMan
 Blog: https://cg2010studio.com/
 */

- (void)testImage2 {
    // Create a graphics image context
    UIGraphicsBeginImageContext(newSize);
    
    image = [image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    UIColor *color = [UIColor redColor];
    [color setFill];

    // Tell the old image to draw in this new context, with the desired
    // new size
    [image drawInRect:CGRectMake(0,0,newSize.width,newSize.height)];

    // Get the new image from the context
    UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
    
    // End the context
    UIGraphicsEndImageContext();
}

原圖

上色圖

參考：單一色系圖片，直接用程式改變圖片的顏色 imageWithRenderingMode、How can I change image tintColor in iOS and WatchKit。

分類：

iOS, 教學

發表留言

Tagged with:

隨意留個言吧：）～

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料。

標籤雲