• 减少资源包中的图片,提高效率


     

    开始

    现在各种应用的UI越来越绚丽,连Ubuntu都开始注意美观了。在你做完某个客户端程序的时候,总会有人跳出来要你做一个好看的UI。

    过多引入图片带来的问题

    对于大公司来说,一般都有自己的UI库和配套的开发工具。而对于一些小公司来说,想让界面变得更加的漂亮,就不得不加入一张又一张的图片。

    过多引入图片会带来很多缺点,使你的应用变得笨重。

    1. 很多时候,图片在内存中比在硬盘中占用更多空间。(我说很多时候,不是全部。因为图片在内存中不是压缩的)

    2. 处理不好,会严重拖累绘制效率。

    3. 增加应用程序启动时间。(这个其实还是比较明显的,只不过现在轻便的应用越来越少,大家不注意罢了。 把一个华丽界面改成系统默认控件,启动他,你真的会获得惊喜)

    4. 增加发行包的大小。(这条是凑数的)

    一个简单的例子

    这里用简单的按钮控件举例, 用cocoa举例,因为cocoa的绘图工具箱非常方便。

    下面这个按钮最少要用2张图片:正常状态和鼠标按下状态。 如果要加鼠标悬浮效果的话,还要多一张

    其实这个按钮可以简简单单的用代码绘制出來,

    1. 一些参数

        NSSize shadowOffset;

        NSColor* shadowColor;

        CGFloat shadowRadius;

        NSColor* borderColor;

        CGFloat borderWidth;

        CGFloat cornerRadio;

        NSColor* buttonColor;

    2. 计算按钮渐变色

        这里@selector(buttonColorStart:) 和 @selector(buttonColorEnd:) 其实就是在buttonColor 的空间坐标系中进行位移, 计算出渐变的起始颜色和结束颜色

        NSColor* startColor = [self buttonColorStart:buttonColor];

        NSColor* endColor = [self buttonColorEnd:buttonColor];

    3. 阴影

        NSShadow* shadow = [[NSShadowalloc] init];

        [shadow setShadowColor: [shadowColor colorWithAlphaComponent: 0.02]];

        [shadow setShadowOffset: shadowOffset];

        [shadow setShadowBlurRadius: shadowRadius];

    4. 绘制按钮

        这部分代码才是真正的绘制代码,在OC的@selector(drawRect:)或这WIN的WM_PAINT中实现

        NSBezierPath* roundedRectanglePath = [NSBezierPath bezierPathWithRoundedRect: bounds xRadius: cornerRadio yRadius: cornerRadio];

        [NSGraphicsContextsaveGraphicsState];

        [shadow set];

        CGContextBeginTransparencyLayer(context, NULL);

        [gradient drawInBezierPath: roundedRectanglePath angle: 90];

        CGContextEndTransparencyLayer(context);

        [NSGraphicsContextrestoreGraphicsState];

        

        [borderColor setStroke];

        [roundedRectanglePath setLineWidth: borderWidth];

        [roundedRectanglePath stroke];

     最终效果:
     样子和上图还是有差别的,因为那些参数都是我随便配的。 细微调一下,便可以得出你想要的效果。

     

    更复杂的控件

    也许你会觉得按钮太简单了。 其实,对于复杂的控件,原理是差不多的。

    至今为止,我所做的几乎所有UI。 其中80%的图片资源,都是可以绘制的。 而且并不需要消耗过多的开发成本。

    贝萨尔曲线

    如果你掌握了贝萨尔曲线,那么你至少可以绘制一些简单的空间。 Win和Mac上都有现成的贝萨尔函数。

    如果没有,或者你要更灵活的实现绘制。 那么去查一下贝萨尔曲线曲线的算法吧,几个公式而已,很简单的。

    其他算法

    一些简单的渲染、滤波之类的,买本数字图形学随便看看。 不用知道那些公式是怎么来的,如何推倒计算。知道干什么的就行。

    关于效率

    我曾经因为在Win上用GDI+绘制被鄙视过,但其实GDI和GDI+的效率,并没有那么的明显。(纯属吐槽,心里不平而已)

    关于DirectUI或OpenGL: 有现成的当然好,如果没有,何必强求呢。 如果一个应用的UI沦落到必须要GPU去渲染,那么太重了

    如果你界面重绘控制的很好,不论你用什么做, 都不会出现效率问题。

    辅助工具

    我在Win和Mac上都写过一些简单的UI辅助工具。 虽然做不到所见及所得,但能够节省更多的时间。如果你打算在一个平台上长期做客户端开发,这个是必须的。

    所谓的磨刀不费砍柴功!! 

    希望多多的和我交流: liu.yuxi.canaan@gmail.com

    到这里, 正文结束了。。。

    吐槽

    1. 我写过一些UI,做过UI库,但我TMD真的不是专业做UI的!!!!!!!

    2. 如果你不喜欢某个项目,那么就用图片吧。 简简单单,他好你也好!!!!!!!(脑力的损耗比开发时间更加重要,这个我深有体会)

    3. 我更喜欢服务端的项目,真的!

  • 相关阅读:
    IP和java.net.InetAddress类的使用
    Redis(五):几个常用概念
    Redis(一):概述
    mongodb写入策略(WriteConcern)
    mongodb配置详解
    MongoDB优化
    Python 多进程异常处理
    Python多进程编程-进程间协作(Queue、Lock、Semaphore、Event、Pipe)
    Mongodb 性能测试
    把 MongoDB 当成是纯内存数据库来使用(Redis 风格)
  • 原文地址:https://www.cnblogs.com/liuyuxi/p/romve_image_from_your_resource_pack.html
Copyright © 2020-2023  润新知