/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),取最高的那个