IOS

关注公众号 jb51net

关闭
首页 > 软件编程 > IOS > iOS App使用矢量图及改变其颜色

iOS应用开发中矢量图的使用及修改矢量图颜色的方法

作者:WhoJun

这篇文章主要介绍了iOS应用开发中矢量图的使用及修改矢量图颜色的方法,文中的方法是在Adobe Illustrator中绘制矢量图然后导入Xcode中使用,需要的朋友可以参考下

20163391148793.jpg (525×497)

之前捣鼓了点东西,要适配6和Plus,自己做做切图才发现确实有够烦。基于矢量图生成PNG图形的方法也是事后才知道,学习下,希望接下来可以实践。下面进入译文。

iOS应用的视觉形式通常是以图形元素驱动的。在设计开发一款应用时,你需要不同规格的应用图标,例如不同尺寸的Default.png图片,同时还需要为UI的实现准备@1x和@2x图形资源。所有这些图形元素都会让你的产品看上去更吸引人,但弊端也是很明显的 - 你需要为每种规格的图形元素单独切图。而随着iPhone 6及Plus的发布,我们又多了一套@3x需要处理,事情变得越来越复杂。

幸运的是,苹果在Xcode 6当中给我们带来了一些很棒的工具用以管理图形资源。更棒的是,新的工具和实现方式可以帮我们从容的应对未来的iOS设备,例如基于Storyboard为iOS 8设备生成启动图片,这样你就无需再为不同的设备类型单独制作。此外还有一个非常重要的新功能,就是在应用构建阶段基于PDF图片文件自动生成各种规格的图形资源。本文中,我们就来一起探索一下这种能帮你节省大量时间成本的方法。

第一步:使用Illustrator生成PDF矢量图形

首先,我们需要PDF格式的矢量图形。你可以使用Adobe Illustrator或你所熟悉的其他矢量图形工具来生成,@1x规格的即可。

如果你使用Illustrator:

为即将导出的图形元素创建新文档,使用@1x规格来设置文档的尺寸。
将需要导出的图形元素复制到新文档当中。
在“File”菜单中选择“Save”。
在保存时记得取消勾选“Preserve Illustrator Editing Capabilities”。

20163391241063.jpg (521×409)

由此导出的PDF是可拉伸的矢量图形,可以在iOS中被完美的处理为@2x和@3x规格。下一步,我们看看怎样在Xcode当中进行设置。

第二步:在Xcode项目文件中进行设置

要使用矢量化的图形资源,你需要在Xcode当中通过Asset Catalog来管理图片。不用担心,你仍可以将标准的图形导入方式与XCAssets混合起来使用,不会产生问题。执行以下步骤:

20163391258695.jpg (542×313)

接下来,你可以像以往一样使用Image Catalog中的图形资源,通过代码或Interface Builder均可。例如在代码中使用“imageNamed:”+图片集名称的字符串。

第三步:见证神奇时刻

Xcode在构建项目时会基于Asset Catalog中的PDF矢量图形自动创建@1x、@2x和@3x三种规格的PNG文件。举例说,你为Xcode提供了一个@1x规格的,尺寸为150px*150px的PDF文件,那么Xcode会自动创建下列PNG图形:

@1x规格,尺寸为150px*150px
@2x规格,尺寸为300px*300px
@3x规格,尺寸为450px*450px
应用运行时,iOS会根据不同的设备类型从上面三种图形资源中挑选出恰当的规格进行输出。另外记得为AutoLayout设置好约束,确保图形不会在大尺寸设备上被拉伸。Xcode所做的是基于PDF矢量图形创建PNG文件;应用运行时所输出的仍然是栅格化的图片,而非可以自动伸缩的矢量图形。

注意

改变矢量图的颜色

为啥要改变矢量图的颜色呢,直接叫设计师切个图不就好呢。

主要最近呢,设计师回家了,没办法只有一张图,我又懒的用ps。

就给自己弄了个课题。

其实也简单在ps中也不就是选中选区,填充颜色,然后保存。

在iOS也是差不多的。

在iOS也是差不多的。

复制代码 代码如下:

//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);//选中选区 获取不透明区域路径
    CGContextSetFillColorWithColor(context, maskColor.CGColor);//设置颜色
    CGContextFillRect(context, imageRect);//绘制

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

    UIGraphicsEndImageContext();
    return newImage;
}
@end


总结:
设计师能给你切全套那是最好的,自己也省事。
不过嘛,这个是有好处滴,可以节省app大小,可以省去按钮的高亮、选中等等图片。

您可能感兴趣的文章:
阅读全文