iOS 使用矢量图
更多图片处理方法见图片组件 BBWebImage
iOS 使用矢量图
iOS 图标通常用 PNG 格式的图片。PNG 图片放大到超过自身的大小就会模糊。可以使用 PDF 格式的矢量图,优点是任意改变图片大小并且保持清晰度。
简单使用
与 PNG 格式的图片一样,在 Xcode 中把 PDF 格式的矢量图拖进 *.xcassets (默认是 Assets.xcassets) 文件夹中,然后用不带后缀(.pdf)的文件名生成 UIImage
imageView.image = [UIImage imageNamed:@"Vector"];
注意,如果以上代码用 "Vector.pdf",无法得到 UIImage。
这样做的话,Xcode 会在编译时根据 PDF 图的大小生成 @1x、@2x、@3x 的 PNG 图片,与使用 PNG 图片的显示效果相同。如果把图片放大到超过 PNG 图片的大小,则会显示模糊的图片。没有发挥矢量图可以任意调整大小的优点。
改变矢量图大小
如果需要改变矢量图大小并且保持清晰度,那就要解析 PDF 源文件,把矢量图绘制成所需大小的位图(Bitmap)。YHPDFImageLoader 库就实现了这个功能,并且可以选择拉伸图片时是否保持原图宽高比,还添加了内存和磁盘缓存。解析 PDF 并绘制位图的代码在 YHPDFImageDraw.m 文件的 drawImageWithURL:size:canStretched:page: 方法中。但是那些代码有 bug,在保持原图宽高比的时候,绘制出的位图不居中。这里参照那些代码,写了 UIImage 的 Category,用于解析 PDF 源文件,绘制指定大小的位图;可以选择拉伸图片时是否保持原图宽高比;拉伸时保持图片居中。注意,这里的 PDF 文件放在工程目录中,与 *.m、*.h 文件一样,不能放在 *.xcassets 里。
#import "UIImage+Vector.h"
@implementation UIImage (Vector)
+ (UIImage *)vectorImageWithName:(NSString *)name size:(CGSize)size {
// 默认保持原图宽高比
return [self vectorImageWithName:name size:size stretch:NO];
}
+ (UIImage *)vectorImageWithName:(NSString *)name size:(CGSize)size stretch:(BOOL)stretch {
// PDF 文件路径
NSString *path = [NSBundle.mainBundle pathForResource:name ofType:@"pdf"];
NSAssert(path, @"Vector image file path should NOT be nil");
if (!path) return nil;
return [self vectorImageWithURL:[NSURL fileURLWithPath:path] size:size stretch:stretch page:1];
}
// url: PDF 文件 URL
// size: 所需绘制图片大小;如果需要绘制原图大小,用 CGSizeZero
// stretch: 是否拉伸;YES,拉伸图片,忽略原图宽高比;NO,保持原图宽高比
+ (UIImage *)vectorImageWithURL:(NSURL *)url size:(CGSize)size stretch:(BOOL)stretch page:(NSUInteger)page {
CGFloat screenScale = UIScreen.mainScreen.scale;
// PDF 源文件
CGPDFDocumentRef pdfRef = CGPDFDocumentCreateWithURL((__bridge CFURLRef)url);
// PDF 中的一页
CGPDFPageRef imagePage = CGPDFDocumentGetPage(pdfRef, page);
// PDF 这一页显示出来的 CGRect
CGRect pdfRect = CGPDFPageGetBoxRect(imagePage, kCGPDFCropBox);
// 传入的大小如果为零,使用 PDF 原图大小
CGSize contextSize = (size.width <= 0 || size.height <= 0) ? pdfRect.size : size;
// RGB 颜色空间
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
// 位图上下文
CGContextRef context = CGBitmapContextCreate(NULL,
contextSize.width * screenScale,
contextSize.height * screenScale,
8,
0,
colorSpace,
kCGBitmapByteOrderDefault | kCGImageAlphaPremultipliedFirst);
// 坐标缩放,增加清晰度
CGContextScaleCTM(context, screenScale, screenScale);
if (size.width > 0 && size.height > 0) {
// 指定图片大小,需要缩放图片
// 计算宽高缩放比
CGFloat widthScale = size.width / pdfRect.size.width;
CGFloat heightScale = size.height / pdfRect.size.height;
if (!stretch) {
// 保持原图宽高比,使用宽高缩放比中的最小值
heightScale = MIN(widthScale, heightScale);
widthScale = heightScale;
// 坐标平移,使图片居中
CGFloat currentRatio = size.width / size.height;
CGFloat realRatio = pdfRect.size.width / pdfRect.size.height;
if (currentRatio < realRatio) {
CGContextTranslateCTM(context, 0, (size.height - size.width / realRatio) / 2);
} else {
CGContextTranslateCTM(context, (size.width - size.height * realRatio) / 2, 0);
}
}
// 用以上宽高缩放比缩放坐标
CGContextScaleCTM(context, widthScale, heightScale);
} else {
// 使用原图大小
// 获取原图坐标转换矩阵,用于位图上下文
CGAffineTransform drawingTransform = CGPDFPageGetDrawingTransform(imagePage, kCGPDFCropBox, pdfRect, 0, true);
CGContextConcatCTM(context, drawingTransform);
}
// 把 PDF 中的一页绘制到位图
CGContextDrawPDFPage(context, imagePage);
CGPDFDocumentRelease(pdfRef);
// 创建 UIImage
CGImageRef image = CGBitmapContextCreateImage(context);
UIImage *pdfImage = [[UIImage alloc] initWithCGImage:image scale:screenScale orientation:UIImageOrientationUp];
// 释放资源
CGImageRelease(image);
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
return pdfImage;
}
@end
使用方法
// 保持原图宽高比
imageView.image = [UIImage vectorImageWithName:@"Vector" size:CGSizeMake(50, 50)];
// 拉伸图片,忽略原图宽高比
imageView.image = [UIImage vectorImageWithName:@"Vector"
size:CGSizeMake(50, 50)
stretch:YES];
参考
http://lugede.cn/ios-use-vector-pdf-image
https://github.com/jiisd/YHPDFImageLoader
转载请注明出处:http://www.cnblogs.com/silence-cnblogs/p/7307554.html
iOS 使用矢量图的更多相关文章
- iOS 矢量图pdf替换2倍3倍图
一.在开发中矢量图的使用大大提高设计的切图效率! ios 中可以用pdf替换现在的2倍3倍图(1倍图已经忽略) 1.将pdf矢量图拖进工程Assets.xcassets中 2.按照步骤操作 3.矢量图 ...
- iOS - 如何切图适配各种机型
关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...
- 在 Xcode 6 中使用矢量图( iPhone 6 置配 UI)
在 Xcode 6 中使用矢量图( iPhone 6 置配 UI) (本文转载:http://iosdeveloper.diandian.com/post/2014-09-25/40063062789 ...
- iconfont.cn阿里巴巴矢量图下载字体图标实战
1.阿里巴巴矢量图网址:www.iconfont.cn 2.然后用新浪微博账号登录 3.输入要查找的图标相应的关键字,回车 4.滑过要找的图标,点击购物车,让图标存储到暂存架中 5.点击暂存架,存储为 ...
- 在xcode6中使用矢量图(iPhone6置配UI)
转载出处:http://blog.xoneday.com ios应用程序是一个图像主导的产品.在开发一个应用程序时,你需要各种尺寸的图标,你需要为每个图像文件制作一个@1x尺寸和一个@2x尺寸.这样你 ...
- (转)iOS 对矢量图片的支持如何?
简单说,iOS 支持矢量图片,不过支持的一般.在系统层面上,iOS 对矢量绘图支持得很好.iOS 的 Core Graphics 框架带有很多矢量绘图命令,简单一些的直线.矩形.椭圆,复杂一些的贝赛尔 ...
- PaintCode 教程:矢量图轻松转换成CoreGraphics代码
本文译自Ranwenderlich的这篇:http://www.raywenderlich.com/100281/paintcode-for-designers-getting-started Pai ...
- 将阿里矢量图添加到element-ui
在阿里矢量图的操作 选择需要的图标添加至购物车 选择图标 将购物车中的图标, 添加至项目 添加至项目 会自动跳转到我的项目 项目页面 在 更多操作 中选择 编辑项目 更多操作 将 Fo ...
- 矢量图绘制工具Svg-edit调整画布的大小
矢量图绘制工具Svg-edit调整画布的大小 ------------------------------ ------------------------
随机推荐
- log4go的输出优化
又看了一些golang的日志包和相关的文章,仔细阅读了go 1.9.2系统提供的log和go-log,产生了对log4go的日志输出进行优化的想法. 结构化与multiwriter log使用mult ...
- AI 系列 总目录
AI 系列 答应了园区大牛 张善友 要写AI 的系列博客,所以开始了AI 系列之旅. 一.四大平台系列(百度AI.阿里ET.腾讯.讯飞) 1.百度篇 (1) 百度OCR文字识别-身份证识别 (2) 基 ...
- 【java】ArrayList、Iterator用法
package com.tn.collect; import java.util.ArrayList; import java.util.Iterator; class Product{ public ...
- linux下PHP后台配置极光推送问题
一.composer.json配置注意空格 按照极光推送官网所述,在composer.json下写入: "require": { "jpush/jpush": ...
- lsattr 命令详解
lsattr 作用: 查看文件的第二扩展文件系统属性 选项: -a: 列出目录中的全部文件 -E: 显示设备属性的当前值, 从设备数据库中获得 -D: 显示属性的名称, 属性的默认值,描述和用户是否 ...
- crm踩坑记(三)
React 如何同步更新state 由于setState方法是异步的,而通常很多时候在一个生命周期里更新state后需要在另一个生命周期里使用这个state. 下面介绍几个方法 // 1 this.s ...
- 优化设计提高sql类数据库的性能
前言 在一个项目中,技术的统一性是最重要的,数据库的设计则是重点中的重点.NoSQL 是目前最流行的数据库,但是其实用性和功能性远不如sql数据库. 实际很多SQL数据库被诟病的性能问题大多是源于程序 ...
- 关于模拟登陆微博(PC)
微博模拟登陆 1.基类对象的方法建立一个类__init__初始化方法,接收username和password. class launcher(): def __init__(self, usernam ...
- shell脚本异步日志分析-接口耗时、可用率
背景:现有日志接入日志报表大盘,为了避免作业高峰期间(双十一),系统也要观测系统整体情况,因此提出了观测近五分钟,接口成功率以及耗时等工具(默认统计最近五分钟,并进行结果汇总统计) 使用说明 前提:p ...
- RSA加解密实现
RSA是由MIT的三位数学家R.L.Rivest,A.Shamir和L.Adleman[Rivest等1978, 1979]提出的一种用数论构造双钥的方法,被称为MIT体制,后来被广泛称之为RSA体制 ...