/ife-css-sprites

auto sprite images.

Primary LanguageVue

IFE Css Sprites

自动生成css 雪碧图工具。

安装&启动

  1. git clone git@github.com:AspenLuoQiang/ife-css-sprites.git
  2. npm run dev or npm run build

在线体验

IFE Css Sprites

算法

主要参考 http://www.aaai.org/Papers/ICAPS/2003/ICAPS03-029.pdf 算法

基本思路

  1. 排列矩形集合（S），按照高度从高到低进行排序
  2. 取最高的1个矩形（s1）的宽高作为容器（Box）的初始宽高（BoxW，BoxH）
  3. s1永远处于Box的左上角。BoxH 不变，BoxW 可以无线延伸
  4. 判断第2个矩形（s2）能不能放到 Box 按照从左到右，从高到底这个顺序的空隙里面
    • 如果可以：放入 并 判断 BoxW 是否需要延伸
    • 如果不可以：放到s1的右边，BoxW 延伸
  5. 继续第3步，判断s3, s4, s5......

扩展思路

  1. 根据Box的初始高度，可以得到最终最小面积（Best）的第一个样本（Sample）
  2. 通过阶梯增加Box的高度（boxHeightStep），得到多个样本
  3. 比较每个样本的 面积利用率（U），取最高的那个