快捷導(dǎo)航

iOS應(yīng)用開發(fā)中矢量圖的使用及修改矢量圖顏色的方法

更新時間：2016年03月03日 09:14:39 作者：WhoJun

這篇文章主要介紹了iOS應(yīng)用開發(fā)中矢量圖的使用及修改矢量圖顏色的方法,文中的方法是在Adobe Illustrator中繪制矢量圖然后導(dǎo)入Xcode中使用,需要的朋友可以參考下

20163391148793.jpg (525×497)

之前搗鼓了點東西，要適配6和Plus，自己做做切圖才發(fā)現(xiàn)確實有夠煩?；谑噶繄D生成PNG圖形的方法也是事后才知道，學(xué)習(xí)下，希望接下來可以實踐。下面進(jìn)入譯文。

iOS應(yīng)用的視覺形式通常是以圖形元素驅(qū)動的。在設(shè)計開發(fā)一款應(yīng)用時，你需要不同規(guī)格的應(yīng)用圖標(biāo)，例如不同尺寸的Default.png圖片，同時還需要為UI的實現(xiàn)準(zhǔn)備@1x和@2x圖形資源。所有這些圖形元素都會讓你的產(chǎn)品看上去更吸引人，但弊端也是很明顯的 - 你需要為每種規(guī)格的圖形元素單獨切圖。而隨著iPhone 6及Plus的發(fā)布，我們又多了一套@3x需要處理，事情變得越來越復(fù)雜。

幸運的是，蘋果在Xcode 6當(dāng)中給我們帶來了一些很棒的工具用以管理圖形資源。更棒的是，新的工具和實現(xiàn)方式可以幫我們從容的應(yīng)對未來的iOS設(shè)備，例如基于Storyboard為iOS 8設(shè)備生成啟動圖片，這樣你就無需再為不同的設(shè)備類型單獨制作。此外還有一個非常重要的新功能，就是在應(yīng)用構(gòu)建階段基于PDF圖片文件自動生成各種規(guī)格的圖形資源。本文中，我們就來一起探索一下這種能幫你節(jié)省大量時間成本的方法。

第一步：使用Illustrator生成PDF矢量圖形

首先，我們需要PDF格式的矢量圖形。你可以使用Adobe Illustrator或你所熟悉的其他矢量圖形工具來生成，@1x規(guī)格的即可。

如果你使用Illustrator：

為即將導(dǎo)出的圖形元素創(chuàng)建新文檔，使用@1x規(guī)格來設(shè)置文檔的尺寸。
將需要導(dǎo)出的圖形元素復(fù)制到新文檔當(dāng)中。
在“File”菜單中選擇“Save”。
在保存時記得取消勾選“Preserve Illustrator Editing Capabilities”。

20163391241063.jpg (521×409)

由此導(dǎo)出的PDF是可拉伸的矢量圖形，可以在iOS中被完美的處理為@2x和@3x規(guī)格。下一步，我們看看怎樣在Xcode當(dāng)中進(jìn)行設(shè)置。

第二步：在Xcode項目文件中進(jìn)行設(shè)置

要使用矢量化的圖形資源，你需要在Xcode當(dāng)中通過Asset Catalog來管理圖片。不用擔(dān)心，你仍可以將標(biāo)準(zhǔn)的圖形導(dǎo)入方式與XCAssets混合起來使用，不會產(chǎn)生問題。執(zhí)行以下步驟：

如果還沒有XCAsset文件，那么創(chuàng)建一個。如果已經(jīng)創(chuàng)建過，就在項目中打開。
在“Editor”菜單中選擇“New Image Set”。
在新創(chuàng)建的圖片集中，選擇空的圖片集，然后打開Utilities面板。
選擇屬性檢查器Attributes Inspector。
在類型下拉列表中，選擇“Vectors”。
圖片集會變?yōu)橹挥幸粋€拖放點的“All - Universal”。
將你的PDF矢量圖形拖放到圖片集當(dāng)中。

20163391258695.jpg (542×313)

接下來，你可以像以往一樣使用Image Catalog中的圖形資源，通過代碼或Interface Builder均可。例如在代碼中使用“imageNamed:”+圖片集名稱的字符串。

