V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
newkengsir
V2EX  ›  分享创造

一个用于在 iOS 项目中高效加载 PDF 矢量图标(尺寸可以无限放大)的工具。

  •  
  •   newkengsir · 2016-10-19 10:07:08 +08:00 · 3867 次点击
    这是一个创建于 2964 天前的主题,其中的信息可能已经有所发展或是发生改变。

    YHPDFImageLoader

    项目介绍地址,查看托管代码地址

    一个用于在 iOS 项目中高效加载 PDF 矢量图标(尺寸可以无限放大)的工具。

    ####在 pod 中集成方法

    • 在 Podfile 文件中添加:

        pod 'YHPDFImageLoader'
      
    • 执行 pod install 命令

    ####如何使用

    • 第一步:
    	 #import "UIImage+YHPDFIcon.h"
    
    • 第二步:
    	 UIImage *image = [UIImage yh_imageNamed:@"pdfName"];
    
    • That ‘ s all.

    ####效果展示(源文件图片分辨率为 30x46 ,大小为 8KB )

    ##更多使用方法请参照项目中 Demo 。





    ####补充:相关简介 我们知道在 Xcode 6 及以上版本可以在 Asset Catalog 中使用 PDF 格式的矢量图资源。

     [引用] 
    	 大致上, PDF 是矢量元素的事实标准。矢量文件包含一个元素的很多元数据,用来告诉系统如何渲染这些内容,而这些和屏幕分辨率无关。举个通俗易懂例子,一个圆形的矢量 PDF 图,当它渲染成 5 像素宽和渲染成 5000000 像素宽时是一样清晰的。
    
    在 iOS 平台, Xcode 是在编译时,根据你的矢量 PDF 图的大小,生成 1x 、 2x 和 3x 图。如果你的 PDF 图是 45*45px ,那么 Xcode 会在编译时生成下面 3 个 PNG :
    
    	45*45px      : 1x 设备用的(iPhone 3G and 3GS)
    	90*90px      : 2x 或 Retina 显示设备用的(iPhone 4, 4S, 5, 5S, and 6)
    	135*135px    : 3x 设备用的(iPhone 6 Plus 及以上)
    	
    这也意味着当有更高的屏幕分辨率时, Xcode 可以根据已有的矢量 PDF 放大图片,这样自动就支持以后的设备了。还有,如果你是 OS X 开发者,那么矢量 PDF 就更好用了, OS X app 完全支持矢量 PDF ,你可以用代码缩放图片而不会失真。
    

    想了解上述全部内容请猛戳传送门: 4 个你需要知道的 Asset Catalog 的秘密

    使用 PDF 作为图标素材资源具有如下优点:
    1. APP 瘦身

      我们对比一下最近设计部门的朋友刚导出的某个图标的一套常规的 PNG 图片和 PDF 类型的图片的大小:

      PDF 文件大小为 7KB

      PNG 三个文件合计大小为 85KB

      对比结果: PDF 类型的文件大概占空间为传统 PNG 类型的 8%(以当前资源为依据,不同资源对比结果可能会有部分出入)。

    2. 便于维护

      首先就是设计部门出图就会比之前方便很多,直接导出矢量文件即可,并且如果后期再需要 4X 、 5X... 规格的图,不需要对之前的图标再返工处理。

      再者作为开发者在管理图片相关的添加、替换、移除等重复性的操作维护压力可以降低。

    3. 可以无限放大

      由于 PDF 图标文件为矢量图,不同于之前的传统的位图,在放大之后可以依然保持清晰而非模糊毛边有像素颗粒感。

      例如,后期需求调整要求某一个按钮交互热区变大,相应图标也要放大。如果使用之前 PNG 类型的资源,需要设计重新再出一套图(作为一个严谨的程序员,当然不能够容忍模糊图标的存在

    4 条回复    2016-10-20 07:24:02 +08:00
    DingSoung
        1
    DingSoung  
       2016-10-19 10:34:04 +08:00
    根我这个 有什么区别吗 https://github.com/DingSoung/CCPDFImage
    DingSoung
        2
    DingSoung  
       2016-10-19 10:38:30 +08:00
    Github 上最早做这个的是 https://github.com/mindbrix/UIImage-PDF
    功能已经很齐全了
    不过很久都不更新了,渲染半透明 PDF 时存在性能问题,不支持子 bundle ,略微有些臃肿,我给他提过 pull request ,一直没有回应
    于是自己用写了一个单文件版,并且升级到 swift 3.0
    DingSoung
        3
    DingSoung  
       2016-10-19 10:51:29 +08:00
    顺便建议考虑一下大量在主线程上渲染 PDF 导致卡顿的问题,比如 table collection 快速滚动并且每个 cell 不同的图片
    kitalphaj
        4
    kitalphaj  
       2016-10-20 07:24:02 +08:00
    还是希望 iOS 以后自己能支持矢量图渲染。。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1023 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 19:13 · PVG 03:13 · LAX 11:13 · JFK 14:13
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.