不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
PSpriter之RectanglePacking--矩形布局 进入全屏
line

在Css Sprites中进行图片合并,需要考虑到图片如何布局的问题,而且得考虑:

如果是混合模式进行图片合并,那么该如何布局,才能保证合并后的大图面积最小(能合并成100KB的,绝对比合并成120KB的好!)。

这也还不够,还需要考虑的是:布局的算法,如何才能性能更佳?也就是矩形布局所需要消耗的时间。


查了好多资料,也看了老外的布局算法,有rectangle packing,有bin packing,但还是满足不了自己对性能的要求。

所以,干脆自己写一个吧!

简介:

/**
* 矩形布局算法,支持三种模式布局
*  1、verticla:垂直方向布局
*  2、horizontal:水平方向布局
*  3、mixed:混合布局
*        
* @example
*     // 导入类库
*     include_once('PSpriter/RectanglePacking.class.php');
*     // 需要进行布局的矩阵列
*     $rectangles = array(
*               array( 'width'=>100, 'height'=>30 ),
*               array( 'width'=>50, 'height'=>40 ),
*               array( 'width'=>110, 'height'=>45 ),
*          );
*     // 布局所需配置
*     $options = array(
*               'margin' => 5,
*               'packing' => 'mixed'
*          );
*     // 创建布局实例
*     $packing_instance = new RectanglePacking();
*     // 布局
*     $result = $packing_instance->run($rectangles,$options);
*        
*     // 要看返回结果的格式,请查看run方法的注释
*      $result = array(
*                'canvas' => array(
*                     'width' => 100,      // 画布宽度
*                     'height' => 100      // 画布高度
*                 ),
*                'rectangles' => array(
*                     array(
*                          'width'=>10,      // 矩形的原始宽度
*                          'height'=>10,     // 矩形的原始高度
*                          'x'=>1,           // 矩形在画布中的x坐标
*                          'y'=>1            // 矩形在画布中的y坐标
*                     )
*                )
*      );          
* @author zhaoxianlie
*
*/


原理其实不复杂,分三种情况进行布局。

有关PSpriter的源码,在后续文章开放!

这里只是看看大概的使用方法。

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line