第三步：見證神奇時刻

Xcode在構(gòu)建項目時會基于Asset Catalog中的PDF矢量圖形自動創(chuàng)建@1x、@2x和@3x三種規(guī)格的PNG文件。舉例說，你為Xcode提供了一個@1x規(guī)格的，尺寸為150px*150px的PDF文件，那么Xcode會自動創(chuàng)建下列PNG圖形：

@1x規(guī)格，尺寸為150px*150px
@2x規(guī)格，尺寸為300px*300px
@3x規(guī)格，尺寸為450px*450px
應(yīng)用運行時，iOS會根據(jù)不同的設(shè)備類型從上面三種圖形資源中挑選出恰當(dāng)?shù)囊?guī)格進(jìn)行輸出。另外記得為AutoLayout設(shè)置好約束，確保圖形不會在大尺寸設(shè)備上被拉伸。Xcode所做的是基于PDF矢量圖形創(chuàng)建PNG文件；應(yīng)用運行時所輸出的仍然是柵格化的圖片，而非可以自動伸縮的矢量圖形。

注意

矢量圖形的支持只是階段性的 - 在構(gòu)建階段，Xcode會基于PDF生成PNG圖片并輸出到界面當(dāng)中。
一旦完成矢量圖形的設(shè)置，你就無法為其指定新的輸出尺寸了。如果需要更大的規(guī)格，則需要創(chuàng)建新的PDF圖形，否則在使用AutoLayout時原來的圖片會失真。
正如前面所說的，iOS 8只能支持基于PDF生成的PNG文件；但OS X卻可以真正完整的支持矢量圖形，你可以直接通過Auto Layout或代碼來縮放矢量圖形，不會產(chǎn)生任何失真。
這種方式無法兼容iOS 7之前的系統(tǒng)，因為相關(guān)的圖形資源都是通過Asset Catalog管理的。
如果你已經(jīng)使用了類似的腳本或工具來自動生成多種規(guī)格的圖形資源，那么這種方式不會給你帶來太多用處。不過，如果你的應(yīng)用同時擁有OS X和iOS兩種版本，并且會用到一些相同的圖形，那么這種方法將會是事半功倍的。

改變矢量圖的顏色

為啥要改變矢量圖的顏色呢，直接叫設(shè)計師切個圖不就好呢。

主要最近呢，設(shè)計師回家了，沒辦法只有一張圖，我又懶的用ps。

就給自己弄了個課題。

其實也簡單在ps中也不就是選中選區(qū)，填充顏色，然后保存。

在iOS也是差不多的。

復(fù)制代碼代碼如下:

//UIImage+ImageColor.h
#import <UIKit/UIKit.h>
@interface UIImage (ImageColor)
/**
* 修改矢量圖顏色
*
* @param      maskColor 修改顏色
* @return
*/
- (UIImage *)imageMaskWithColor:(UIColor *)maskColor;
@end
//UIImage+ImageColor.m
#import "UIImage+ImageColor.h"
@implementation UIImage (ImageColor)
- (UIImage *)imageMaskWithColor:(UIColor *)maskColor {
    if (!maskColor) {
        return nil;
    }

UIImage *newImage = nil;

CGRect imageRect = (CGRect){CGPointZero,self.size};
UIGraphicsBeginImageContextWithOptions(imageRect.size, NO, self.scale);

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextTranslateCTM(context, 0.0, -(imageRect.size.height));

    CGContextClipToMask(context, imageRect, self.CGImage);//選中選區(qū) 獲取不透明區(qū)域路徑
    CGContextSetFillColorWithColor(context, maskColor.CGColor);//設(shè)置顏色
    CGContextFillRect(context, imageRect);//繪制

newImage = UIGraphicsGetImageFromCurrentImageContext();//提取圖片

UIGraphicsEndImageContext();
return newImage;
}
@end

總結(jié)：
設(shè)計師能給你切全套那是最好的，自己也省事。
不過嘛，這個是有好處滴，可以節(jié)省app大小，可以省去按鈕的高亮、選中等等圖片。

您可能感興趣的文章: